- Guidelines
- React API Reference
- Blazor API Reference
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
| Aspect | Best Practice |
|---|---|
| Usage | Use checkboxes for binary choices or selecting multiple items from a list. Each checkbox should represent a distinct, independent option. |
| Content | Use clear, concise labels that describe the option. Position labels consistently (typically to the right of the checkbox). |
| Behavior | Clicking either the checkbox or its label should toggle the state. Groups of checkboxes should maintain independent selection. |
| States | Provide clear visual distinction between checked, unchecked, indeterminate, focused, and disabled states. |
| Feedback | Offer immediate visual feedback when state changes. Ensure state changes are perceivable for all users including those using assistive technology. |
| Examples | Feature 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.