Radio button

[This documentation is preliminary and is subject to change.]

Windows app: radio buttons

Windows Phone app: radio buttons

Control description

Radio buttons give the user a way to register a choice of at most one option from a set of options that are related but mutually exclusive. Radio buttons are named for the channel preset buttons on a radio. For example, the choice may be setting a filter level to Strict, or Moderate, or Off.

Usage guidance

You can use radio buttons to add clarity and weight to very important options in your app. Generally, there should be between 2 and 7 radio buttons in a group. Use radio buttons when the options being presented are important enough to command more screen space and where the clarity of the choice demands very explicit options.

Radio buttons emphasize all options equally, and that may draw more attention to the options than necessary. Too many radio buttons can interfere with quick decision-making. Consider using other controls, unless the options deserve extra attention from the user. For instance, use radio button controls on wizard pages to emphasize the importance of the options being presented, even if a checkbox control would work.

Unlike a checkbox—with which the user either makes a selection, or indicates that the label’s statement is true by checking and false by unchecking—a set of radio buttons present all available options in what is essentially one composite control. Before using radio buttons, it’s best to consider alternatives such as a checkbox, drop-down list, or other list control. Factors that indicate against using radio buttons include:

• There are more than 8 options. Consider a single-select list box.
• The available options are based on the app’s current context, or can otherwise vary dynamically. Use a single-select list box.
• The available options are numeric values, especially if there are many options. Consider a single-select list box.
• The numeric values are contiguous. Consider a slider.
• There are exactly 2 options where one can be implied as 'not' the other—such as "on" and "off." Use a single checkbox or a toggle switch.

Don’t use radio buttons to:

• Perform commands.
• Display other windows, such as a dialog box.
• Dynamically show or hide other controls that are related to the selected option.

Appearance and interaction

By default, a radio button consists of two concentric circles—the inner one filled (and shown when the radio button is checked), the outer one stroked—and some text content. Radio buttons indicate that a certain option is in effect, to the exclusion of other options represented by the other radio buttons in the group.

The visuals that make up a radio button can be customized, and you’re encouraged to be creative. Users are comfortable interacting directly with the content of an app. So you may choose to show the actual content on offer, whether that’s presented with graphics or as subtle textual toggle buttons. Just remember that a radio button should always give visual feedback when it’s tapped, and it should be clear which one in the group of options is currently in its checked state.

As the user interacts with them, radio buttons give feedback by changing state and therefore appearance. Normal, pressed, unchecked, checked, and disabled are examples of checkbox states. A user taps a radio button to activate the related option. Tapping an activated option doesn’t deactivate it, but tapping another option transfers activation to that option.

:

Windows: A group of radio buttons behaves like a single control when accessed via the keyboard. Only the selected choice is accessible using the Tab key but users can cycle through the group using arrow keys.

Design guidelines

• The purpose and current state of a set of radio buttons should be clear.
• Radio buttons should draw the user’s attention to the full set of alternatives in an important choice.
• Reserve visual effects and animations for touch feedback, and for the checked state; in the unchecked state, radio button controls should appear unused or inactive (but not disabled).
• A radio button’s text content is best limited to a single line, although you can customize the radio button’s visuals to display a description of the option in smaller font size below the main line of text.
• 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.

Examples

Related topics

input type=radio element | input type=radio object

RadioButton class