A checkbox is a control that the 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. Follow these guidelines for adding checkboxes to your Windows Store app.
Is this the right control?
Use checkboxes 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 checkbox for a yes or no choice. |  |
| One or more options that are not mutually exclusive Create a group of checkboxes when users can select any combination of options. |  |
| Mixed choice 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 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.
When there is more than one option but only one can be selected, use a radio button instead.
Don't use a checkbox as an on/off control; use a toggle switch instead.
Do's and don'ts
| Do | 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 | 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 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.
|
Related topics
Build date: 11/29/2012
