RadioButton control design guidelines for Windows Phone
July 21, 2014
Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1
A RadioButton control presents at least two related options that are exclusive of one another.
This topic contains the following sections.
Tapping a RadioButton control will activate an option, but tapping it again won’t deactivate it.
Use RadioButton controls to add clarity and weight to very important options in your app.
Use RadioButton controls to present between two and seven options that are related, but not necessarily opposite.
Because RadioButton controls must be used in groups of at least two, they require more screen space than their sibling controls. Given their space requirements, use RadioButton controls when the options being presented are important enough to command more screen space and where the clarity of the choice demands very explicit options.
Too many RadioButton controls can interfere with quick decision-making. Consider using other controls, unless these options deserve extra attention from the user.
Unlike the CheckBox control, which operates as a switch between two options, RadioButton controls present all available options as their own discrete control. If possible, try to use simpler controls, like the CheckBox or ListBox control. You may want to consider these controls under the following circumstances:
If there are only two options and they’re natural opposites, use a single CheckBox control, such as for “on” and “off.”
For numeric data with a large number of options, use a ListBox control.
If the numeric values are contiguous, use a Slider control.
Don’t use a RadioButton control to:
Display other windows, such as a dialog box.
Dynamically show or hide other controls that are related to the selected option.
RadioButton controls present their options explicitly to avoid slowing down the user, so they should:
Intentionally draw the user’s complete attention to an important set of options or choices.
Reserve illumination, effects, and animations for the selected state; in the unselected state, RadioButton controls should appear unused or inactive.
Appear in their own view when possible, to avoid distracting the user from an important decision, and to cut down on clutter.
Carry short, succinct labels for each control.
Use strong sans-serif typefaces, make button labels at least 12 pixels in height. Make sure that the label is legible from all angles and sizes.
We encourage you to use creative visual designs for the RadioButton control. Windows Phone users typically expect to interact directly with the content or typography subject to a control, so if you can represent a group of options diagrammatically, or with succinct textual buttons, we suggest you investigate this option. Just remember that a RadioButton control should always show a visual reaction when selected, and make it clear which of a group of options is currently in effect.