Navigation

Tabs

One surface, several mutually exclusive panels.

Specimen

Only the selected panel is exposed.

One indicator travels between tabs rather than a border toggling on each, so the eye can follow where selection went. Arrows move, Home and End jump. Hovering draws a lighter line in from the left and highlights the tab on the Ruler, so pointing at a tab never looks like choosing it. The mark itself is a drawn element, not a border — which is why it is roughened like every other hairline, and why the top navigation can share it.

Props

Prop	Type	Note
label	`string`	Required. Names the tablist for screen readers.
items	`{ id, label, panel }[]`	Order is the tab order.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

Use it for

Several mutually exclusive views of one subject, where only one matters at a time.
The moving-indicator pattern generalises, and is now shared code: useIndicator measures whichever child matches a selector and publishes --indicator-x/w to the container. Tabs points it at [aria-selected="true"], the top navigation at [aria-current="page"].
A set with nothing selected shows no mark: the hook writes data-indicator="off" on the container, which is also what suppresses the travel on first paint.

Do not use it for

Hiding content a reader needs to compare — put it side by side instead.
More than about five tabs; past that it is navigation.