Guidelines for check boxes

Applies to Windows and Windows Phone

Windows app: checkbox states

Windows app: check box states

Windows Phone app: checkbox states

Windows Phone app: check box states

Description

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.

Example

A sreenshot illustrating the standard checkbox control

Is this the right control?

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.

A single check box used for an individual 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.

Selecting multiple options with check boxes

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.

Check boxes used to show a mixed choice

For more info, see:

Dos and don'ts

  • 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:

    An indeterminate check box

    Instead, use a radio button group that has three options: Not spicy, Spicy, and Extra spicy.

    Radio button group with three options: Not spicy, Spicy, and Extra spicy

Related topics

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
CheckBox
Indeterminate event

 

 

Show:
© 2014 Microsoft