Skip to content
Components

ToggleGroup

A literal group of {@link Toggle}s: several two-state pressable buttons that share one selection, laid out joined (a seamless segmented row), separated, or wrapped. Built on Base UI ToggleGroup - by default one item is pressed at a time (radio-like), multiple makes it checkbox-like; value is always an array. The Toggles inside take size / radius / variant from the group through context.

Usage

import { ToggleGroup } from "@instruments/materia-ui/components/toggle-group";

Best practices

  • An always-one-selected mode switcher is SegmentedControl, not ToggleGroup - reach here for multi-select toolbars and deselectable choice chips.

  • layout="wrap" + required (without multiple) is the wizard choice-chip recipe.

  • Put plain Toggles inside, each with a value, as Base UI does.

  • Icon-only toggles need an aria-label (a dev warning fires otherwise).

Props

PropTypeDefaultDescription
layoutToggleGroupLayout"joined"

How items sit together.

requiredbooleanfalse

Single-selection only: the active item cannot be deselected (Tabs/RadioGroup semantics). Dev-warns if used with multiple.

sizeResponsiveValue<ToggleSize>"base"

Toggle's scale - a single token or a per-breakpoint object.

radiusToggleRadius"rounded"

Toggle radius shared by every item.

variantToggleVariant"default"

Visual style forwarded to toggleVariants.

Composition

Builds on

Toggle

Used by

DataGrid