Checkbox Guidelines

Use Checkboxes when a list of options is given and the user may select any number of choices - zero, one, or several. A Checkbox can also be stand-alone. Use it as a single option that the user can select or leave unselected.

Best practices

A stand-alone Checkbox should:

• Let the user select or deselect a single option.
• Let the user see an already made selection that cannot be undone by turning into disabled state.
• Have a clear group label that describes what the selection is about. Consider using subheader to break up a long list of checkboxes into logical groups. This makes the choices faster to scan and easier to understand.
• Have their labels positioned on the right side of the boxes.
• Let users interact with them by clicking on either the box itself or its label.
• Be clearly labelled with a few words in a single line of text.
• Be prepared to be validated.
• Only apply their effect on submitting (should it be intentional by the user or automatic). Until submission they are in an interim state.
• Also be able to take immediate effect, like displaying an interface element, but shouldn’t activate processes.

Checkboxes in a list should:

• Let the user select multiple choices from a list of options.
• Work independently from each other in a list, so checking one box doesn't uncheck another.
• Align vertically to emphasise the connection between the options but separate the items visually. More than one column is acceptable if the list is so long that it requires scrolling when the comparison of elements is necessary.
• Follow an intentional logic upon ordering, for example frequency of use.

Try to avoid:

• Letting Checkboxes trigger actions.
• Using them for switching between two states immediately, like on/off. Use the Switch component instead.
• Sorting items in alphabetical order. It could make localisation difficult.
• Using list of Checkboxes when there are mutually exclusive options and the user must select exactly one choice, use Radio buttons instead.
• Overwhelming the UI with high amount of options. Use Multiselect component with search instead.
• Aligning items horizontally, because they can make the affiliation of boxes and labels indistinct.

Content guidelines

Checkbox labels should:

• Start with a capital letter.
• Not end in punctuation unless they form sentences.
• Have positive and active wording, so that it's clear what will happen if the user turns on the Checkbox. Avoid cases when the user has to the check the box in order for something not to happen.
• Avoid overlapping choices. e.g. Age of contacts: 0-18, 18-35 - Where will be 18 years olds sorted?