Tabs
Accessible tabbed interface. Automatic or manual activation via activationMode.
Install
Import path
Examples
Line variant
An underline style for content-level navigation.
Disabled
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Icons
A set of layered sections of content—known as tab panels—that are displayed one at a time.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Vertical
Use orientation='vertical' for vertical tabs.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@codefast/ui/tabs";
<Tabs defaultValue="a">
<TabsList>
<TabsTrigger value="a">A</TabsTrigger>
</TabsList>
<TabsContent value="a">…</TabsContent>
</Tabs>
API reference
Props for each part of the component. All native element props are also forwarded.
Tabs
Root. Controls which panel is active.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | The tab selected on mount (uncontrolled). |
| value / onValueChange | string / (value: string) => void | — | Control the active tab from your own state. |
| activationMode | "automatic" | "manual" | "automatic" | Whether focusing a tab activates it, or only on click/Enter. |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "line" | "default" | Solid pill list, or an underline list. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus into the active tab, then to the panel. |
| Arrow+Left | Moves to the previous tab. |
| Arrow+Right | Moves to the next tab. |
| Home | Moves to the first tab. |
| End | Moves to the last tab. |
- Implements the WAI-ARIA Tabs pattern with roving tabindex.
- Each TabsTrigger is wired to its TabsContent via aria-controls automatically.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Keep tab labels to one or two words.
- Use tabs for peer views of the same context, not for a multi-step flow.
Don’t
- Don’t nest tabs more than one level deep.
- Don’t hide critical actions behind a non-default tab.