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.
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;
Install the component from your command line.
npm install @radix-ui/react-tabs
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>
);
Contains all the tabs component parts.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
defaultValue | string | |
value | string | |
onValueChange | function | |
orientation | enum | "horizontal" |
dir | enum | |
activationMode | enum | "automatic" |
Data Attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
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" |
The button that activates its associated content.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
value* | string | |
disabled | boolean | false |
Data Attribute | Values |
---|---|
[data-state] | "active" | "inactive" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Contains the content associated with each trigger.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
value* | string | |
forceMount | boolean |
Data Attribute | Values |
---|---|
[data-state] | "active" | "inactive" |
[data-orientation] | "vertical" | "horizontal" |
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>
);
Adheres to the Tabs WAI-ARIA design pattern.
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. |