Tabs

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

Copy Page as Markdown

Renders elementIntermediateJan 14, 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.

Anatomy

<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

TabsActivation

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>

Profile

Password

Billing