ClankDesign
Clank Design/Tabs

Collections / headless primitive

Tabs

Manual or automatic tab activation with roving focus.

Anatomy reference Framework guide
280–1600px; fits available space.
Tabs / interactiveFluid · fits available space
Overview

Your project is healthy and serving the active release.

Semantic parts

Spread each part getter onto the matching element, then style its stable state attributes.

rootlisttabpanelindicator

Keyboard guidance

This preview is horizontal with automatic activation: moving focus selects the tab. Vertical arrows and manual activation keys below describe alternative configurations.

Keys from the Clank controller contract, with preview and configuration notes. Disabled or read-only controls may prevent changes.

ArrowLeft
Move focus horizontally, respecting text direction
ArrowRight
Move focus horizontally, respecting text direction
ArrowUp
Move focus in a vertical tab listVertical orientation only; this preview is horizontal.
ArrowDown
Move focus in a vertical tab listVertical orientation only; this preview is horizontal.
Home
Focus the first tab
End
Focus the last tab
Enter
Activate a focused tab in manual modeManual activation only; this preview activates tabs automatically.
Space
Activate a focused tab in manual modeManual activation only; this preview activates tabs automatically.