Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here. Click save when you're done.

Name

Username

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

const TabsDemo = () => (
  <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.List>
    <Tabs.Content className="TabsContent" value="tab1">
      <p className="Text">Make changes to your account here. Click save when you're done.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="name">
          Name
        </label>
        <input className="Input" id="name" defaultValue="Pedro Duarte" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="username">
          Username
        </label>
        <input className="Input" id="username" defaultValue="@peduarte" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Save changes</button>
      </div>
    </Tabs.Content>
    <Tabs.Content className="TabsContent" value="tab2">
      <p className="Text">Change your password here. After saving, you'll be logged out.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="currentPassword">
          Current password
        </label>
        <input className="Input" id="currentPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="newPassword">
          New password
        </label>
        <input className="Input" id="newPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="confirmPassword">
          Confirm password
        </label>
        <input className="Input" id="confirmPassword" type="password" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Change password</button>
      </div>
    </Tabs.Content>
  </Tabs.Root>
);

export default TabsDemo;

Features

Can be controlled or uncontrolled.
Supports horizontal/vertical orientation.
Supports automatic/manual activation.
Full keyboard navigation.

Installation

Install the component from your command line.

npm install @radix-ui/react-tabs

Anatomy

Import all parts and piece them together.

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.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultValue`	`string`	No default value
`value`	`string`	No default value
`onValueChange`	`function`	No default value
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	No default value
`activationMode`	`enum`	`"automatic"`

Data Attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

List

Contains the triggers that are aligned along the edge of the active content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`true`

Data Attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

The button that activates its associated content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	`false`

Data Attribute	Values
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Content

Contains the content associated with each trigger.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`forceMount`	`boolean`	No default value

Data Attribute	Values
`[data-state]`	`"active" \| "inactive"`
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

Vertical

You can create vertical tabs by using the orientation prop.

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

export default () => (
  <Tabs.Root defaultValue="tab1" orientation="vertical">
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Tab one content</Tabs.Content>
    <Tabs.Content value="tab2">Tab two content</Tabs.Content>
    <Tabs.Content value="tab3">Tab three content</Tabs.Content>
  </Tabs.Root>
);

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`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 depending on `orientation` and activates its associated content.
`ArrowRight`	Moves focus to the next trigger depending on `orientation` and activates its associated content.
`ArrowUp`	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
`ArrowLeft`	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
`Home`	Moves focus to the first trigger and activates its associated content.
`End`	Moves focus to the last trigger and activates its associated content.

Switch

Toast

Edit this page on GitHub.

Overview

Components

Utilities

Resources

Stitches

Colors

Icons