When to use
Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the same group. Specifically, use a checkbox in order to:
- Select one or more options from a list, as a checkbox group
- Select one or more options from a list with sub-selections
- Visually group similar options together
Checkboxes could be applied in different situations, for example as part of a form, to filter data or to agree (or not) with terms and conditions.
Alignment
If there is a checkbox grouping, they can be laid out vertically or horizontally depending on the use case. However, try to arrange the radio buttons vertically as much as possible for better reading.
Layout and positioning
Checkboxes are usually part of forms. Forms are mostly placed on a full page or in a modal. In other cases, a checkbox (or checkbox group) might be used to change settings from a menu, as a filter options or for selecting items in a data table.
Spacing
Within a vertically stacked group the checkboxes should be laid out with an 8px margin between every individual checkbox. Within a horizontally stacked group it should be 16px.
When used as part of a form, a checkbox (group) should be placed at least 24px below or before the next item. Just like other form elements.
Accessibility considerations
Checkboxes need to, at all times, indicate their accessible name, their role (checkbox/switch/toggle), and their value (checked/unchecked, off/on, etc.).
The accessible name is derived from it's associated label (if present), or by explicitly setting it (aria-label). Not setting either of these results in a violation of the Web Content Accessibility Guidelines (WCAG).
A checkbox must be togglable using the spacebar key, and reachable using traditional keyboard navigation patterns (tab navigation).