tabs

Accessible tabbed panel layout with automatic activation.

A headless tabs implementation following the WAI-ARIA tabs pattern with automatic activation, roving tabindex and full aria wiring.

import { Tabs, TabsList, Tab, TabPanel } from '@fluixi/tabs';

<Tabs defaultValue="overview" onChange={(v) => ...}>
  <TabsList>
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
  </TabsList>
  <TabPanel value="overview">…</TabPanel>
  <TabPanel value="activity">…</TabPanel>
</Tabs>

Controlled (value) or uncontrolled (defaultValue) with onChange.
orientation sets the arrow-key axis; arrow keys move focus and activate.
Tabs and panels are linked via id/aria-controls/aria-labelledby; inactive panels are hidden. Tabs expose aria-selected and data-state.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

tabs