Introduction
Checkboxes are used for selecting multiple choices rather than mutually exclusive options out of a list of options. Each checkbox in a list operates independently, so checking an additional box does not impact the selections made in other checkboxes. When using a stand-alone checkbox [a single option that isn't part of a larger group], it presents a binary choice, allowing the user to either select or deselect an option.
- Checkboxes can be used in forms to display mutually choice options
- A stand-alone checkbox can be used in clear context as a binary yes/no option, e.g. as an opt-in for GDPR during registration, or as a “Remember me” option during sign in. If an on/off option is needed, use toggle switches instead.
- By default, all form elements are mandatory; label them as optional only if they are indeed optional.
Usage
Checkboxes work best when there are seven or fewer options to choose from. To ensure readability, it is recommended to limit the checkbox label to a single line.
Further, don't check options by default to avoid dark UX patterns.
Use checkboxes if users can select multiple options from a group of options.
If users can choose only one option out of a group of options, opt for radio buttons instead.
Give each checkbox a descriptive and short label, making sure all labels are similar grammatically and tonally.
When there are multiple checkbox groups or values that aren't identical on a page, don't combine them into one large group. Separate groups with a label.
Use stand-alone checkboxes in clear context and attached to a larger group of content. Make sure label is descriptive and explains its purpose.
Never use stand-alone checkboxes without any additional context. Checkboxes must have a clear purpose and be attached to a submit button or auto-save.
Use stand-alone checkboxes as yes or no options.
Checkboxes are not to be used for on and off options. Use a toggle switch instead.
Mobile Usage
On screen-widths smaller than 576px, the width of the checkbox should be set to 100vw.