Skip to main content
Checkboxes allow users to select one or multiple items from a list, or to toggle a single option on or off. They provide a visual indication of selection state and are fundamental controls for collecting user input.

​
Guidance

AspectBest Practice
UsageUse checkboxes for binary choices or selecting multiple items from a list. Each checkbox should represent a distinct, independent option.
ContentUse clear, concise labels that describe the option. Position labels consistently (typically to the right of the checkbox).
BehaviorClicking either the checkbox or its label should toggle the state. Groups of checkboxes should maintain independent selection.
StatesProvide clear visual distinction between checked, unchecked, indeterminate, focused, and disabled states.
FeedbackOffer immediate visual feedback when state changes. Ensure state changes are perceivable for all users including those using assistive technology.
ExamplesFeature toggles, agreement to terms, “select all” mechanisms, or multi-select lists.

​
Best Practices

  • Independent Options: Use checkboxes for independent options where users can select any combination of choices.
  • Clear Labeling: Provide descriptive, concise labels that clearly indicate what the checkbox controls.
  • Logical Grouping: Group related checkboxes together visually and semantically for better organization.
  • Default States: Set logical default states based on likely user preferences or system requirements.
  • Accessible Design: Ensure checkboxes are keyboard accessible and properly labeled for screen readers.

​
Do’s and Don’ts

Do

  • Use for multi-select options or independent toggles.
  • Provide clear, descriptive labels for each checkbox.
  • Ensure interactive areas are sufficiently large for touch.
  • Support keyboard navigation and screen readers.

Don't

  • Use for mutually exclusive options (use radio buttons instead).
  • Hide checkbox indicators even when styled differently.
  • Use for actions that take immediate effect (use toggles/switches).
  • Place labels inconsistently across a form or interface.

​
Additional Guidance

  • Psychological Impact:
    • Autonomy: Checkboxes give users a sense of control by allowing multiple independent selections.
    • Cognitive Load: Clearly designed checkboxes reduce mental effort by making states obvious and interactions predictable.
    • Completion: Checked items provide visual satisfaction of completion or inclusion.