On this page
Overview
Show code, ProjectViews.tsx
Variants
Sizes
- Large
Most tabs, as tall as buttons. The default.
- Small and medium
Toolbars and bars, as tall as a control of that size.
Small tabs, with a count in a tab.
Show code, SmallRail.tsx
Vertical
A column of tabs beside their panels, for the sections of a settings page.
Show code, VerticalList.tsx
Fill a region
The selected panel takes the height left below the tabs, for a view such as a canvas.
Show code, FillARegion.tsx
Beside a heading
The tabs can share a row with a heading, with their panels below.
Show code, ListBesideAHeading.tsx
Anatomy
Tabs
Rail
Tab
Panel
Show code, TabsAnatomy.tsx
Behaviour
Choosing a tab
A tab shows its panel as soon as the arrow keys reach it.
- Where a panel takes a while to load, a tab can wait to be pressed instead.
- A disabled tab is dimmed: the arrow keys reach it but don't choose it.
Adapting to width
Tabs keep their size. A rail with more tabs than fit scrolls sideways.
Show code, ScrollingRail.tsx
Rules
Tabs show views of one subject, one panel at a time.
Use it when
- Related views of one subject, such as a project's summary and activity
- Sections people look at one at a time, such as a settings page's
- Views that fill a region, such as a diagram's canvas and its outline
Show code, StepsAsTabs.tsx
One panel at a time
Keep content people compare in one panel.
- Every tab is a button that shows its panel, never a link to another page.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves into the rail, to the selected tab or the one focused last, then on to the panel. |
| ←, → | In a horizontal rail, moves to the previous or next tab, wrapping, and with automatic activation selects it. |
| ↑, ↓ | The same in a vertical rail. |
| Home, End | Moves to the first or last tab, and with automatic activation selects it. |
| Enter, Space | Selects the focused tab, with manual activation. |