ToggleGroup
Overview
A group of toggle buttons that share variant and size context.
Theme entry: ToggleGroup
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| themeOverride | String|Object|Array | null | A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object. | |
| class | import('vue').HTMLAttributes['class'] | undefined | Additional CSS classes to apply to the root element. | |
| variant | string | undefined | Visual style variant. | |
| size | string | undefined | Size variant. | |
| spacing | number | 0 | The gap spacing between items (0 = flush/no-gap). | |
| type | string | undefined | The selection type: 'single' or 'multiple'. | |
| modelValue | string|array | undefined | The controlled value. | |
| defaultValue | string|array | undefined | The default value. | |
| disabled | boolean | undefined | Whether the group is disabled. | |
| dir | string | undefined | The reading direction. | |
| loop | boolean | undefined | Whether to loop keyboard navigation. | |
| orientation | string | undefined | The orientation. | |
| rovingFocus | boolean | undefined | Whether to allow deselection of a single value. | |
| as | string|object | undefined | The element or component to render as. | |
| asChild | boolean | false | When true, merges props onto the child element instead of rendering a wrapper. |
Slots
default
Scoped slot.
Events
| Name | Description |
|---|---|
update:modelValue | Emitted when the value changes. |
Source
client/lib/controls/toggle-group/ToggleGroup.vue