Actions
Toggle group
A row of toggles that share a value: one at a time by default, or several with multiple. Spacing 0 joins them into a segmented control.
packages/design-system/components/ui/toggle-group.tsx
Examples
Anatomy
- 01Group
- 02Items, each a Toggle
- 03Pressed item, muted fill
Usage
import { ToggleGroup, ToggleGroupItem } from "@repo/design-system/components/ui/toggle-group";
<ToggleGroup value={[device]} onValueChange={([next]) => next && setDevice(next)} variant="outline" spacing={0}>
<ToggleGroupItem value="desktop" aria-label="Desktop"><MonitorIcon /></ToggleGroupItem>
<ToggleGroupItem value="mobile" aria-label="Mobile"><SmartphoneIcon /></ToggleGroupItem>
</ToggleGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string[] | none | Always an array in Base UI, even for a single choice. |
| onValueChange | (value: string[], details) => void | none | Called with the new array of pressed values. |
| multiple | boolean | false | Let more than one item be pressed. |
| variant | "default" | "outline" | none | Passed to every item through context. |
| size | "default" | "sm" | "lg" | none | Passed to every item through context. |
| spacing | number | 2 | Gap in spacing units. 0 joins the items and rounds only the ends. |
| orientation | "horizontal" | "vertical" | "horizontal" | Row or column. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Use it for views of the same thing: device, layout, period.
Don't
- Use it for more than five options. Reach for a select.