# Switch

On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.

Kit part · Free · https://tactileui.dev/parts/switch

- Element: `<input type="checkbox">`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Toggles & switches
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### In a settings row

```html
<label class="tui-choice" style="justify-content:space-between;width:220px">Wi-Fi <input type="checkbox" class="tui-switch" checked></label>
```

### In a table cell

```html
<table class="tui-table" style="width:220px"><tbody><tr><td>Heat pump</td><td class="is-num"><input type="checkbox" class="tui-switch" checked aria-label="Heat pump power"></td></tr></tbody></table>
```

### With a second line

```html
<label class="tui-choice" style="justify-content:space-between;gap:16px;width:240px"><span>Overnight top-up<br><small class="tui-muted">00:30–04:30</small></span><input type="checkbox" class="tui-switch"></label>
```

## Every state

- Off
- On
- Focus
- Disabled off
- Disabled on

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-switch | class | on | A 48 × 26 slot with a ridged thumb that slides 16px. |
| checked | attribute | — | On: the thumb slides right and the slot lights green. |
| data-material | attribute | aluminium · graphite · porcelain · black-anodised · titanium · bakelite · anodised-blue · anodised-green | What the thumb is made of, apart from the page’s finish. The slot is cut in the plate: it keeps the finish and still lights green. On the switch or on its device. Anodised blue and green go on a whole device only. |
| disabled | attribute | — | 45% opacity, no pointer. |
| name · value | attribute | — | Posts with a form like any checkbox. |
| change | event | — | Native. Apply the setting here, at once. |
| .is-focus | class | — | Forced focus ring, for specimens. |
| Space | keyboard | — | Toggles, as any checkbox. |

## Markup

```html
<label class="tui-choice">
  Phantom power
  <input type="checkbox" class="tui-switch" checked>
</label>
```

The demo on the page:

```html
<div style="display:grid;gap:18px;width:min(100%,320px)">
  <label class="tui-choice" style="justify-content:space-between">Phantom power <input type="checkbox" class="tui-switch" checked></label>
  <label class="tui-choice" style="justify-content:space-between">Low cut at 80 Hz <input type="checkbox" class="tui-switch"></label>
  <label class="tui-choice" style="justify-content:space-between">Pad −20 dB <input type="checkbox" class="tui-switch"></label>
</div>
```

## Usage notes

Flip it with a click or Space. The slot lights because the thing is on.

## Accessibility

- Wrap the words and the switch in one `<label class="tui-choice">` so the text names it and the whole row is clickable.
- In a table, where there is no room for words, give it an `aria-label` that names the thing it powers: “Heat pump power”.
- On is also the thumb’s position, not only the green slot.
- Keyboard: a native checkbox drawn as a switch. Tab focuses it and Space switches it; a disabled switch is skipped.

## How it’s built

An `appearance: none` checkbox. The slot is the kit’s recess; the thumb is an `::after` with a raised light and a ridged grip drawn by one repeating gradient. Checked, the thumb translates 16px over 180ms and the slot fills with a mix of `--tui-green` and the well. No script, no images.

## Rules

If the change needs a Save, it is not a switch: use a check key.

The full rules are in `switch.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Rocker](https://tactileui.dev/parts/rocker): A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.