Components · Controls
Toggle
An on and off switch for settings that take effect at once.
Try itChange the motion setting at the top to feel each personality.
Use it
<Toggle checked={on} onChange={(e) => setOn(e.target.checked)}>
Daily reminder
</Toggle>How it moves
| When | Role | What moves |
|---|---|---|
| Turned on | state-change | The thumb slides to the right end of the track, and the track fills with the brand color |
| Turned off | state-change | The thumb slides back and the track empties |
Rules:
- The thumb's travel is the inside width of the track. It is a fact of the component's size, not a motion distance, so it does not come from a role.
- The thumb uses the role's spring. The track color uses the plain duration and easing.
- On and off are shown by where the thumb sits, never by color alone.
- The switch takes effect at once. Motion never delays the change.
Reduced motion: the thumb still has to change sides, since that is the state. It moves over the shortest duration with no spring.
CSS variables used: --ss-motion-state-change-spring, --ss-motion-state-change-spring-duration, --ss-motion-state-change-duration, --ss-motion-state-change-easing.