Guidelines for check boxes
Windows app: check box states
Windows Phone app: check box states
Typically, a check box gives the user a way to register a choice between two discrete and opposite options. For example, the choice may be whether to subscribe to a newsletter, or whether to select each email in a list. In rare cases a check box will be neither unchecked nor checked, but instead it will be in what’s called an indeterminate state. For example, a check box’s checked state is indeterminate when it represents a collection of sub-choices with values that are mixed.
As the user interacts with it, a check box gives feedback by changing its state and therefore its appearance. Normal, pressed, unchecked, checked, and disabled are examples of check box states.
A user taps the check box to toggle it to the opposite value.
Use check boxes to present users with a binary choice, one or more options that are not mutually exclusive, or a mixed choice.
Use a single check box for a binary yes or no choice.
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.
Enclose the check box within a label with a check box 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.
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.
- For designers
- Guidelines for buttons
- Guidelines for radio buttons
- Guidelines for the select control
- Guidelines for toggle switches
- For developers (HTML)
- Quickstart: Adding checkbox controls
- How to style checkbox controls
- input type="checkbox"
- indeterminate property
- For developers (XAML)
- How to add a checkbox
- Checkbox styles and templates
- Indeterminate event