Tabs

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

Copy Markdown

Renders elementIntermediate100% coverageJan 27, 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

Content for the profile tab.

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

  const selected = ref('profile')

  const tabs = [
    { value: 'profile', label: 'Profile' },
    { value: 'password', label: 'Password' },
    { value: 'billing', label: 'Billing' },
  ]
</script>

<template>
  <div class="w-full">
    <Tabs.Root v-model="selected">
      <Tabs.List
        class="flex gap-1 border-b border-divider"
        label="Account settings"
      >
        <Tabs.Item
          v-for="tab in tabs"
          :key="tab.value"
          class="px-4 py-2 text-sm font-medium transition-colors -mb-px border-b-2 border-transparent text-on-surface-variant hover:text-on-surface hover:border-divider data-[selected]:border-primary data-[selected]:text-primary data-[selected]:hover:text-primary data-[selected]:hover:border-primary"
          :value="tab.value"
        >
          {{ tab.label }}
        </Tabs.Item>
      </Tabs.List>

      <Tabs.Panel
        v-for="tab in tabs"
        :key="tab.value"
        class="p-4"
        :value="tab.value"
      >
        <h3 class="text-lg font-medium mb-2">{{ tab.label }}</h3>
        <p class="text-on-surface-variant">
          Content for the {{ tab.label.toLowerCase() }} tab.
        </p>
      </Tabs.Panel>
    </Tabs.Root>
  </div>
</template>

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>

API Reference

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

Tabs.Root

Props

namespace

string

Namespace for dependency injection (must match child namespace)

Default: "v0:tabs"

disabled

boolean

Disables the entire tabs instance

Default: false

enroll

boolean

Auto-select non-disabled items on registration

Default: false

mandatory

boolean | "force"

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"

circular

boolean

Whether arrow key navigation wraps around

Default: true

orientation

TabsOrientation

Tab orientation for keyboard navigation

Default: "horizontal"

activation

Activation

Activation mode: - `automatic`: Tab activates on focus (arrow keys) - `manual`: Tab activates on Enter/Space only

Default: "automatic"

Default: "v0:tabs"

Arrow Left/Right (horizontal) or Arrow Up/Down (vertical): Navigate between tabs
Home: Jump to first tab
End: Jump to last tab
Enter/Space: Activate tab (in manual mode)

Activation Modes

Control when tabs activate with the activation prop:

automatic (default): Tab activates when focused via arrow keys
manual: Tab only activates on Enter/Space key press

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>