Toggle Group
A set of two-state buttons that can be toggled on or off individually or exclusively.
Installation
pnpm dlx stera-ui add toggle-groupUsage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"<ToggleGroup multiple>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<SiTextBold />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<SiTextItalic />
</ToggleGroupItem>
</ToggleGroup>Outline Variant
Sizes
Vertical
Disabled
Custom
API Reference
ToggleGroup
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "default" |
size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon" |
multiple | boolean | false |
orientation | "horizontal" | "vertical" | "horizontal" |
spacing | number | 0 |
disabled | boolean | false |
ToggleGroupItem
| Prop | Type | Default |
|---|---|---|
value | string | — |
disabled | boolean | false |