Checkboxes support different states, including checked, unchecked, and indeterminate, providing clear visual feedback. Checkboxes should be used when multiple selections are needed, unlike radio buttons, which are for single-choice scenarios. Proper spacing and alignment help maintain clarity, and labels should be concise and descriptive to enhance usability.
- 1.Checkbox input: the interactive element that allows users to toggle between checked, unchecked, and indeterminate states. It provides visual feedback based on user selection and supports accessibility attributes for better usability.
- 2.Label: descriptive text associated with the checkbox, helping users understand the option they select. It should be concise and placed close to the checkbox for clear association.
Checkboxes can be stacked vertically or horizontally, depending on the use case.
Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is related to a single category, consider using a group label to provide context as this will enhance usability and help users make informed selections.
Horizontally stacked checkboxes maintain a separation of, minimum, 24px.
By default, the label is placed to the left of the checkbox, but it can also be positioned to the right when needed. Choose the label position that best fits your layout and ensures clear readability and alignment with surrounding elements.
We recommend selecting a label placement that maintains a strong visual connection between the checkbox and its description, without disrupting the overall flow of the interface.
Although checkboxes, radio groups, and switches may appear as selection controls, they serve distinct purposes in a user interface:
| Component | Use case |
|---|---|
| Checkbox | Use when users can select multiple options independently. Each checkbox represents an on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group may allow none, some, or all options to be selected. |
| Radio group | Use when the user must select only one option from a list of predefined, mutually exclusive choices. Ideal for short, static lists where all options should be visible at once to support decision-making. |
| Switch | Use for a single, immediate toggle between two states, like on/off or enabled/disabled. Switches should act instantly and are best for system or UI-level settings. |
- Use for multiple selections: checkboxes should be used when users can select multiple options independently. If only one selection is allowed, use radio buttons instead.
- Ensure clear labels: each checkbox should have a clear, concise label that accurately describes the option. Avoid ambiguous wording that might confuse users.
- Group related options: when checkboxes are part of a related set, use a group label to provide context. This improves readability and helps users understand the available choices.
- Prioritize vertical stacking: for better readability and usability, stack checkboxes vertically, especially when dealing with multiple options. Horizontal stacking should be reserved for short lists with clear, non-wrapping labels.
- Use the indeterminate state properly: the indeterminate state should only be used when a parent checkbox controls multiple sub-options. This visually indicates that some but not all child options are selected.
- Maintain sufficient spacing: provide adequate spacing between checkboxes to prevent misclicks and ensure a clean, organized layout.
- Ensure accessibility: make checkboxes large enough to be easily clickable and ensure they are keyboard-navigable. Labels should be linked correctly for screen readers to interpret them properly.