Checkbox

When to use

• Use Checkbox for multi-select inside a list, like table-row pickers, multi-pick filters, and opt-in preference groups.
• Use it for acknowledgments where the user must affirm a specific statement, such as terms of service or an 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 should not 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 like Notifications or Required 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 a <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>/htmlFor association with a custom wrapper that breaks the click region.