Toggle Group
Group of Toggles where at most one (single) or many (multiple) can be pressed at a time. Often used as a visual filter or text-alignment picker.
Default
Single-select toggle group.
Multiple
Allow multiple items pressed at once.
API Reference
Props, events, and slots for each sub-component.
ToggleGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Selection mode. |
| modelValue | string | string[] | — | Pressed value(s). Supports v-model. |
| variant | "default" | "outline" | "default" | Same as Toggle. |
| size | "sm" | "default" | "lg" | "default" | Same as Toggle. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the pressed value(s) change. Enables v-model. |
ToggleGroupItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique value identifying this item. |
| disabled | boolean | false | Disable this item. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Tab | Moves focus into the group. |
| ← | Moves to the previous item. |
| → | Moves to the next item. |
| ↑ | Moves to the previous item. |
| ↓ | Moves to the next item. |
| Space | Toggles the focused item. |
| Enter | Toggles the focused item. |
- Uses a roving tabindex; only one item is in the tab sequence at a time.
- Single or multiple selection is conveyed via aria-pressed or aria-checked.