# Switch · MIAN

An on/off toggle for settings that apply immediately. A native checkbox with role="switch".

- Id: `switch` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/switch
- Use for: toggle switch, on off setting, enable feature, settings toggle.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

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

## Examples

### Settings

```html
<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

```html
<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">
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/switch/source