Checkbox

Best practices

Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

• Forms
Can be used in forms on a full page, in modals/dialogs, or drawers.
• Filtering and batch action
Used to filter data either on a page, in a menu, or within a component.
• Terms and conditions
Toggling checkbox input on or off can indicate whether you agree to the terms.

When to use

• Use for making it possible to choose one or more options from a limited number of options.
• Use for “accepting terms of service” and similar functionality.
• Use in forms to toggle something on or off.

When not to use

• Avoid using when there is more than 10 options to choose from.
• To present a list of options where users/customers can only make a single choice. Use the radio button component instead.

Anatomy

1. Group label (optional): Provides context to a set of checkboxes. Available in Checkbox group component.
2. Checkbox input: A checkbox input indicating the current state. By default it should be unselected.
3. Label: Provides information about a single checkbox option.
4. Helper text (optional): Provides additional details about a single checkbox option.
5. Error text (validation)

Checkbox groups

Stacked

Inline

States

Validation

Content guidelines

Checkbox labels should be clear, accurate and predictable. It should be easy and transparent for the user to understand what they are selecting:

• Use as few words as possible.
• Start with a capital letter.
• Avoid ending in punctuation if it’s a single sentence, word, or a fragment.
• Don’t truncate checkbox label text with an ellipsis.
• Don’t use commas or semicolons at the end of each line.
• When asking customers/users to agree to terms or service, use first person e.g. “I agree to the Terms of Service.”

Multi-line

In situations where text will need to wrap beneath the checkbox, the control and label are top aligned.

Accessibility

Due to accessibility issues with screen readers, links shouldn’t be used inside the form labels. Instead use a different element, like the form helper component.