Checkbox
A real checkbox, hidden, with a grain cell drawn beside its label.
States
-
Unchecked
nothing set
A tissue ring round clean paper.
-
Checked
:checked
An ink fill with a paper tick.
-
Hot
hover
The ring turns --state.
-
Checked, hot
:checked and hover
The fill turns --state.
-
Disabled
disabled
The ring at a third of its strength.
-
Disabled, checked
disabled, :checked
The fill stays ink; the tick is muted.
Anatomy
| Cell | 24px (one module), half a module from its label |
|---|---|
| Unchecked | 1.4 dots of --tissue ring round clean paper |
| Checked | an --ink fill with a --chip-fg tick from the pixel set |
| Hot | the ring or the fill turns --state; the tick turns --state-fg |
| Change | every change fires a 280ms flare from the cell |
| Dot | 2px, through the 8×8 Bayer screen |
| Focus | a 2px --state outline round the cell, 2px off it |
| Input | the real checkbox, visually hidden: keyboard, forms and screen readers work natively |
The dot and the flare’s length are read from the engine at build time (rule.ts).
Decisions
-
The input stays real
The checkbox is the platform’s own, hidden, so Space, form submission and assistive technology behave as everywhere else. Only its picture is drawn.
-
A cell, not a box
Frames are off, so the square box becomes the system’s round cell of grain: a tissue ring at rest, ink when chosen, --state when hot, like every compact control.
-
Every change fires
A change is an interaction starting, so it fires, the first of the four moves.