Tabs
Tabbed navigation with line and pill variants for organizing content.
Usage
Pill Variant
Vertical & Disabled
Use orientation="vertical" for vertical layout. Individual triggers can be disabled.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'line' | 'pill' | 'line' | The visual style of the tabs. |
defaultValue | string | - | The default active tab value. |
modelValue | string | - | The controlled active tab. Use with v-model. |
Sub-components
TabsList
Container for tab trigger buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
loop | boolean | - | Keyboard navigation loops from last to first tab. |
TabsTrigger
Button that activates a tab panel.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | - | Unique value associating this trigger with its content panel. |
disabled | boolean | - | Prevents activation of this tab. |
TabsContent
Panel content shown when the associated trigger is active.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | - | Unique value associating this panel with its trigger. |
forceMount | boolean | - | Force mount content for CSS animations. |