How to build an accessible Tabs in React

Implements the WAI-ARIA tabs pattern: tablist/tab/tabpanel roles with arrow-key navigation and Home/End, so the active tab and its panel are correctly associated for assistive tech

When to use a Tabs

• Switching between peer panels of related content in the same context
• Showing one section at a time when all sections are equally important

When not to use it

• Stacked sequential content the user reads top to bottom — use Accordion
• Changing a setting or view parameter — use a SegmentedControl
• Navigating between pages — use links

Keyboard interactions

Role tablist, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• Home
• End

Common mistakes

Avoid: Using Tabs to toggle a single display option (e.g. grid/list view)

Prefer: <SegmentedControl> for view/setting toggles

Tabs imply switching content panels; toggling a parameter is a control, not navigation

Example

<Tabs defaultValue="account"><TabsList><TabsTrigger value="account">Account</TabsTrigger></TabsList><TabsContent value="account">…</TabsContent></Tabs>

See the full Tabs reference →