Guidelines for check boxes
A check box is used to select or deselect action items, and can be used for a single list item or for multiple list items. The control has three selections states: unselected, selected, and indeterminate. The indeterminate state appears when a collection of sub-choices have both unselected and selected states.
Use a single check box for a binary yes/no choice, such as with a "Remember me?" login scenario or with a terms of service agreement.
Use multiple check boxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
For a binary choice, the main difference between a check box and a toggle switch is that the check box is for status and the toggle switch is for action. You can delay committing a check box interaction (as part of a form submit, for example) while you should immediately commit a toggle switch interaction. Also, only check boxes allow for multi-selection.
Create a group of check boxes when users can select any combination of options.
Unlike radio buttons, where a group of radio buttons represents a single choice, each check box in a group represents a separate, independent choice. When there is more than one option but only one can be selected, use a radio button instead.
When an option applies to more than one object, you can use a check box to indicate whether the option applies to all, some, or none of those objects. When the option applies to some, but not all, of those objects, use the check box's indeterminate state to represent a mixed choice. One example of a mixed choice check box is a "Select all" check box that becomes indeterminate when a user selects some, but not all, sub-items.
For more info, see:
- Verify that the purpose and current state of the check box is clear. Verify that it is clear what is meant by the clearing the check box. For example, if you use a check box for Landscape orientation, it is not clear that clearing the check box means Portrait orientation. You could use two radio buttons instead – Landscape and Portrait.
- Limit check box text content to no more than two lines.
- Word the text content as a statement that the check mark makes true, and the absence of a check mark makes false.
- Use the default font unless your brand guidelines tell you to use another.
- If there are several choices to present, consider using a scroll viewer control with a layout panel inside it.
Use the indeterminate state to indicate that an option is set for some, but not all, sub-choices.
When using indeterminate state, use subordinate check boxes to show which options are selected and which are not. Design the UI so that the user can get see the sub-choices.
- If the text content is dynamic, consider how the control will resize and what will happen to visuals around it.
Don't put two check box groups next to each other, or users won't be able to tell which options belong with which group. Use group labels to separate the groups.
Don't use a check box as an on/off control or to perform a command; use a toggle switch instead.
- Don't use a check box to display other controls, such as a dialog box.
Don't use the indeterminate state to represent a third state. The indeterminate state is used to indicate that an option is set for some, but not all, sub-choices. So, don't allow users to set an indeterminate state directly.
For an example of what not to do, this check box uses the indeterminate state to indicate medium spiciness:
Instead, use a radio button group that has three options: Not spicy, Spicy, and Extra spicy.
(HTML only) Enclose the check box within a label so that clicking the label toggles the check box. Doing so increases the size of the selection area and makes the check box more accessible to touch users.
- For designers
- Guidelines for buttons
- Guidelines for radio buttons
- Guidelines for the select control
- Guidelines for toggle switches
- For developers (XAML)
- How to add a checkbox
- Checkbox styles and templates
- CheckBox class
- Indeterminate event
- For developers (HTML)
- Quickstart: Adding checkbox controls
- How to style checkbox controls
- input type="checkbox" element
- indeterminate property