Checkbox: Allows users to select and deselect the checkbox.
Label: Informs the user what the option is for the checkbox.
Within the checkbox
Ensure that there is at least 16px of horizontal spacing between the checkbox and the label.
Checkboxes should be used:
- When you want users to select multiple items from a predetermined list of items.
- When your users need to see all available options at once.
Checkboxes should not be used:
When selecting 1 option from a predetermined list of items. Using radio buttons would be more appropriate.
List available options vertically
It is recommended to list options vertically as horizontal listings may confuse users and make it difficult to tell which label belongs to which option.
Use logical labels
Ensure that labels for checkboxes and groups are clear to the user.
Ensure that options provided are organised in a meaningful way as this would help users to find the options easily.
Ensure there is enough spacing
Space options out and ensure there is adequate space for touch devices or mobile screens.
Checkbox design tokens