Checkbox
[This documentation is preliminary and is subject to change.]
.png "Windows app: checkbox states")
Windows app: checkbox states
.png "Windows Phone app: checkbox states")
Windows Phone app: checkbox states
Control description
Typically, a checkbox 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 checkbox will be neither unchecked nor checked, but instead it will be in what’s called an indeterminate state. For example, a checkbox’s checked state is indeterminate when it represents a collection of sub-choices with values that are mixed.
Usage guidance
A checkbox can be used alone to present the user with a single binary choice. Or checkboxes can be used in groups. Unlike radio buttons, where a group of radio buttons represents a single choice, each check box in a group represents a separate, independent choice. You can also use a single checkbox control to disable or enable a set of related controls beside it.
Don’t use a checkbox to:
- Perform commands.
- Display other windows, such as a dialog box.
Appearance and interaction
A checkbox has a box, a check mark and an indeterminate mark (one or neither of which may be currently visible), and also typically some text content. The checked state indicates the value that’s currently in effect.
As the user interacts with it, a checkbox gives feedback by changing its state and therefore its appearance. Normal, pressed, unchecked, checked, and disabled are examples of checkbox states.
A user taps the checkbox to toggle it to the opposite value.
Design guidelines
- The purpose and current state of a checkbox should be clear.
- The checkbox text content is best limited to no more than two lines.
- The text content is best worded as a statement that the check mark makes true, and the absence of a check mark makes false.
- If the text content is dynamic, consider how the button will resize and what will happen to visuals around it.
- 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.
- All that the indeterminate state tells the user is that some sub-choices are on and some are off. So, when you know a checkbox may be indeterminate, design the UI so that the user can get to those sub-choices to see what they’re set to.
Here are examples of proper and improper use of a checkbox.
| Incorrect | Correct |
|---|---|
.png "Example of incorrect use of a checkbox control") |
.png "Example of correct use of a checkbox control") |
In this example, a checkbox isn’t the right control to use, because what is meant by unchecking the box (the opposite of Landscape) is not clear. You could use two radio buttons instead – Landscape and Portrait. |
In this example, a checkbox is the right control for this choice because the two options meant by unchecked or checking the box are clear. |
Examples
.png "A sreenshot illustrating the standard checkbox control")