Skip to content

ToggleGroup

Overview

A group of toggle buttons that share variant and size context.

Theme entry: ToggleGroup

Props

NameTypeRequiredDefaultDescription
themeOverrideString|Object|ArraynullA partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
classimport('vue').HTMLAttributes['class']undefinedAdditional CSS classes to apply to the root element.
variantstringundefinedVisual style variant.
sizestringundefinedSize variant.
spacingnumber0The gap spacing between items (0 = flush/no-gap).
typestringundefinedThe selection type: 'single' or 'multiple'.
modelValuestring|arrayundefinedThe controlled value.
defaultValuestring|arrayundefinedThe default value.
disabledbooleanundefinedWhether the group is disabled.
dirstringundefinedThe reading direction.
loopbooleanundefinedWhether to loop keyboard navigation.
orientationstringundefinedThe orientation.
rovingFocusbooleanundefinedWhether to allow deselection of a single value.
asstring|objectundefinedThe element or component to render as.
asChildbooleanfalseWhen true, merges props onto the child element instead of rendering a wrapper.

Slots

default

Scoped slot.

Events

NameDescription
update:modelValueEmitted when the value changes.

Full event reference

Source

client/lib/controls/toggle-group/ToggleGroup.vue

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2