Tabs
One selected. Underline in a panel. Pill on canvas. Not page navigation.
Spec
- Exactly one selected.
- Underline variant inside a panel. Pill variant on the canvas.
- Icon + label allowed. Icon-only is not.
- Disabled tabs are skipped by arrows.
- Equal-width is optional, never default.
- Keyboard: arrows, Home, End among tabs. Tab moves into the selected panel.
- Roles:
tablist/tab/tabpanel. - Don't use tabs for page navigation — that's links in a rail.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Underline — in a panel. Arrows, Home, End. Tab into the panel.
p95 ingest 1.4s. Spike at 11:12 after the partition rebalance.
Errors up 18% vs last range in eu-west.
Disabled — skipped by arrows.
14% remaining in the 30-day window.
Pill — on canvas. Disabled Exports is skipped.
p95 ingest 1.4s. Spike at 11:12 after the partition rebalance.
Errors up 18% vs last range in eu-west.
Disabled — skipped by arrows.
14% remaining in the 30-day window.
Do / Don't
| Do | Don't |
|---|---|
| One selected. Tab into the panel. | Tabs as site nav. |
| Underline in a panel, pill on canvas. | Mixed styles on one surface. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| opacity / border | 120ms --dur-fast | --ease-out | select | instant |
| opacity | 180ms --dur-base | --ease-out | select | instant |
Accessibility
aria-selected,aria-controls, panelaria-labelledby.- Only the selected tab is in the tab order (
tabindex="0"). Others-1. Arrows move. - Disabled:
aria-disabled, skipped. - Hit 44px.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.