Checkbox & radio
Toggle a row or pick one from a list. Checkbox is for many; radio is for exactly one.
Checkbox
16 px square with a 2.2 px stroke check. Filled with ink, not brand — the check is a state, not a brand cue.
Radio
Same metrics as checkbox; renders as a circle.
States
Unchecked
Checked
Disabled
Indeterminate
Anatomy
| Property | Value | Notes |
|---|---|---|
| size | 16 × 16 px | — |
| border | 1.5 px --border-strong | Checked: --ink |
| radius | 4 px | 9999 for radio |
| check | SVG inline via data URL | 2.2 px stroke, canvas color |
| focus | Inherits .input focus ring | — |
Do & don't
Do
Use checkbox lists for opt-in choices like notification channels or feature flags.
Don't
Use a checkbox to commit a destructive action. That belongs on a button.
Do
Match the label to the verb of the action. "Send weekly summary" — not "Weekly summary".
Don't
Hide the visible state. Native styling makes the checkbox 13 px; we use 16 to keep it tappable.
Code
<label class="check-row"> <input type="checkbox" class="check"> Auto-reconcile </label>