> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Tabs

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

## Features

- Can be controlled or uncontrolled.

- Supports horizontal/vertical orientation.

- Supports automatic/manual activation.

- Full keyboard navigation.

## Anatomy

Import all parts and piece them together.

```jsx
import { Tabs } from "@radix-solid/primitives";

export default () => <Tabs.Root>

		<Tabs.List>

			<Tabs.Trigger value="overview">Overview</Tabs.Trigger>

		</Tabs.List>

		<Tabs.Content value="overview" />

	</Tabs.Root>;
```

## API Reference

### Root

Contains all the tabs component parts.

| Prop                                                                                                                                                                    | Type       | Default        |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean`  | `false`        |
| `defaultValue`The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.                            | `string`   | —              |
| `value`The controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.                                                                 | `string`   | —              |
| `onValueChange`Event handler called when the value changes.                                                                                                             | `function` | —              |
| `orientation`The orientation of the component.                                                                                                                          | `enum`     | `"horizontal"` |
| `dir`The reading direction of the tabs. If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode.                             | `enum`     | —              |
| `activationMode`When `automatic`, tabs are activated when receiving focus. When `manual`, tabs are activated when clicked.                                              | `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`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `loop`When `true`, keyboard navigation will loop from last tab to first, and vice versa.                                                                                | `boolean` | `true`  |

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

### Trigger

The button that activates its associated content.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `value*`A unique value that associates the trigger with a content.                                                                                                      | `string`  | —       |
| `disabled`When `true`, prevents the user from interacting with the tab.                                                                                                 | `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`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `value*`A unique value that associates the content with a trigger.                                                                                                      | `string`  | —       |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries.                            | `boolean` | —       |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"active" \| "inactive"`     |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## Examples

### Vertical

You can create vertical tabs by using the `orientation` prop.

```jsx
import { Tabs } from "@radix-solid/primitives";

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](https://www.w3.org/WAI/ARIA/apg/patterns/tabs).

### 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.                                                     |