Tabs · Elements

Root · List · Trigger · Content · Indicator

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the tab rows.
`variant`	`String as PropType<"line" \| "card">`	`"line"`	The register: a ruled strip, or each selection lifted into a card.
`orientation`	`String as PropType<"horizontal" \| "vertical">`	`"horizontal"`	Which rail the rule rides: a strip across, or a rail down.
`activationMode`	`'manual' \| 'automatic'`	`"automatic"`	The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`composite`	`boolean`		Whether the tab is composite
`defaultValue`	`string`		The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`deselectable`	`boolean`		Whether the active tab can be deselected when clicking on it.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; trigger: (id: string) => string; content: (id: string) => string; list: string; indicator: string; }>`		The ids of the elements in the tabs. Useful for composition.
`loopFocus`	`boolean`	`true`	Whether the keyboard navigation will loop from last tab to first, and vice versa.
`modelValue`	`string`		The v-model value of the tabs
`navigate`	`(details: tabs.NavigateDetails) => void`		Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`translations`	`tabs.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states

Event	Payload
`focusChange`	`details: FocusChangeDetails`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: string`