Checkbox Preview
Checkboxes let people select multiple options from a group or switch a single option on or off.
To restrict someone to picking one option, try a radio group or dropdown. Checkboxes don't trigger an immediate change and require a submission step, like selecting a button. If you need a component that has immediate effect, try a switch.
Resources
Layout
Single
Use a single checkbox when there’s a yes or no choice to make.
Group
Use a checkbox group when someone can select multiple options. It’s best to limit checkbox groups to seven options. If you have more than seven, consider splitting them into separate groups to make them easier to scan or tuck them away in a combobox or dropdown.
Behavior
Indeterminate state
If one checkbox can control a subset of options, selecting or clearing the parent checkbox selects or clears all of the children. Use an indeterminate state to show when some, but not all, of the options are selected.
Create a visual separation between parent and child checkboxes to increase scannability. For example, indenting the children makes it easy to infer what will happen if someone selects the parent.
Accessibility
Checkbox groups should be associated with a descriptive label component. Do this by rendering a separate label and either nesting the checkbox within it or using for and id attributes to associate the elements.
Passing the label prop within the checkbox provides a text label for single checkboxes.
Content
- Group label (optional) describes a group of checkboxes.
- Checkbox label (required) clearly communicates what will happen if the checkbox is selected.
Keep it short and clear
Checkbox labels should be concise and scannable. Use sentence fragments instead of full sentences and steer clear of multiple sentences unless it’s necessary.
Avoid labels that make a negative statement, which can be confusing. Stick with statements that make it obvious that checked means yes.
Capitalize the first word and skip the period
Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide. Don’t use end punctuation unless the checkbox label requires multiple sentences.
When to make it personal
It’s common, but not required, to use first person pronouns (I, me, my) to show someone’s control over an action or to distinguish a person’s content from someone else’s content. For more information, see Person in the Microsoft Writing Style Guide.
Group options for scannability
Use a label component to describe a group of checkboxes. If there are selection requirements, include them in the label.
The options in a checkbox group should follow a consistent structure. For example, options should be all nouns or all verbs. Mixing structure makes a list harder to scan. Try not to repeat words in each option. Instead, include repeated words in the group label to keep the options concise.
Logical order
List options in a logical order, like smallest to largest, or simplest to most complex. If safety and security are factors, list options from safest to riskiest to help prevent loss of data or system access.
If you list options in alphabetical order, keep in mind the order may change if the text is localized.