Tabs vertical example
Example of creating vertical tabs:
```jsx
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>
);
```
This example shows using the orientation prop set to "vertical" to create vertically oriented tabs.
Tabs.Root props
Tabs.Root accepts the following props: asChild (boolean, default false) to change the rendered element; defaultValue (string) for uncontrolled state; value (string) for controlled state used with onValueChange; onValueChange (function) event handler called when value changes; orientation ("horizontal" | "vertical" | undefined, default "horizontal"); dir ("ltr" | "rtl" to set reading direction, inherits from DirectionProvider or assumes LTR); activationMode ("automatic" | "manual", default "automatic") where automatic activates tabs on focus and manual activates on click. Tabs.Root also sets [data-orientation] attribute with values "vertical" or "horizontal".
Tabs.List props
Tabs.List accepts the following props: asChild (boolean, default false) to change the rendered element; loop (boolean, default true) for keyboard navigation looping from last tab to first and vice versa. Tabs.List also sets [data-orientation] attribute with values "vertical" or "horizontal".
Tabs.Trigger props
Tabs.Trigger accepts the following props: asChild (boolean, default false) to change the rendered element; value (string, required) a unique value that associates the trigger with content; disabled (boolean, default false) to prevent user interaction. Tabs.Trigger sets [data-state] attribute with values "active" or "inactive", [data-disabled] attribute present when disabled, and [data-orientation] attribute with values "vertical" or "horizontal".
Tabs.Content props
Tabs.Content accepts the following props: asChild (boolean, default false) to change the rendered element; value (string, required) a unique value that associates the content with a trigger; forceMount (boolean) to force mounting when more control is needed, useful for controlling animation with React animation libraries. Tabs.Content sets [data-state] attribute with values "active" or "inactive" and [data-orientation] attribute with values "vertical" or "horizontal".
Tabs controlled and uncontrolled APIs
Tabs can be used as uncontrolled by providing a defaultValue prop to Tabs.Root, which sets the initially active tab. Tabs can be controlled by providing both value and onValueChange props to Tabs.Root, where value is the controlled active tab and onValueChange is called when the user changes the active tab.
Tabs orientation support
Tabs supports both horizontal and vertical orientation via the orientation prop on Tabs.Root. Horizontal is the default. When vertical is set, keyboard navigation behavior adapts accordingly.
Tabs activation modes
Tabs supports two activation modes via the activationMode prop on Tabs.Root: automatic (default) activates tabs when they receive focus, and manual activates tabs only when clicked.
Tabs keyboard navigation with Tab key
The Tab key moves focus to the active trigger when focus first moves onto the tabs. When a trigger is already focused, Tab moves focus to the active content.
Tabs keyboard navigation with arrow keys
ArrowDown and ArrowRight move focus to the next trigger and activate its associated content. ArrowUp and ArrowLeft move focus to the previous trigger and activate its associated content. The behavior adapts based on the orientation prop.
Tabs keyboard navigation with Home and End keys
Home key moves focus to the first trigger and activates its associated content. End key moves focus to the last trigger and activates its associated content.
Tabs keyboard navigation looping
When the loop prop on Tabs.List is true (default), keyboard navigation will wrap around from the last tab to the first and from the first tab to the last.
Tabs asChild composition
All Tabs parts (Root, List, Trigger, Content) support the asChild prop which changes the default rendered element to the one passed as a child, merging their props and behavior.
Tabs.Trigger changed to button element
Tabs.Trigger was changed to render as a button element instead of a div.
Tabs.Content supports lifecycle animation
Tabs.Content now supports lifecycle animation using forceMount.
Tabs unmounts content when inactive
Tabs.Content is now unmounted when the tab is inactive.
Tabs renamed from Tab to Trigger and Panel to Content
Tabs.Tab was renamed to Tabs.Trigger and Tabs.Panel was renamed to Tabs.Content.
Basic Tabs example
Example showing a basic Tabs component with three tabs. One active tab displays its content while others are hidden.
```jsx
<Tabs.Root defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Box pt="3">
<Tabs.Content value="account">
<Text size="2">Make changes to your account.</Text>
</Tabs.Content>
<Tabs.Content value="documents">
<Text size="2">Access and update your documents.</Text>
</Tabs.Content>
<Tabs.Content value="settings">
<Text size="2">Edit your profile or update contact information.</Text>
</Tabs.Content>
</Box>
</Tabs.Root>
```
Tabs component structure and parts
The Tabs component consists of four parts: Tabs.Root which contains all component parts, Tabs.List which contains the triggers that sit alongside the active content, Tabs.Trigger which is the button that activates its associated content, and Tabs.Content which contains the content associated with each trigger.
Tabs.Root defaultValue prop
Tabs.Root accepts a defaultValue prop to set the initially active tab. The value should match the value prop of one of the Tabs.Trigger components.
Tabs.List size prop
Tabs.List supports a size prop to control the size of the tab list. Available size values include 1 and 2.
Tabs.List color prop
Tabs.List supports a color prop to assign a specific color to the tab list. Examples of supported colors include indigo, cyan, orange, crimson, and gray.
Tabs.List highContrast prop
Tabs.List supports a highContrast prop to increase color contrast with the background.
Tabs.Content value prop
Tabs.Content requires a value prop that associates the content with its corresponding Tabs.Trigger. The content is displayed when its trigger is active.
Tabs should not be used for page navigation
Tabs should not be used for page navigation. Tab Nav should be used instead for page navigation purposes, as it is designed for this purpose and has equivalent styles.
Tabs inherits common props
Tabs.Root inherits props from the Tabs primitive and supports common margin props.