Tabs
stableclientradix tabs
Alternate views of one subject. If the panels aren't variations on the same thing, that's navigation, not tabs.
Default
Six films, two of them stale.
<Tabs label="Board sections" defaultValue="watching">
<TabList label="Board sections">
<Tab value="watching">Watching</Tab>
<Tab value="reading">Reading</Tab>
</TabList>
<TabPanel value="watching">…</TabPanel>
<TabPanel value="reading">…</TabPanel>
</Tabs>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Names the tab set. |
| defaultValue* | string | — | Which tab opens first. |
| value | string | — | Controlled selection. |
Guidance
Don't
- Don't hide anything required to complete a task inside a non-default tab.
- Don't nest tabs inside tabs.
Accessibility
Arrow keys move between tabs with a roving tabindex; Tab moves to the panel.
The active tab is marked by a 3px accent underline as well as colour and weight.