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. A radio button has two states: checked and not checked.
Radio buttons are so called because they function like the channel presets on radios. Follow these guidelines for adding radio buttons to your Windows Store app.
Is this the right control?
Use radio buttons to present users with two or more mutually exclusive options, as here.
Don’t use radio buttons if there are only two mutually exclusive options that you can combine into a single checkbox. For example, use a checkbox for "I agree" instead of two radio buttons for "I agree" and "I don't agree."
When the user can select multiple options, use a checkbox (input type="checkbox") or select control instead.
Use radio button when you want to draw attention to the selection options by making them all visible. If the default option is recommended for most users in most situations, radio buttons might draw more attention to the options than necessary. If you don't want to call attention to the options or need to save space, use a drop-down list (the select control) instead.
For example, use a drop-down list instead of radio buttons to display available screen resolutions because the user only cares about the current resolution.
Don't use radio buttons when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider control (input type="range") instead.
Dos and don'ts
| Do | Enclose the radio button in a label element so that tapping the label selects the radio button. Enclosing the radio button in a label makes it more accessible to touch users. Place the label text after the radio button control. |
|---|---|
| Place the radio button's label text after the radio buton, not before or above it. | |
| Don't | Don't put more than 8 options in a radio button group. Because the screen space used is proportional to the number of options, keep the number of options in a group between 2 and 7. When you need to present more options, use a select control as a drop-down list or a ListView 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. |
Layout examples
This illustration shows the proper way to position and space radio buttons.
This diagram highlights the sizing and spacing used in the previous illustration.
Related topics
Build date: 11/29/2012
