Tabs

A component for creating accessible tabbed interfaces with proper ARIA support and keyboard navigation.

Copy Markdown

Renders elementIntermediateApr 5, 2026

Usage

The Tabs component provides a compound pattern for building accessible tab interfaces. It uses the createStep composable internally for navigation and provides full v-model support with automatic state synchronization.

Profile, password, and billing tabs with content switching via v-model binding.

Profile

Content for the profile tab.

Anatomy

vue

<script setup lang="ts">
  import { Tabs } from '@vuetify/v0'
</script>

<template>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Item>Tab</Tabs.Item>
    </Tabs.List>

    <Tabs.Panel>Content</Tabs.Panel>
  </Tabs.Root>
</template>

Features

The component implements full WAI-ARIA keyboard support. Keyboard behavior depends on the activation mode:

Key	Automatic	Manual
Arrow Left/Right (horizontal)	Moves focus and activates tab	Moves focus only
Arrow Up/Down (vertical)	Moves focus and activates tab	Moves focus only
Home	Focuses and activates first tab	Focuses first tab only
End	Focuses and activates last tab	Focuses last tab only
Enter/Space	—	Activates the focused tab

Activation Modes

Control when tabs activate with the activation prop:

automatic (default): Arrow keys move focus and activate the tab simultaneously
manual: Arrow keys move focus without activating — the user must press Enter or Space to confirm their selection

vue

<template>
  <Tabs.Root activation="manual">
    <!-- Tabs only activate on Enter/Space -->
  </Tabs.Root>
</template>

Orientation

Support for both horizontal and vertical tab layouts:

vue

<template>
  <Tabs.Root orientation="vertical">
    <!-- Arrow Up/Down for navigation instead of Left/Right -->
  </Tabs.Root>
</template>

Control whether navigation wraps around at boundaries:

vue

<template>
  <Tabs.Root :circular="false">
    <!-- Navigation stops at first/last tab -->
  </Tabs.Root>
</template>

Auto-Enrollment

Set enroll to auto-select the first registered tab. Useful when tabs are rendered dynamically and the initial selection should track whichever tab mounts first:

vue

<template>
  <Tabs.Root enroll>
    <!-- First tab to register is automatically selected -->
    <Tabs.Tab v-for="tab in dynamicTabs" :key="tab.id" :value="tab.id">
      {{ tab.label }}
    </Tabs.Tab>
  </Tabs.Root>
</template>

API Reference

The following API details are for all variations of the Tabs component.

Tabs.Root

Props

namespace

string | undefined

Namespace for dependency injection (must match child namespace)

Default: "v0:tabs"

disabled

boolean | undefined

Disables the entire tabs instance

Default: false

enroll

boolean | undefined

Auto-select non-disabled items on registration

Default: false

mandatory

boolean | "force" | undefined

Controls mandatory tab behavior: - false: No mandatory tab enforcement - true: Prevents deselecting the last selected item - `force` (default): Automatically selects the first non-disabled tab

Default: "force"