Toggle Spring

A switch whose knob springs across on toggle — a tactile, satisfying on/off state change. Use for settings/form switches. Honors prefers-reduced-motion (quick linear slide). Trigger on user intent only; keep the spring subtle — never to convey loading/progress.

Nexu 77d896f 5 files · 5.9 KB Updated

File contents

toggle-spring

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

  1. Copy toggle-spring.css and toggle-spring.js and link them.
  2. 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-pressed reflects state. Transform only.

nexu-io/motion-anything/tree/main/recipes/web/toggle-spring commit 77d896f93e

Frequently asked questions

npx skillmds@latest add nexu-io/toggle-spring