Tabs

Switch between peer panels while coordinating focus and activation.

Usage

Manual

Move focus between tabs without activating a panel until selection is confirmed.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

<!-- Tabs / Manual -->
<script setup lang="ts">
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from '@sectile/vue/tabs'
const tabs = ['overview', 'activity', 'settings']
</script>
<template><TabsRoot :items="tabs" default-value="overview"><TabsList><TabsTrigger v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsTrigger><TabsIndicator /></TabsList><TabsContent v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsContent></TabsRoot></template>

Automatic

Advance automatically while still exposing pause and direct navigation controls.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

<!-- Tabs / Automatic -->
<script setup lang="ts">
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from '@sectile/vue/tabs'
const tabs = ['overview', 'activity', 'settings']
</script>
<template><TabsRoot :items="tabs" default-value="overview"><TabsList><TabsTrigger v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsTrigger><TabsIndicator /></TabsList><TabsContent v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsContent></TabsRoot></template>

Vertical disabled

Move vertically through actions while skipping an unavailable item.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

<!-- Tabs / Vertical Disabled -->
<script setup lang="ts">
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from '@sectile/vue/tabs'
const tabs = ['overview', 'activity', 'settings']
</script>
<template><TabsRoot :items="tabs" default-value="overview"><TabsList><TabsTrigger v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsTrigger><TabsIndicator /></TabsList><TabsContent v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</TabsContent></TabsRoot></template>

API

Vue package: @sectile/vue/tabs

Components

TabsRoot
TabsList
TabsTrigger
TabsContent
TabsIndicator

Props

`TabsRootProps`

activationMode: TypeTabsActivationModeDefault'automatic'
Whether focus activates a tab automatically or waits for explicit confirmation.
as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: TypestringDefault''
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
disabledItems: Typereadonly string[]Default[]
Item values excluded from focus and selection.
items: Typereadonly string[]DefaultRequired
Ordered item values managed by the component.
modelValue: TypestringDefaultundefined
Current value when state is controlled by the parent.
orientation: Type'horizontal' | 'vertical'Default'horizontal'
Axis used for layout and keyboard movement.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.

`TabsListProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
label: TypestringDefaultundefined
Accessible name announced for the control.

`TabsTriggerProps`

as: TypePrimitiveAsDefault'button'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
value: TypestringDefaultRequired
Current value exposed by this contract.

`TabsContentProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
value: TypestringDefaultRequired
Current value exposed by this contract.

`TabsIndicatorProps`

as: TypePrimitiveAsDefault'span'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`TabsRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring
Current value exposed by this contract.

`TabsTriggerSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
selected: Typeboolean
Whether this item is selected.
value: Typestring
Current value exposed by this contract.

`TabsContentSlotProps`

selected: Typeboolean
Whether this item is selected.
value: Typestring
Current value exposed by this contract.

Events

`TabsRoot`

activate: Payloadstring
Emitted when an item becomes active.
highlight: Payloadstring | null
Emitted when the highlighted item changes.
update:modelValue: Payloadstring
Emitted when the component requests a new controlled value.

Other types

`TabsActivationMode`

type TabsActivationMode = 'automatic' | 'manual'

`TabsValueChangeHandler`

type TabsValueChangeHandler = (value: string) => void

`TabsHighlightHandler`

type TabsHighlightHandler = (value: string | null) => void

`TabsActivateHandler`

type TabsActivateHandler = (value: string) => void

Parts

Shared scope: [data-scope="tabs"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`list`	`[data-part="list"]`	Groups the component items in navigation order.	—
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`indicator`	`[data-part="indicator"]`	Shows state or position without replacing the primary content.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—

Keyboard interaction

Key	Behavior
`Arrow Left` / `Arrow Right`	Move between tabs in a horizontal list.
`Arrow Up` / `Arrow Down`	Move between tabs in a vertical list.
`Home` / `End`	Move to the first or last tab.
`Enter` / `Space`	Activate the focused tab in manual activation mode.

Accessibility

The tab list connects every tab to one tab panel and preserves selected, disabled, and orientation state.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Tabs ​

Usage ​

Manual ​

Automatic ​

Vertical disabled ​

API ​

Props ​

TabsRootProps ​

TabsListProps ​

TabsTriggerProps ​

TabsContentProps ​

TabsIndicatorProps ​

Slots ​

TabsRootSlotProps ​

TabsTriggerSlotProps ​

TabsContentSlotProps ​

Events ​

TabsRoot ​

Other types ​

TabsActivationMode ​

TabsValueChangeHandler ​

TabsHighlightHandler ​

TabsActivateHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​

Tabs

Usage

Manual

Automatic

Vertical disabled

API

Props

`TabsRootProps`

`TabsListProps`

`TabsTriggerProps`

`TabsContentProps`

`TabsIndicatorProps`

Slots

`TabsRootSlotProps`

`TabsTriggerSlotProps`

`TabsContentSlotProps`

Events

`TabsRoot`

Other types

`TabsActivationMode`

`TabsValueChangeHandler`

`TabsHighlightHandler`

`TabsActivateHandler`

Parts

Keyboard interaction

Accessibility