#Overview
Checkboxes allow users to make binary choices, indicating whether a particular option or setting should be enabled or disabled.
#When to use
- To answer a simple “yes” or “no” question
- Checkboxes are generally used with other form elements
#Don’t use for
- If there is no need to submit a form, consider using a Toggle Switch
- If the user must pick from a defined set of mutually exclusive options (use a Radio Button)
- More complex checkbox content (use a Selector)
#Anatomy
The label’s font size differs between desktop (14px) and mobile (16px).
#States
#Galaxus
#Digitec
- Normal
- Normal + Focus
- Selected
- Selected + Focus
- Disabled
- Selected + Disabled
- Error
#Validation
Error messages on checkboxes should only be displayed after the user tries submit the form. They appear when user consent is required.
When checking for validity, any error shown should be explained as well as a solution offered.
Error messages should be clear, short and understandable, and formulated from the user's perspective.
