23Switch
A checkbox underneath, role="switch" on top. The shape is a promise: the change applies the moment you flip it. If it only applies on submit, that promise is broken — use Checkbox.
Use it for
- Dark mode, email digest, autoplay — instant settings
Not for
- Anything inside a form that submits
States
markup
<label class="ns-choice"><input type="checkbox" role="switch" class="ns-switch" checked>
<span class="ns-choice__text"><span class="ns-choice__label">Dark mode</span></span></label>
<label class="ns-choice"><input type="checkbox" role="switch" class="ns-switch">
<span class="ns-choice__text"><span class="ns-choice__label">Weekly digest</span></span></label>
<label class="ns-choice"><input type="checkbox" role="switch" class="ns-switch" disabled>
<span class="ns-choice__text"><span class="ns-choice__label">Disabled</span></span></label>Accessibility contract
- role="switch" announces on/off rather than checked/unchecked
- The knob slide is the one transform animation allowed, inside the 120ms budget