Toggle Group
A set of two-state buttons that can be toggled on or off, supporting single or multiple selection.
Usage
Props
| Prop | Type | Default | Description |
|---|
modelValue | AcceptableValue | AcceptableValue[] | - | The controlled value. Use with v-model. |
multiple | boolean | - | Whether multiple items can be selected at once. |
variant | 'default' | 'outline' | 'default' | The visual style variant for all items. |
size | 'default' | 'sm' | 'lg' | 'default' | The size of all items. |
disabled | boolean | false | Whether the entire group is disabled. |
orientation | 'horizontal' | 'vertical' | - | The layout direction. |
Events
| Event | Payload | Description |
|---|
update:modelValue | AcceptableValue | AcceptableValue[] | Emitted when the value changes. |
ToggleGroupItem
Individual toggle item
| Prop | Type | Default | Description |
|---|
value* | AcceptableValue | - | Item value |
disabled | boolean | - | Disable this item |
variant | 'default' | 'outline' | - | Visual style variant |
size | 'default' | 'sm' | 'lg' | - | Item size |