Skip to main content

​
Overview

Tabs organize content into multiple sections and allow users to navigate between them. Only one section is visible at a time.

​
Features

  • Full keyboard navigation
  • Supports horizontal/vertical orientation
  • Supports automatic/manual activation
  • Can be controlled or uncontrolled
  • Focus automatically managed
  • Accessible by default with proper ARIA attributes

​
Installation

npm install @radix-ui/react-tabs

​
Anatomy

import * as Tabs from '@radix-ui/react-tabs';

export default () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger />
    </Tabs.List>
    <Tabs.Content />
  </Tabs.Root>
);

​
API Reference

​
Root

Contains all the tabs component parts.
​
value
string
The controlled value of the tab to activate.
​
defaultValue
string
The value of the tab that should be active when initially rendered (uncontrolled).
​
onValueChange
(value: string) => void
Event handler called when the value changes.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the tabs. Mainly affects keyboard navigation (left/right vs. up/down).
​
dir
'ltr' | 'rtl'
The reading direction of the tabs. If omitted, inherits from the parent.
​
activationMode
'automatic' | 'manual'
default:"'automatic'"
Whether a tab is activated automatically or manually.
  • automatic: Tabs are activated when receiving focus
  • manual: Tabs are activated when clicked or Space/Enter is pressed

​
List

Contains the triggers that are aligned along the edge of the active content.
​
loop
boolean
default:"true"
When true, keyboard navigation will loop from last tab to first, and vice versa.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Trigger

The button that activates its associated content.
​
value
string
required
A unique value that associates the trigger with content.
​
disabled
boolean
When true, prevents the user from interacting with the tab.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Content

Contains the content associated with a trigger.
​
value
string
required
A unique value that associates the content with a trigger.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Tabs from '@radix-ui/react-tabs';
import './styles.css';

export default () => (
  <Tabs.Root className="TabsRoot" defaultValue="tab1">
    <Tabs.List className="TabsList" aria-label="Manage your account">
      <Tabs.Trigger className="TabsTrigger" value="tab1">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className="TabsTrigger" value="tab2">
        Password
      </Tabs.Trigger>
      <Tabs.Trigger className="TabsTrigger" value="tab3">
        Settings
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className="TabsContent" value="tab1">
      <p>Make changes to your account here.</p>
    </Tabs.Content>
    <Tabs.Content className="TabsContent" value="tab2">
      <p>Change your password here.</p>
    </Tabs.Content>
    <Tabs.Content className="TabsContent" value="tab3">
      <p>Edit your settings here.</p>
    </Tabs.Content>
  </Tabs.Root>
);

​
Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

​
Keyboard Interactions

  • Tab - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
  • ArrowDown - Moves focus to the next trigger (in vertical orientation) and activates its content.
  • ArrowRight - Moves focus to the next trigger (in horizontal orientation) and activates its content.
  • ArrowUp - Moves focus to the previous trigger (in vertical orientation) and activates its content.
  • ArrowLeft - Moves focus to the previous trigger (in horizontal orientation) and activates its content.
  • Home - Moves focus to the first trigger and activates its content.
  • End - Moves focus to the last trigger and activates its content.

Build docs developers (and LLMs) love

Get started for freeTalk to us