Checkbox
A control that toggles between two options, checked or unchecked.
Best Practices
When to use
- Multi-select inside a list, like table-row pickers, multi-pick filters, and opt-in preference groups.
- Acknowledgments where the user must affirm a specific statement (terms of service, irreversible export).
- For a single boolean setting like dark mode or password protection, use Toggle. The on/off mechanic is clearer there than a lone checkbox.
Behavior
- Indeterminate is a visual state, not a third value. Drive it from a parent that knows partial selection, and clear it as soon as every child is fully checked or unchecked.
- Validation on a required acknowledgment fires on submit, not on blur, so checking and unchecking shouldn’t flash an error.
- Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug.
Content
- Group label above a
<fieldset>is a Title Case noun likeNotificationsorRequired Permissions. No trailing colon. - Acknowledgment label is a full sentence ending in a period:
I agree to the Terms of Service. - Indeterminate copy names the partial count next to the group label (
3 of 5 selected). Never leave the dash state unlabeled.
Accessibility
- Wrap related checkboxes in
<fieldset>with a<legend>so screen readers announce the group name before each option. - Row-select checkbox in a table has no visible label. Set
aria-label="Select {row name}"so the row stays identifiable out of context. - The click target already extends to the label. Don’t override the
<label>/htmlForassociation with a custom wrapper that breaks the click region.
Was this helpful?