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 · Toggles & switches
Rocker
A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
- Element
- <input type="checkbox">
- Needs
- kit.css
- Rules
- switch.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
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 · O pressed | On · | pressed | Focus |
|---|---|---|---|
| Rocker |
Graphite
| Part | Off · O pressed | On · | pressed | Focus |
|---|---|---|---|
| Rocker |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-rocker | class | on <input type="checkbox"> | A 60 × 32 bezel with a pivoting cap printed with the IEC marks. |
| checked | attribute | — | On: the | half is pressed. |
| --cap-hi · --cap-mid · --cap-lo · --cap-sunk · --cap-wall | CSS property | set per finish | The cap’s five tones, light to shadow. Graphite sets darker ones. |
| --mark · --mark-sunk | CSS property | set per finish | The printing on the raised and the sunk half. |
| change | event | — | Native. |
| Space | keyboard | — | Toggles. |
Markup
<label class="tui-choice">
Mains
<input type="checkbox" class="tui-rocker" checked>
</label>Needs kit.css only, no script. How to install the kit.
Accessibility
- A checkbox underneath, so it is reached with Tab and toggled with Space. Name it with a wrapping label or
aria-label. - The | and O marks are the IEC 60417 symbols for on and off; the words beside it still say what it powers.
How it’s built
Everything happens on one ::before. Its background is six layers: the two marks, two shadow gradients over the pressed half, a one-pixel highlight on the raised half’s top edge, and a horizontal gradient that models the pivot (end wall, lit face, falling shade, the seam, and the sunk half). Checking swaps the layers to the other side. No images and no script; the bezel is a dark gradient with an inset shadow.
Rules
switch.rules.mdIn the brain
A rocker is for power-like, heavier choices; settings use the switch.
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.