Skip to content
PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

defaultValue
string | string[]

The default active value of the item(s).

Use when you do not need to control the state of the item(s).

dir
'ltr' | 'rtl'

The reading direction of the combobox when applicable.
If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.

disabled
boolean

When true, prevents the user from interacting with the toggle group and all its items.

loop
boolean

When loop and rovingFocus is true, keyboard navigation will loop from last item to first, and vice versa.

modelValue
string | string[]

The controlled value of the active item(s).

Use this when you need to control the state of the items. Can be binded with v-model

orientation
'vertical' | 'horizontal'

The orientation of the component, which determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.

rovingFocus
boolean

When false, navigating through the items using arrow keys will be disabled.

type
'single' | 'multiple'

Determines whether a "single" or "multiple" items can be pressed at a time.

This prop will be ignored if any of v-model or defaultValue is defined, as the type will be inferred from the value.

EmitPayload
update:modelValue
[payload: string | string[]]

Event handler called when the value changes.