Overview
A square outline that floods with the accent the moment it is checked, while the tick springs past its resting size before settling and a ring expands out of the box and fades. The label dims and a rule is drawn across it left to right, so a completed task reads as done from across the room. Duration, overshoot and ripple are sliders and the strike can be switched off, so the same component covers a playful to-do list and a restrained settings row. Every length is a ratio of the box, so it holds from a dense list up to a hero.
Highlights
- No runtime — markup and one stylesheet
- Duration, overshoot and ripple as sliders
- Checked and unchecked states, both holdable in the editor
- A real focusable input, operable from the keyboard
- Label and box edge clear WCAG AA on both tones
- Reduced-motion fallback