Tabs

Overview

Tabs organize content into multiple panels, each associated with a tab trigger in a tab list. Only one panel is visible at a time. Users switch between panels by clicking or using keyboard navigation on the tab triggers.

Manage your account settings, profile information, and preferences.

Usage

  <Tabs defaultValue="account">
    <Tabs.List>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="password">Password</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="account">Make changes to your account here.</Tabs.Content>
    <Tabs.Content value="password">Change your password here.</Tabs.Content>
  </Tabs>


export function Example() {
  return (
    <Tabs defaultValue="account">
      <Tabs.List>
        <Tabs.Trigger value="account">Account</Tabs.Trigger>
        <Tabs.Trigger value="password">Password</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="account">Account settings</Tabs.Content>
      <Tabs.Content value="password">Password settings</Tabs.Content>
    </Tabs>
  );
}

Orientation

Vertical

<Tabs defaultValue="general" orientation="vertical">
  <Tabs.List>
    <Tabs.Trigger value="general">General</Tabs.Trigger>
    <Tabs.Trigger value="security">Security</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="general">General settings</Tabs.Content>
  <Tabs.Content value="security">Security settings</Tabs.Content>
</Tabs>

States

Disabled Tab

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
    <Tabs.Trigger value="tab2" isDisabled>Disabled</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content</Tabs.Content>
</Tabs>

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus to the active tab trigger, then to the panel
`Arrow Right` (horizontal)	Moves focus to next trigger, activates if automatic
`Arrow Left` (horizontal)	Moves focus to previous trigger
`Home`	Moves focus to first trigger
`End`	Moves focus to last trigger
`Enter / Space`	Activates focused trigger

ARIA

Tablist: role="tablist", aria-orientation
Trigger: role="tab", aria-selected, aria-controls
Content: role="tabpanel", aria-labelledby

API Reference

Tabs (Root)

Prop	Type	Default	Description
`value`	`string`	—	Controlled active tab
`defaultValue`	`string`	—	Default active tab
`onValueChange`	`(value: string) => void`	—	Change handler
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Tab list direction
`activationMode`	`'automatic' \| 'manual'`	`'automatic'`	Activation behavior

Tabs.Trigger

Prop	Type	Default	Description
`value`	`string`	—	Tab value this trigger activates
`isDisabled`	`boolean`	`false`	Disables this tab

Accordion — Multiple sections expandable simultaneously
Navigation — When "tabs" represent separate pages

On this page