Switch
An on/off toggle for settings that apply immediately. A native checkbox with role="switch".
Settings
- Airplane modeDisable all wireless connections
- NotificationsPush and email
<ul class="mn-list" style="max-width:26rem">
<li><div class="mn-grow"><div class="mn-list-title">Airplane mode</div><div class="mn-list-desc">Disable all wireless connections</div></div><input class="mn-switch" type="checkbox" role="switch" aria-label="Airplane mode"></li>
<li><div class="mn-grow"><div class="mn-list-title">Notifications</div><div class="mn-list-desc">Push and email</div></div><input class="mn-switch" type="checkbox" role="switch" checked aria-label="Notifications"></li>
</ul>Sizes and colours
<input class="mn-switch mn-switch-sm" type="checkbox" role="switch" checked aria-label="Small">
<input class="mn-switch" type="checkbox" role="switch" checked aria-label="Default">
<input class="mn-switch mn-switch-lg mn-success" type="checkbox" role="switch" checked aria-label="Large success">
<input class="mn-switch" type="checkbox" role="switch" disabled aria-label="Disabled">Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/switch.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-switch | On an <input type="checkbox" role="switch">. |
| mn-switch-sm · mn-switch-lg | Sizes. |
Accessibility
- Add role="switch" so it is announced as on/off rather than checked/unchecked.
- Use a switch for immediate effect; use a checkbox inside forms that are submitted.