A switch whose knob springs across on toggle. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- On/off switches in settings and forms; any binary state the user flips themselves.
When NOT to use it (restraint)
- To convey loading/progress (use a spinner/skeleton). Keep the overshoot subtle, not gimmicky.
How to apply
- Copy
toggle-spring.cssandtoggle-spring.jsand link them. - Markup:
<button class="ms-toggle" data-toggle aria-pressed="false"><span class="knob"></span></button>.
Accessibility & performance
prefers-reduced-motion: quick linear slide, no overshoot.aria-pressedreflects state. Transform only.