Navigation
Tabs
Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.
State × Size — 15 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.4.0-beta
Known open questions
- Vertical Tabs orientation is documented in APG but not confirmed as a Figma variant — horizontal default only.
Live preview
Keyboard-operable related views within the same context.
Overview panel for preview-only content.
Manual activation
Manual activation waits for Enter/Space or click.
Purpose
Switching between related views of content within the same context, without a full page navigation.
Anatomy
Tabs = tablist + tab triggers + tabpanels with aria-controls/aria-labelledby.
Variants and states
automatic · manual
When to use
2-6 closely related content views the user might flip between repeatedly.
When not to use
Unrelated destinations — use Top Navigation or Sidebar instead.
Accessibility
Renders as role="tablist"/role="tab"/role="tabpanel" with arrow-key navigation, not just Tab-key focus.
Keyboard behavior
Arrow keys move focus between tabs. Home/End jump to first/last tab. Automatic activation on focus by default.
Common mistakes
Using Tabs for what's actually independent navigation between unrelated sections.
Properties
State × Size as variants. Label (text). Underline indicator visibility verified per-variant.
Should Tabs activate automatically or manually?
Automatic activation suits immediate lightweight panels. Manual activation suits expensive panel loads.
What is the difference between Tabs and navigation links?
Tabs switch related content in the same context. Links navigate to distinct URLs or destinations.
Tokens used
semantic/text/secondarysemantic/action/primarysemantic/focus-ring
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled active tab value. |
| defaultValue | string | — | Initial tab value. |
| activationMode | "automatic" | "manual" | "automatic" | Focus activation behavior. |
React example
Copy React example
"use client";
import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/components/ui/Tabs";
export function Example() {
return (
<Tabs defaultValue="overview">
<TabsList aria-label="Example tabs">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="details">Details</TabsTrigger>
</TabsList>
<TabsPanel value="overview">Overview content</TabsPanel>
<TabsPanel value="details">Details content</TabsPanel>
</Tabs>
);
}