A set of two-state buttons that can be toggled on or off.
| Name | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | single | Whether single or multiple items can be selected |
| orientation | "horizontal" | "vertical" | horizontal | Layout orientation |
| size | "default" | "sm" | "lg" | default | Size variant |
| disabled | boolean | — | Disable all items |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background (Pressed) | color.accent | var(--accent) | Pressed state background | |
| Text (Pressed) | color.accent-foreground | var(--accent-foreground) | Pressed state text | |
| Border | color.border | var(--border) | Group border | |
| Border Radius | borderRadius.lg | 0.5rem | Large corner rounding | |
| Height (sm) | spacing.8 | 2rem | Small item height | |
| Height (default) | spacing.9 | 2.25rem | Default item height | |
| Height (lg) | spacing.10 | 2.5rem | Large item height | |
| Font Size (sm) | fontSize.xs | 0.75rem | Extra small text for sm size | |
| Font Size (default) | fontSize.sm | 0.875rem | Small text for default size | |
| Font Size (lg) | fontSize.base | 1rem | Base text for lg size |
Only one item can be selected at a time, like radio buttons.
<ToggleGroup type="single" defaultValue="center"> <ToggleGroupItem value="left">Left</ToggleGroupItem> <ToggleGroupItem value="center">Center</ToggleGroupItem> <ToggleGroupItem value="right">Right</ToggleGroupItem> </ToggleGroup>
Multiple items can be selected, like checkboxes.
Selected: ["bold"]
<ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
<ToggleGroupItem value="bold" className="font-bold">B</ToggleGroupItem>
<ToggleGroupItem value="italic" className="italic">I</ToggleGroupItem>
<ToggleGroupItem value="underline" className="underline">U</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" className="line-through">S</ToggleGroupItem>
</ToggleGroup>Manage selection state externally with value and onValueChange.
Current value: center
const [alignment, setAlignment] = useState('center');
<ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
...
</ToggleGroup>Available size variants for different contexts.
Small
Default
Large
<ToggleGroup type="single" size="sm" defaultValue="grid"> <ToggleGroupItem value="grid">Grid</ToggleGroupItem> <ToggleGroupItem value="list">List</ToggleGroupItem> </ToggleGroup>
Icon-only toggle groups for compact layouts.
<ToggleGroup type="single" defaultValue="grid" size="sm">
<ToggleGroupItem value="grid" aria-label="Grid view">
<GridIcon className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="list" aria-label="List view">
<ListIcon className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>Individual items can be disabled while others remain interactive.
<ToggleGroup type="single" defaultValue="published"> <ToggleGroupItem value="draft">Draft</ToggleGroupItem> <ToggleGroupItem value="published">Published</ToggleGroupItem> <ToggleGroupItem value="archived" disabled>Archived</ToggleGroupItem> </ToggleGroup>