Checkbox
A checkbox is a selection control that lets users choose one or multiple independent options from a list. Each checkbox operates individually.
Philosophy
Checkboxes allow users to make multiple or exlusive choices.
Best for multi and exclusive select scenarios.
Simple, recognizable, and highly accessible.
Each checkbox has a clear label that defines what is being selected.
Anatomy
Variants
Standard Checkbox
Box with a checkmark when selected.
States
Off (Idle)
Empty box.
On
Box shows checkmark/indicator.
Usage tips
Dos
Use checkboxes for multiple or exclusive selections.
Always provide clear, concise labels.
Use indeterminate state for grouped “Select All” logic.
Don’ts
Don’t leave checkboxes unlabeled or rely only on proximity.
Don’t overload users with long lists of checkboxes without grouping.
Real-world example
