Rocker
A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
Kit part · Toggles & switches
Switch
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
- Element
- <input type="checkbox">
- Needs
- kit.css
- Rules
- switch.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
| Heat pump |
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Off | On | Focus | Disabled off | Disabled on |
|---|---|---|---|---|---|
| Switch |
Graphite
| Part | Off | On | Focus | Disabled off | Disabled on |
|---|---|---|---|---|---|
| Switch |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-switch | class | on <input type="checkbox"> | A 48 × 26 slot with a ridged thumb that slides 16px. |
| checked | attribute | — | On: the thumb slides right and the slot lights green. |
| 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
<label class="tui-choice">
Phantom power
<input type="checkbox" class="tui-switch" checked>
</label>Needs kit.css only, no script. How to install the kit.
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-labelthat names the thing it powers: “Heat pump power”. - On is also the thumb’s position, not only the green slot.
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
switch.rules.mdIn the brain
If the change needs a Save, it is not a switch: use a check key.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.