Navigation
Tabs
Switch between related panels in place. Composed from TabList, Tab and TabPanel.
Live example
Seven nights on the Valmora Coast. All details are demo data.
Usage
<Tabs defaultValue="all">
<TabList label="Status">
<Tab value="all">All</Tab>
<Tab value="open" adornment={<Badge>12</Badge>}>Open</Tab>
</TabList>
<TabPanel value="all">...</TabPanel>
<TabPanel value="open">...</TabPanel>
</Tabs>Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | none | Initially selected tab. |
value? | string | none | Controlled selected tab. |
onValueChange? | (value: string) => void | none | Called when the selection changes. |
orientation? | 'horizontal' | 'vertical' | 'horizontal' | Arrow keys follow the orientation. |
Do and don't
Do
- Use for peer views of the same data, such as status filters.
- Keep tab labels short.
Don't
- Use tabs for steps in a sequence.
- Nest tabs inside tabs.
Accessibility
- tablist, tab and tabpanel roles with aria-selected and aria-controls.
- Roving tabindex: only the selected tab is in the Tab order.
- Automatic activation: moving with arrows selects the tab.
Keyboard
| Keys | Action |
|---|---|
| Left Arrow, Right Arrow | Move to and select the previous or next tab, wrapping |
| Home, End | Select the first or last tab |
| Tab | Moves from the tab list into the panel |