Getting Started
Foundations
Integrations
Components
#Installation
npx @dinachi/cli@latest add toggle-group#Usage
tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"#Examples
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | When true, multiple items can be pressed simultaneously |
| value | string[] | — | Controlled array of pressed toggle values |
| defaultValue | string[] | — | Initial pressed values for uncontrolled usage |
| onValueChange | (groupValue: string[], details: object) => void | — | Callback fired when selection changes |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the toggle group |
| loopFocus | boolean | true | Whether keyboard navigation should loop from last to first and vice versa |
| disabled | boolean | false | Whether the entire toggle group is disabled |
| ToggleGroupItem.variant | 'default' | 'outline' | 'outline' | Visual style variant for each item |
| ToggleGroupItem.size | 'default' | 'sm' | 'lg' | 'sm' | Size variant for each item |