Components · Controls
Tabs
A row of tabs with a marker that slides to the selected one.
Try itChange the motion setting at the top to feel each personality.
Use it
<Tabs tabs={[{ id: "learn", label: "Learn" }]} value={view} onChange={setView} label="Lesson views" />How it moves
| When | Role | What moves |
|---|---|---|
| A different tab is selected | state-change | The marker slides to the new tab and takes its width, and the two labels swap color |
| First shown | none | The marker is already under the selected tab. It does not slide in |
| The row is resized | none | The marker is placed again without motion catching the eye |
Rules:
- The marker travels to wherever the next tab is. That distance is a fact of the layout, not a motion distance, so it does not come from a role.
- Selecting a tab is a state change of the row, not navigation. If the content under the tabs changes too, that content uses enter, not the tabs.
- The marker uses the role's spring. The label color uses the plain duration and easing.
- The selected tab is shown by the marker's shape and position, never by color alone.
Reduced motion: the marker still moves to the new tab, since its position is the state. It moves over the shortest duration with no spring.
Keyboard: left and right arrows move between tabs, and Home and End jump to the first and last.
CSS variables used: --ss-motion-state-change-spring, --ss-motion-state-change-spring-duration, --ss-motion-state-change-duration, --ss-motion-state-change-easing.