ToggleGroup
Several toggles in a row, exclusive or independent.
In context
Showing the board view of 7 tasks, 2 in progress.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | ToggleGroupItem[] | Yes | — |
disabled | boolean | undefined | No | — |
size | "sm" | "md" | "lg" | undefined | No | — |
type | "single" | "multiple" | Yes | — |
value | string | string[] | undefined | No | — |
defaultValue | string | string[] | undefined | No | — |
onValueChange | ((value: string) => void) | ((value: string[]) => void) | undefined | No | — |
type="single" vs. type="multiple"
"single" behaves like an exclusive choice (picking one clears the others; re-clicking the pressed one clears it) but stays visually and semantically a row of independent toggle buttons — not SegmentedControl's radiogroup/radio roles, which is the right shape when the options are one logical field rather than a toolbar. "multiple" lets any number stay pressed at once (Bold + Italic + Underline all active together).
No composite-widget keyboard model
A deliberate, accepted gap: each item is a real, independently Tab-able Toggle — no roving-tabindex/arrow-key composite widget like SegmentedControl has. This matches how a real toolbar of independent toggle buttons behaves in the editors this pattern is modeled on.
data-rebar-* attributes
data-rebar-component="toggle-group", data-rebar-toggle-group-type="single" | "multiple" on the root; each item is a real Toggle carrying data-rebar-part="item".
Migrating to Ant Design
Not codemod-covered — AntD has no direct multi-toggle-button-row primitive; its closest analogs are Checkbox.Group (for the multiple case) or a manually-built row of Buttons.