Tabs Composition
Panels that share a place on the page. Roving focus, panel association, and the moving indicator come from Base UI; the two variants are ours.
Usage
Totals, trends, and the week at a glance.
24 hours.
<Tabs items={[ { value: 'overview', label: 'Overview', content: <Overview /> }, { value: 'activity', label: 'Activity', adornment: <Badge size="sm">12</Badge>, content: <Activity /> }, ]}/>Underline or pill
underline is for page-level sections — it reads as navigation. pill is for switching a view of
the same data, like a date range, where the choice is a filter rather than a place.
Do
Keep tab labels to one or two words; the indicator animates to their width and long labels make it lurch.
Don't
Use Tabs for a sequence with an order — that is a Steps, and tabs let a person skip step two.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | Array<{ value, label, content, adornment?, disabled? }> | — | Panels are declared with their tabs, so the two cannot drift apart. |
| value / defaultValue | string | — | Controlled or uncontrolled. Defaults to the first item. |
| onValueChange | (value: string) => void | — | The selected value only. |
| variant | 'underline' | 'pill' | 'underline' | See above. |
Keyboard
| Key | Behaviour |
|---|---|
← / → | Moves between tabs |
Home / End | First and last tab |
Tab | Leaves the tab list and enters the panel |