Tabs & segmented controls

Which control

Reach for tabs when each option reveals a different panel of content — Overview, Constraints, Build. Reach for a segmented control when the content stays and only the lens changes.

Tabs

Implements the WAI-ARIA tabs pattern properly, which is why this is a component and not a row of styled links.

Arrow keys move between tabs, Home and End jump to the ends, and only the ACTIVE tab is in the tab order — so Tab moves out of the group rather than through every one of them. That roving tabindex is the part everyone leaves out. Try it with the keyboard.

The underline lives on the tab and is transparent when inactive, so selecting a tab does not change its height by 2px and shift the row beneath it.

Segmented control

The track is SUNKEN and the selected thumb is raised. Inverting that — a raised track with an inset thumb — is the single most common way this control gets drawn wrong.

Two or three options. Past four it is a select — the segments get too narrow to label honestly and start being truncated.

It carries radio semantics rather than tab semantics: it picks a value, it does not reveal a panel, and a screen reader should say "2 of 3".