Switch between related panels in the same view — without leaving the page or changing a form value; tabs own view navigation, and pick-one-of-N that sets a value is SegmentedControl. The strip is bare — transparent labels on a space.6 gap, no rule — and selection is the only mark: the tab lifts to text.primary and a border.medium underline spanning exactly its letters takes action.primary.bg, the selected color until the selection role lands; --divided restores the full-width hairline where an interface needs it.
Tab states are text-first: hover lifts the color and nothing fills — quieter than a ghost button, because six tabs lighting up like buttons would make the strip flicker. Only selection draws a line.
| Example | State | Driver | Roles | Usage |
|---|---|---|---|---|
| Rest | — | text.secondaryfont.size.button-mdfont.weight.medium | An unselected view; the underline slot is reserved, transparent | |
| Hover | :hover | text.primary | The text lifts — no fill, the strip stays calm | |
| Focus | :focus-visible | focus.ring | The shared ring | |
| Selected | [aria-selected] | text.primaryaction.primary.bg | The visible view — text lift plus the underline | |
| Disabled | :disabled | action.disabled.text | A view that exists but is not available here |
A div.ds-tabs groups one role="tablist" strip — named with aria-label — and its role="tabpanel" regions, each tab a button wired to its panel by id in both directions. Panels sit at font.size.copy-sm on space.4 of vertical padding; under --divided the selected underline overlaps the rule by its own negative margin, so the strip keeps one baseline.
Strip only — the panels and their id wiring are the host's. The click switching here is demo chrome; roving tabindex, arrow keys, and panel activation are layer 2, contracted in the keyboard map.
Tabs switch views; they never set a value.
| Verdict | Rule |
|---|---|
| Do | Use tabs for 2–6 sibling panels that belong on the same page — a destination with its own URL or page title is navigation, not a tab. |
| Do | Always name the tablist (aria-label or aria-labelledby) and wire every tab and panel by id, both directions. |
| Do | Keep exactly one tab at aria-selected="true" and hidden on every inactive panel. |
| Do | Keep labels short, parallel, and noun-like. |
| Don’t | Use tabs as filters or value pickers — that is SegmentedControl, Radio, Select, or Checkbox, depending on the data shape. |
| Don’t | Let a count or badge become the only way to tell tabs apart. |