CheckBox control design guidelines for Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

A CheckBox control presents a choice between two discrete and opposite states, typically “on” and “off.”

CheckBox controls

This topic contains the following sections.

• Appearance and action
• Detailed description
• Standard use
• Design guidelines
• Related Topics

Appearance and action

A CheckBox control indicates the value that’s currently in effect. Users tap it to toggle to an opposite value.

Detailed description

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.

Standard use

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.

Design guidelines

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.

• If there are several choices to present, consider using a ScrollViewer control and adding a StackPanel control.

• 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.

Incorrect	Correct
In this example, a CheckBox control isn’t the correct control to use, because the opposite choice from Landscape is not clear. In this case, use a RadioButton control instead 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.

See Also

Reference

CheckBox