Navigation and disclosure

Tabs

components/ui/tabs

View switching with a sliding indicator and full keyboard support.

Cues are synthesized with the Web Audio API when they play, so there are no sound files to download.

Craft notes

The indicator slides on a spring while the labels change color as it lands
Arrow keys move and select, Home and End jump, and only the selected tab is in the Tab order
A dry wooden knock on every change, never on pressing the current tab again

Play it

Walk across the tabs with the arrow keys, then press Home.

Sounds: tab, swipe

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Two tabs
items={[a, b]}
The indicator adapts to any count.
Segmented
sound="swipe"
No panels, with the airy swipe sound for picking a range.
Silent
silent
Mutes this instance only.