Search for a command to run...
A row of mini RadioCard-style buttons that share state. Use `type="single"` for segmented "pick one" patterns; `type="multiple"` for "pick any" toolbars. Brand-tinted border + faint fill marks the active option(s).
ToggleGroupForwards every Radix ToggleGroup.Root prop. The shape splits on type:
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Required. single = one item selected at a time (string value). multiple = any items selected (array). |
value | string | string[] | — | Controlled value. string for type="single", string[] for type="multiple". |
defaultValue | string | string[] | — | Uncontrolled initial value. |
onValueChange | (value) => void | — | Fires on selection change. For type="single", value can be empty string when user deselects the active item — guard with v && setValue(v). |
disabled | boolean | false | Disables every item. |
className | string | — | Override the default inline-flex flex-wrap items-center gap-2. Use flex-col for vertical, gap-N to tune. |
ToggleGroupItemForwards every Radix ToggleGroup.Item prop. Inherits the toggleStyles chrome (mini RadioCard).
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value this item represents. Required. |
disabled | boolean | false | Disables this item only (in addition to group-level). |
Use type="single" for mutually exclusive view-mode pickers (alignment, density, sort
direction). The selected option stays visually pressed; the rest are dim chips.
Use type="multiple" for toolbar patterns where any combination is valid (Bold + Italic
Guard onValueChange against the empty string for type="single" — Radix fires it when the
user deselects the active item. (v) => v && setValue(v) keeps a value pinned at all times.
Drop flex-wrap (default) when the group is in a tight row; switch to flex-col for vertical
stacks (settings drawers, mobile filters).
Use ToggleGroup when each option carries a description. Reach for RadioCard instead —
the chips are too compact to fit secondary text.
Use type="single" for binary on/off. Switch (instant) or Toggle (single chip) read more
directly.
Stack 6+ chips. Past that, the row gets noisy — use Select or RadioCard for many options.