For radio buttons used for selecting a single option from a list of mutually exclusive options, see Radio Buttons
For binary selections that take immediate effects, see Toggle.
Also see: Checkboxes, radio buttons, or toggle?
Anatomy
- Selector: Allows the user to select an option in the list
- Label: Descriptive text detailing the item a user can select or unselect
- Feedback: (Optional) Text to help the user understand context or provide error messaging
Usage Guidelines
When to use this component
- Use checkboxes when it's possible to select one or more option(s).
- When there is one checkbox, a label is usually not necessary. When there are two or more checkboxes, labels are recommended.
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several.
For grouped checkboxes use a Fieldset component.
A stand-alone checkbox is used for a single option that the user can turn on or off.
When not to use this component
- Don't use the checkbox for mutually exclusive single-select choices. Use the radio button instead.
- Don’t use checkboxes to activate features, launch actions, or trigger immediate effects. Use a Toggle or Button instead.
Best Practices
- Checkbox label should always clearly describe what will happen if the specific option is chosen. Best practices is to keep labels brief.
- Checkboxes should not have any immediate effects. The checkbox selection takes effect when the user presses a submit button (e.g. in a form) or other event. If you need the selection to have an immediate effect, use the Toggle component instead.
- If a checkbox requires a link the link should be at the end of label, in order to avoid having a trigger inside of another trigger.
Use hint to provide additional information about checkbox.
Don't hide additional information behind tooltips or icons.
Use checkboxes when it's possible to select more than one option.
Don't use the checkbox for mutually exclusive single-select choices. Use the radio button instead.
General Component Behaviors
- Related checkboxes can be grouped together. Use a Fieldset for grouping.
- Each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
- Checkboxes can be unselected, selected, or indeterminate depending on the user's selection.
- A checkbox can be selected by clicking on the selector or the item text.
If a checkbox is required, a user must select at least one option.
Indeterminate state should primarily be used for tables, or other bulk selected interfaces and not in forms or grouped checkboxes.
Checkboxes can provide help or error feedback to a user when necessary.
States
Content Guidelines
Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox. In other words, avoid negations such as "Don't send me more email," which would mean that the user would have to check the box in order for something not to happen. Don’t write checkbox labels in the form of a question.
- Write checkbox labels so that users know both what will happen if they check a particular box, and what will happen if they leave it unchecked.
- If you can't do this, it might be better to use two radio buttons — one for having the feature on, and one for having it off — and write clear labels for each of the two cases.
- Don’t write checkbox labels in the form of a question.
For further information, see the Content Styleguide.