Tabs
View switcher with three visual variants (pill, segmented, underline) and three sizes. Optional swipe gesture on mobile and automatic horizontal overflow scroll.
Variants
Pill for compact pickers in a toolbar, segmented for equivalent groupings, underline for longer section navigation.
Pill variant.
Segmented variant.
Underline variant.
Sizes
sm (h-7), md (h-8, default), lg (h-10).
Size sm (h-7).
Size md (h-8), the default.
Size lg (h-10).
Controlled
Drive the active tab from outside with v-model.
Active: account
Account panel.
Swipe (mobile)
swipe enables left/right gestures to change tabs. Carousels, tables, and nested tablists are excluded automatically.
On mobile, swipe left or right in this area to change tabs.
API Reference
Props, events, and slots for each sub-component.
Tabs
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | — | Active tab value. Supports v-model. |
| defaultValue | string | — | Starting active tab when v-model is not used. |
| variant | "pill" | "segmented" | "underline" | "pill" | Visual style of the tab list and triggers. |
| size | "sm" | "md" | "lg" | "md" | Trigger height. |
| swipe | boolean | false | Enable left/right swipe to change tabs on mobile. |
| swipeExclude | string[] | ["[aria-roledescription=carousel]", ".pswp", ...] | CSS selectors excluded from the swipe gesture. |