DocsComponents
Checkbox
Consent rows with links, required mark and error.
*I accept the terms of service
- 1Native checkbox 16 px, deep blue when checked
- 2Row: min. height 44 px, 12 px gap, aligned to the top; the label carries the touch target
- 3Label 14 px, slate-700; may wrap and hold links
- 4Required mark: semibold asterisk in the destructive token
Variants
One checkbox, built for consent rows: a long, wrapping label stays aligned with the box at the top.
States
Focus is forced below so it shows without a keyboard; the checkboxes above react to real focus. Checked uses the browser’s own box tinted with the deep blue accent.
Accept the terms to create an account
API reference
Props of Checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | – | Required. Links the label to the checkbox and builds the error id. |
label | node | – | Required. Text of the row; may contain links (consents). |
required | boolean | false | Adds a red asterisk before the label and the native required attribute. |
error | string | null | – | Message under the row; sets aria-invalid, announced as an alert. |
…input attributes | checked, onChange, disabled, name… | – | Any native checkbox attribute except type passes through. |
Accessibility
- A native checkbox inside its label: Space toggles it, and the whole 44 px row is the touch target.
- Links in the label open the document and do not toggle the checkbox.
- The asterisk is decorative (aria-hidden); the native required attribute tells screen readers the field is required.
- Error: aria-invalid, linked by aria-describedby, announced as an alert. Focus: 3 px outline in the focus-ring token, 2 px offset.
- Contrast: label 9.4:1, checked box 7.6:1 on the page background; error 4.8:1 on a white card (4.4:1 on the lilac page, so consent rows sit on cards).
- Honest note: the label has a hover colour in the code, but the text span sets its own colour, so hover is not visible. Either drop the rule or move it to the text.
Do and don’t
I agree that the organiser may take photos during the activity.