Fabricator UI
Search documentation
Search pages, components, blocks, styles and colours.
A set of two-state buttons that can be toggled on or off.
Installation
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"<ToggleGroup selectionMode="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Composition
Use the following composition to build a ToggleGroup:
ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItemOutline
Use variant="outline" for an outline style.
Size
Use the size prop to change the size of the toggle group.
Spacing
Use spacing to add spacing between toggle group items.
Vertical
Use orientation="vertical" for vertical toggle groups.
Disabled
Custom
A custom toggle group example.
Use font-normal to set the font weight.
API Reference
See the React Aria ToggleButtonGroup documentation.