Guidelines for radio buttons
Windows app: radio buttons
Windows Phone app: radio buttons
Radio buttons let users select one option from two or more choices. Each option is represented by one radio button; a user can select only one radio button in a radio button group.
Radio buttons are named for the channel preset buttons on a radio.
Use radio buttons to present users with two or more mutually exclusive options, as here.
Radio buttons add clarity and weight to very important options in your app. 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. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a drop-down list instead.
If there are only two mutually exclusive options, combine them into a single checkbox or toggle switch. For example, use a checkbox for "I agree" instead of two radio buttons for "I agree" and "I don't agree."
Don't use radio buttons when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider control instead.
If the available options are based on the app’s current context, or can otherwise vary dynamically, use a single-select list box instead.
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.
- Make sure that the purpose and current state of a set of radio buttons is clear.
- Always give visual feedback when the user taps a radio button.
- Give visual feedback as the user interacts with radio buttons. Normal, pressed, checked, and disabled are examples of radio button 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.
- 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).
- Limit the radio button’s text content to a single line. 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.
- Enclose the radio button in a label element so that tapping the label selects the radio button.
- Place the label text after the radio button control, not before or above it.
- Consider customizing your radio buttons. 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. But we encourage you 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.
- Don't put more than 8 options in a radio button group. When you need to present more options, use a drop-down list, list box, or a list view instead.
- Don't put two radio button groups next to each other. When two radio button groups are right next to each other, it's difficult to determine which buttons belong to which group. Use group labels to separate them.
This illustration shows the proper way to position and space radio buttons.
This diagram highlights the sizing and spacing used in the previous illustration.
- For designers
- Guidelines for buttons
- Guidelines for toggle switches
- Guidelines for checkboxes
- Guidelines for drop-down lists
- Guidelines for list view and grid view controls
- Guidelines for sliders
- Guidelines for the select control
- For developers (HTML)
- input type="radio"
- Adding selection controls
- For developers (XAML)
- Windows.UI.Xaml.Controls RadioButton class
- Adding radio buttons