# Swap · MIAN

An icon toggle that swaps between two states with a small rotation, menu/close, play/pause, sun/moon.

- Id: `swap` · Category: Actions · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/swap
- Use for: icon toggle, play pause, hamburger to close, favourite 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-swap`: A label with a checkbox inside.
- `mn-swap-on · mn-swap-off`: Content for the checked and unchecked states.
- `mn-swap-flip`: Flip instead of rotate.

## Accessibility

- The checkbox carries the name (aria-label) and the state; screen readers announce it as a checkbox.
- For a toggle that is not a setting (e.g. opening a menu), use a button with aria-expanded instead.

## Examples

### Swaps

```html
<label class="mn-swap"><input type="checkbox" aria-label="Menu open"><span class="mn-swap-off"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span><span class="mn-swap-on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></span></label>
<label class="mn-swap"><input type="checkbox" aria-label="Dark mode"><span class="mn-swap-off"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span><span class="mn-swap-on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z"/></svg></span></label>
<label class="mn-swap mn-swap-flip"><input type="checkbox" aria-label="Favourite"><span class="mn-swap-off"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z"/></svg></span><span class="mn-swap-on" style="color:var(--mn-danger)"><svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z"/></svg></span></label>
```

## Source

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