# 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.

- Skill: `xpert-ai/toggle-spring` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/toggle-spring`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/toggle-spring/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/toggle-spring

---


# toggle-spring

A switch whose knob springs across on toggle. Part of
[motion-anything](https://github.com/nexu-io/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.