---
name: nexu-io-toggle-spring
description: "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."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "beaa744e-af62-44ae-95b2-fa28b082bf9d"
  decimalai-version-id: "37681509-eef5-4f97-ae46-3f7924e5d6b4"
  decimalai-version: "1"
  decimalai-body-sha256: "f713ae5086f2f6fe7977c39936455a3de5cb641be6beef81c5216296abc4d9f5"
  decimalai-name: "nexu-io/toggle-spring"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/nexu-io-toggle-spring@1/SKILL.md"
---
# 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.