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).

With icons

Drop an Icon inside each trigger alongside the label.

Overview panel.

Disabled trigger

Add disabled to a TabsTrigger to block it.

Account panel.

Overflow scroll

When triggers exceed the width, the list scrolls horizontally instead of wrapping.

January panel. Too many tabs scroll horizontally.

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.

Swipeable carousel

swipeable turns the panels into a horizontal scroll-snap carousel built with TabsCarousel and TabsCarouselPanel. The active tab follows the scroll position and a scroll-driven TabsSelectionIndicator tracks your finger where supported (Chrome 125+), falling back to the sliding TabsIndicator elsewhere. This is separate from the swipe gesture prop.

home

Swipe or scroll horizontally to move between panels. The indicator follows the scroll position where supported.

files

Swipe or scroll horizontally to move between panels. The indicator follows the scroll position where supported.

settings

Swipe or scroll horizontally to move between panels. The indicator follows the scroll position where supported.

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.
swipeable	boolean	false	Enable the scroll-snap carousel mode. Use with TabsCarousel + TabsCarouselPanel and optionally TabsSelectionIndicator. Distinct from swipe.
swipeExclude	string[]	["[aria-roledescription=carousel]", ".pswp", ...]	CSS selectors excluded from the swipe gesture.

Events

Event	Description
update:modelValue	Fires when the active tab changes. Enables v-model.

TabsList

Props

Prop	Type	Default	Description
class	string	—	Row of triggers. Must contain a TabsIndicator for the sliding marker.

TabsTrigger

Props

Prop	Type	Default	Description
value	string	—	Identifier matched against the active tab value.
disabled	boolean	false	Disable this trigger.

TabsContent / TabsIndicator

Props

Prop	Type	Default	Description
value	string	—	(TabsContent) Panel shown for the matching trigger. TabsIndicator renders the sliding marker.

TabsCarousel

Props

Prop	Type	Default	Description
class	string	—	Horizontal scroll-snap container. Wraps TabsCarouselPanel children and syncs the active tab with the scroll position. Requires swipeable on Tabs.

TabsCarouselPanel

Props

Prop	Type	Default	Description
value	string	—	Carousel panel matched against the active tab value. Always mounted and laid out side by side.

TabsSelectionIndicator

Props

Prop	Type	Default	Description
class	string	—	Scroll-driven marker that tracks the carousel position. Place inside TabsList; it measures the triggers automatically. Only visible where scroll-driven animations are supported (Chrome 125+).

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`←`	Moves to the previous tab (horizontal orientation).
`→`	Moves to the next tab (horizontal orientation).
`↑`	Moves to the previous tab (vertical orientation).
`↓`	Moves to the next tab (vertical orientation).
`Home`	Moves to the first tab.
`End`	Moves to the last tab.
`Enter`	Activates the focused tab (manual activation).
`Space`	Activates the focused tab (manual activation).

Uses a roving tabindex; only the active tab is in the tab sequence.
Applies tablist, tab, and tabpanel roles with aria-selected and aria-controls.
Tabs activate automatically on focus by default.

Table Switch Tags Input