CheckBox control design guidelines for Windows Phone
April 01, 2014
Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1
A CheckBox control presents a choice between two discrete and opposite states, typically “on” and “off.”
This topic contains the following sections.
A CheckBox control indicates the value that’s currently in effect. Users tap it to toggle to an opposite value.
CheckBox controls are used to define a binary state and can be used in groups to display multiple choices from which the user can select one or more choices. A user can tap a CheckBox control or the accompanying text to select an option. The control supports an indeterminate state that can be used to communicate checked and unchecked status simultaneously for a number of underlying items. The CheckBox control supports rest, press, and disabled states for both selected and cleared settings. There is no visible focus state.
Use multiple CheckBox controls in a group to display multiple values and give the user the choice to select more than one value at a time. Use a grouped RadioButton control instead if you want to display multiple values, but restrict the user to selecting only one value at a time.
Use a single CheckBox control to give the user two distinct, obvious, and opposite choices that reflect different states in your app. If the choice isn’t mutually exclusive, but rather a single choice among multiple options, use the more flexible RadioButton or ListBox controls.
CheckBox controls are often used in groups, where more than one option can be selected at once.
In isolation, use a CheckBox control to present a choice between two states or choices that are natural opposites. You can use a CheckBox control to render other, related controls available or unavailable in the same view. Always use a CheckBox control to display clear choices to the user.
Whether you use CheckBox controls alone or in dependent groups, make their purpose and their current state clear. To that end:
CheckBox controls can be used to change the availability (or state) of other, dependent UI elements in the same view.
Always use the system font unless brand guidelines specify otherwise.
We recommend that you limit text for a CheckBox control to either a one- or two-line format to convey the setting in an easily understandable manner. If you find it difficult to generate succinct labels for a CheckBox control, break down the options into RadioButton or ListBox controls.
Try to avoid the use of the indeterminate state because the user could be confused about which of the underlying property items is actually selected or cleared. A more appropriate alternative is to map the data sources for that CheckBox control to separate CheckBox controls, or use a multi-selection list, particularly if a dynamic data set is used.
Here are examples of proper and improper use of a CheckBox control.
In this example, a CheckBox control is the correct control for this option because it presents a clear choice to the user.