Tabs
Views of one thing, one shown at a time.
Examples
What the concept claims and why it matters.
Name and email.
Every run this week.
Props
Tabs
Views of one thing, one shown at a time. Arrow keys move between tabs; Tab moves into the panel.
| Prop | Type | Default | Description |
|---|---|---|---|
variant? | Variant | "line" | line for the views of a record, segmented for a filter or a toggle between a few views. |
Also takes 85 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
TabList
Also takes 78 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Tab
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
count? | number | — | How many items the view holds, shown quietly after the label. |
Also takes 96 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
TabPanel
Also takes 78 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| ArrowLeft or ArrowRight | Move between tabs (ArrowUp and ArrowDown when vertical) |
| Home or End | Go to the first or last tab |
| Tab | Moves from the tab list into the panel |
Accessibility
- The tab list is one tab stop; arrow keys follow the reading direction in right-to-left text.