Components · Controls
Checkbox
A checkbox with its label. The mark draws itself.
Try itChange the motion setting at the top to feel each personality.
Use it
<Checkbox checked={hints} onChange={(e) => setHints(e.target.checked)}>
Show hints
</Checkbox>How it moves
| When | Role | What moves |
|---|---|---|
| Pressed down, released | feedback | The box scales to the role's scale and back |
| Becomes checked | state-change | The box fills with the action color and the check mark draws itself from left to right |
| Becomes unchecked | state-change | The mark undraws and the fill fades back |
Rules:
- The mark draws with the role's plain duration and easing, not its spring, so the line never overshoots its end.
- The label does not move.
- A checked box is shown by the mark as well as the fill, never by color alone.
Reduced motion: the feedback scale is 1, so the box does not move. The mark and fill still change, over the shortest duration.
CSS variables used: --ss-motion-feedback-scale, --ss-motion-feedback-spring, --ss-motion-feedback-spring-duration, --ss-motion-state-change-duration, --ss-motion-state-change-easing.