Inputs

Checkbox

Multi-selection control with a clear state hierarchy, including indeterminate for partial selections.

Examples

Rendered states (visual reference; the live example above is the accessible one)
	Default	Hover	Focus visible	Pressed	Disabled
Unchecked	Label	Label	Label	Label	Label
Checked	Label	Label	Label	Label	Label

Checkbox anatomy
#	Part	Description	Presence
1	Box	22px, 7px radius, 1.5px border	Required
2	Check or dash	Checked mark or indeterminate dash	Required
3	Label	Clickable text, always visible	Required
4	Helper / error	Linked with aria-describedby	Optional

Touch target	44 × 44px minimum
Stroke	Dual overlapping gradient vectors
Colour themes	Same seven-colour semantic mapping as the rest of the system

Keyboard
Key	Result
`Tab`	Moves focus to the checkbox
`Space`	Toggles checked
`Tab order`	Follows reading order; each box is its own stop

Pointer and touch
Trigger	Response
Click on label	Toggles, since the label is part of the target (44px high)
Hover	Border strengthens
Press	Box scales to 0.92

role · checkbox

1.3.1Info and Relationships1.4.11Non-text Contrast3.3.1Error Identification2.5.8Target Size (Minimum)4.1.2Name, Role, Value

Requirements
Requirement	How Rig meets it
Native input	<input type="checkbox"> inside a <label>. Style the sibling, never replace the input.
Group	<fieldset> with a <legend> names the question
Indeterminate	Set input.indeterminate in script; it is a visual state, not a value
Error	aria-invalid plus a message with an icon and text, linked by aria-describedby
Boundary contrast	The 1.5px border meets 3:1 against its background (WCAG 1.4.11)

Do and don’t
Do	Don’t
Use for multiple selections or an opt-in	Do not use for actions that apply instantly (use Switch)
Make the label a full sentence when it states consent	Do not pre-check consent boxes

Nested parent and child checkboxes use Indeterminate to show a partial selection.