Windows Dev Center

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.

Example of check box with four states


A sreenshot illustrating the standard checkbox control

Is this the right control?

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.

A single check box used for an individual choice

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.

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:


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

    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

  • (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.

Related topics

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



© 2015 Microsoft