Guidelines and checklist for checkboxes (Windows Store apps)

This topic describes best practices for using checkboxes in Windows Store apps.

A check box is a control that the user can check or uncheck by tapping, clicking, or pressing the space bar on the keyboard. Most check boxes have two states, checked and unchecked, but some check boxes support a third, indeterminate state. Follow these guidelines for adding check boxes to your Windows Store app using C++, C#, or Visual Basic.

Roadmap: How does this topic relate to others? See:

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.

A binary choice

Use a single check box for a yes or no choice.

A single check box used for an individual choice
One or more options that are not mutually exclusive

Create a group of check boxes when users can select any combination of options.

Selecting multiple options with check boxes
Mixed choice

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 boxes intermediate 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 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.

When there is more than one option but only one can be selected, use a radio button instead.

Don't use a check box as an on/off control; use a toggle switch instead.

Do's and don'ts

Do Use the indeterminate state to indicate that an option is set for some, but not all, child objects.
When using indeterminate state, use subordinate check boxes to show which options are selected and which are not.
Don't 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 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, child objects. 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:

Incorrect use of a check box

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

Radio buttons instead of a check box

 

Related topics

CheckBox
Adding and styling controls

 

 

Build date: 12/12/2013

Show:
© 2014 Microsoft