Tabs
Tab pattern with keyboard nav, roving tabindex, and shared-value content/trigger pairing.
3.5 kBgzipped
At a glance
- Compose
Tabs,TabsList,TabsTrigger,TabsContent. Thevalueprop on each trigger pairs it with the matching content panel. - Controlled (
value+onChange) or uncontrolled (defaultValue). - Keyboard nav (WAI-ARIA tablist pattern):
- Arrow Right / Down → next tab
- Arrow Left / Up → previous tab
- Home / End → first / last
- Selection follows focus by default; pass
activation="manual"to require Enter / Space to activate.
- Tabs render in their own roving tabindex group: tabbing into the list lands on the active tab, and the active tab is the only one in the tab order.
orientation
Lays the trigger list out horizontally (default) or vertically. Affects
keyboard nav too: in vertical mode ArrowUp / ArrowDown move
between tabs, in horizontal mode it's ArrowLeft / ArrowRight
(matching the WAI-ARIA tablist convention).
Preview
Props
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
activation | enum | automatic | Whether arrow keys also activate the focused tab. - `automatic` (default) — selection follows focus, matching most UIs. - `manual` — arrow keys move focus only; the user presses Enter or Space to activate. Use when activating a tab is expensive. @defaultValue 'automatic' |
className | string | — | — |
defaultValue | string | — | Uncontrolled initial value. |
onChange | (next: string) => void | — | Fires with the new value when the active tab changes. |
orientation | enum | horizontal | Layout direction of the tablist. Drives the keyboard-nav axis. @defaultValue 'horizontal' |
testID | string | — | — |
value | string | — | Controlled active tab value. |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
testID | string | — | — |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Value linking this trigger to a `<TabsContent>`. |
className | string | — | — |
disabled | boolean | — | Disable just this trigger. |
testID | string | — | — |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Value of the trigger this panel pairs with. |
className | string | — | — |
testID | string | — | — |