Form Elements
Checkbox
Checkbox present a list of options where users can make multiple selections, a single selection or none at all. They support user interaction by allowing the selection of independent items ensuring that users can easily customize settings, filter search results and submit multi choice forms with clarity.
Examples
Medium (M)
default
disabled
error
unselected
Label*
Label*
Label*
selected
Label*
Label*
intermediate
Label*
Label*
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Native <input type="checkbox"> for full browser/AT support
- aria-invalid for error state
- Visible focus ring (#4a2bc2, 2px) meets WCAG 2.4.7
- Min 44px touch target via label association
- Color not sole indicator, checkmark/dash icon provides shape differentiation
When to use this component
✓Do's
- •Binary yes/no choices
- •Multiple selections from a list
- •Terms and conditions acceptance
- •Optional preferences or settings
✗Don'ts
- •Mutually exclusive choices, use Radio instead
- •Immediate on/off settings, use a Switch
- •Selecting a single option from a long list, use a Select
- •Triggering an action, use a Button
Do's and Don'ts
✓ Do's
Use checkboxes for multiple independent selections from a list.
✗ Don'ts
Don't use checkboxes for mutually exclusive options, use Radio buttons instead.
✓ Do's
Leave consent checkboxes unchecked by default, pre-checking violates GDPR and Indian IT Act requirements.
✗ Don'ts
Don't pre-check consent or marketing checkboxes, users must actively opt in.