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;
Can be controlled or uncontrolled.
Supports horizontal/vertical orientation.
Supports automatic/manual activation.
Full keyboard navigation.
Install the component from your command line.
Import all parts and piece them together.
Contains all the tabs component parts.
Contains the triggers that are aligned along the edge of the active content.
The button that activates its associated content.
Contains the content associated with each trigger.
You can create vertical tabs by using the orientation
prop.
Adheres to the Tabs WAI-ARIA design pattern.