RadioButton control design guidelines for Windows Phone

  • Article

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

A RadioButton control presents at least two related options that are exclusive of one another.

This topic contains the following sections.

Appearance and action

Note

Tapping a RadioButton control will activate an option, but tapping it again won’t deactivate it.

A RadioButton control indicates that a certain option is in effect, to the exclusion of other options represented by other RadioButton controls in the group.

A user taps a RadioButton control to activate the related option, which automatically clears the other RadioButton controls in the group.

Standard use

Note

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.

Use RadioButton controls on wizard pages to emphasize the importance of the options being presented, even if a CheckBox control is also acceptable.

Choosing the right control

Note

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:

  • There are more than eight RadioButton controls in a group. Use a single-select ListBox control instead.

  • If there are only two options and they’re natural opposites, use a single CheckBox control, such as for “on” and “off.”

  • Use Button controls if the meaning of the cleared RadioButton control isn’t obvious.

  • The values of RadioButton control options shouldn’t be based on context or other data. For data, use a ListBox control.

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

  • Perform commands.

  • Display other windows, such as a dialog box.

  • Dynamically show or hide other controls that are related to the selected option.

Design guidelines

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.

Customization

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.

See Also

Reference

RadioButton