The checkbox is a form input for users to choose one or more options from the list of selections.
Dos
- always make sure each checkbox has a short, distinct and indicative checkbox label
- use checkbox labels as click targets (clicking the label will select that option)
- arrange them vertically, in a single column layout
- group related fields
- order logically
- indicate whether the input group is optional or mandatory
- make use of helper text if there are further directions or hints the users may need in completing their goal
- write specific and clear error messages, so users understand how to properly address and recover from the error
Don'ts
- don't add them without grouping first, in a logical order
- don't restrict the number of checkboxes that can be ticked at any time
- don't nest elements under the checkbox - keep all the options on the same level
When to use
- use in any situation where the input information is known to the organisation
- when users need to select options or toggle settings
- in forms with multiple non-exclusive options
- in search filters
- to turn a setting option on or off
When not to use
- do not use it when you have mutually exclusive items
- do not use it if the checkbox selection will perform an action