Checkbox
Native. Visible label. 20px control in a 44px hit.
Spec
- Visible label always. The control is not the name.
- States: checked, unchecked, indeterminate (
aria-checked="mixed"). - Error:
fg-critical+aria-describedbyon the message. - Disabled: out of the submit set.
fg-disabled. - Groups:
<fieldset>+<legend>. - Native 20px box in a 44px hit. Space toggles.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Native 20px in 44 hit. Mixed. Fieldset group.
Error on the group
Do / Don't
| Do | Don't |
|---|---|
| Native checkbox. | A div with a click handler pretending to be a box. |
| Fieldset + legend for a group. | A heading and a pile of boxes. |
| Mixed for partial selection. | A third “maybe” checkbox as its own control. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Native check animation is the platform's. Don't replace it.
Accessibility
- Name is the visible label (
<label for>). - Error is describedby,
aria-invalid="true"on the group or the box. - Keyboard: Tab, Space. Don't steal arrows — those belong to Radio.
- Hit ≥44px including the label.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.