Toggle Group
A group of toggle buttons for selecting one or more options from a set.
toggle-group-demo.app
Installation
terminal.sh
npx y2kui@latest add toggle-groupUsage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
/* Single selection */
<ToggleGroup type="single" defaultValue="a">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>
/* Multiple selection */
<ToggleGroup type="multiple" defaultValue={["a", "c"]}>
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | Allow single or multiple selection. |
value | string | string[] | — | Controlled value. |
defaultValue | string | string[] | — | Default value. |
onValueChange | (value: string) => void | — | Callback when value changes. |