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 * as React from "react";
import { Tabs } from "radix-ui";
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 { Tabs } from "radix-ui";

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 { Tabs } from "radix-ui";

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.

PreviousSwitch

NextToast

Edit this page on GitHub.

Overview

Guides

Components

Utilities