Guidelines for checkbox controls (Windows Store apps)
A checkbox toggles an option on or off, or selects or deselects an item. A user can check or uncheck by tapping, clicking, or pressing the space bar on the keyboard. Most checkboxes have two states, checked and unchecked, but some checkboxes support a third, indeterminate state.
Use checkboxes to present users with a binary choice, one or more options that are not mutually exclusive, or a mixed choice.
Use a single checkbox for a binary yes or no choice.
For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action. You can delay committing a checkbox interaction (as part of a form submit, for example) while you should immediately commit a toggle switch interaction. Also, only checkboxes allow for multi-selection.
Create a group of checkboxes when users can select any combination of options.
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 checkbox 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 checkbox's indeterminate state to represent a mixed choice. One example of a mixed choice checkbox is a "Select all" checkbox that becomes indeterminate when a user selects some, but not all, sub-items.
For more info, see:
Enclose the checkbox within a label with a checkbox so that clicking the label toggles the checkbox. Doing so increases the size of the selection area and makes the checkbox more accessible to touch users.
Use the indeterminate state to indicate that an option is set for some, but not all, child objects.
When using indeterminate state, use subordinate checkboxes to show which options are selected and which are not.
Don't put two checkbox 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 checkbox as an on/off control; use a toggle switch instead.
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 checkbox 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
- Quickstart: Adding checkbox controls
- How to style checkbox controls
- input type="checkbox"
- indeterminate property
- For developers (Windows Store apps using C#/VB/C++ and XAML)
- How to add a checkbox
- Checkbox styles and templates
- Indeterminate event