Source: https://www.radix-ui.com/primitives/docs/components/tabs

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Components

Tabs

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

AccountPassword

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

Name

Username

Save changes

index.jsxindex.jsxstyles.cssstyles.css

CSS

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<br><br>Prop description | boolean | false | | defaultValue<br><br>Prop description | string | No default value | | value<br><br>Prop description | string | No default value | | onValueChange<br><br>Prop description | function<br><br>See full type | No default value | | orientation<br><br>Prop description | enum<br><br>See full type | "horizontal" | | dir<br><br>Prop description | enum<br><br>See full type | No default value | | activationMode<br><br>Prop description | enum<br><br>See full type | "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<br><br>Prop description | boolean | false | | loop<br><br>Prop description | boolean | true |

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

Trigger

The button that activates its associated content.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | value*<br><br>Prop description | string | No default value | | disabled<br><br>Prop description | 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<br><br>Prop description | boolean | false | | value*<br><br>Prop description | string | No default value | | forceMount<br><br>Prop description | 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.