How to build an accessible CheckboxCard in React
Backed by a native <input type="checkbox"> inside a <label>, so the entire card is clickable and role, checked state, Space activation, and label association come from the platform; the SVG glyph is aria-hidden as it is purely decorative
When to use a CheckboxCard
- Multi-select where each option needs a title and supporting description (feature toggles, add-ons)
- Presenting selectable options as larger, scannable click targets rather than a dense checkbox list
When not to use it
- A simple labelled boolean in a form — use Checkbox
- Choosing exactly one option from a set — use RadioCard or Radio
Keyboard interactions
Role checkbox, verified at WCAG 2.2-AA.
Space
Common mistakes
Avoid: Using CheckboxCard for mutually exclusive options
Prefer: Use RadioCard so only one can be selected
Each CheckboxCard is an independent native checkbox — nothing enforces a single selection across them
Avoid: Cramming a paragraph of marketing copy into description
The description is a single supporting line; long content breaks the card layout and scannability
Example
<div style={{ display: 'grid', gap: 12 }}>
<CheckboxCard title="Automated backups" description="Daily snapshots, 30-day retention" defaultChecked />
<CheckboxCard title="Monitoring" description="Metrics + alerting" />
<CheckboxCard title="Audit log" description="Requires Team plan" disabled />
</div>