neumorphism soft-ui toggle switch aria spring neumorphic settings switch on/off toggle in soft-UI dashboard tactile theme or feature toggle toggle looks identical to surrounding surface want spring-bounce transition without JS need accessible state communication in neumorphic context
Soft Toggle
Fetch snippet JSON:
curl https://webspire.de/snippets/soft-ui/toggle.json Preview
Background
Customize
Quick Start
<button class="soft-toggle" role="switch" aria-checked="false" aria-label="Enable notifications"></button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion, prefers-color-scheme
- Size
- 990 bytes · 52 lines
- Custom Properties
-
--soft-bg--soft-light--soft-shadow--soft-on--soft-thumb--soft-w--soft-h--soft-thumb-size - Classes
-
.soft-toggle
neumorphism soft-ui toggle switch aria spring
The thumb uses cubic-bezier(0.34, 1.56, 0.64, 1) — the spring easing that overshoots to 1.56 — giving the slide its “snap” without JavaScript. Toggle state is managed via aria-checked with a one-liner click handler.
<div style="background: oklch(93% 0.01 75); padding: 3rem; display: flex; gap: 2rem; align-items: center;">
<!-- Dark mode toggle -->
<label class="flex items-center gap-3 cursor-pointer">
<button
class="soft-toggle"
role="switch"
aria-checked="false"
aria-label="Dark mode"
onclick="this.setAttribute('aria-checked', this.getAttribute('aria-checked') === 'true' ? 'false' : 'true')">
</button>
<span class="text-sm font-medium text-slate-600">Dark mode</span>
</label>
<!-- Notifications toggle (on by default) -->
<label class="flex items-center gap-3 cursor-pointer">
<button
class="soft-toggle"
role="switch"
aria-checked="true"
aria-label="Notifications"
onclick="this.setAttribute('aria-checked', this.getAttribute('aria-checked') === 'true' ? 'false' : 'true')">
</button>
<span class="text-sm font-medium text-slate-600">Notifications</span>
</label>
</div>