Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Features

Can be controlled or uncontrolled.
Supports horizontal/vertical orientation.
Supports automatic/manual activation.
Full keyboard navigation.

Install

Import

API

Root

Props	Type	Default
activationMode	`'automatic' \| 'manual'`	automatic
as	`AsTag \| Component`	div
asChild	`boolean`	false
defaultValue	`string`	undefined
dir	`Direction`	ltr
modelValue	`string`	-
orientation	`DataOrientation`	horizontal

Event	Type
update:modelValue	`[_value: string \| number]`

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

List

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
loop	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

Indicator

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

CSS Variable	Description
--destyler-tabs-indicator-size	The size of the indicator.
--destyler-tabs-indicator-position	The position of the indicator

Trigger

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false
disabled	`boolean`	false
value	`string`	on

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-state]	'active' \| 'inactive'
[data-disabled]	Present when disabled

Content

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
forceMount	`boolean`	false
value	`string`	on

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-state]	'active' \| 'inactive'