Toggle Group
A set of two-state buttons that can be toggled on or off.
Installation
npx shadcn@latest add @uqudo/toggle-groupInstalling it also installs Toggle, whose
toggleVariants recipe styles every item.
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/uqudo/ui/toggle-group"<ToggleGroup type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<BoldIcon />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<ItalicIcon />
</ToggleGroupItem>
</ToggleGroup>type="single" allows one pressed item at a time and reports a string;
type="multiple" allows any number and reports a string[]. Set variant,
size and spacing once on the group: they are passed to every item through
context.
Examples
Single
Sizes
Joined
With spacing={0} the items sit flush against each other and share one
rounded border, like a segmented control.
<ToggleGroup type="single" variant="outline" spacing={0}>
<ToggleGroupItem value="day">Day</ToggleGroupItem>
<ToggleGroupItem value="week">Week</ToggleGroupItem>
<ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>API Reference
ToggleGroup
Prop
Type
ToggleGroupItem
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | both | toggle-group or toggle-group-item. |
data-variant | both | The resolved variant. |
data-size | both | The resolved size. |
data-spacing | both | The resolved spacing. |
data-orientation | ToggleGroup | The resolved orientation. |
data-state | ToggleGroupItem | on or off, set by the Radix primitive. |