Radio Button

A radio button toggles a selected option on or off. When the radio button is checked the option is on; when cleared it is off. Radio buttons are grouped with one or more additional options, only one of which can be in the on state at a given time, similar to the channel presets on old car radios (hence the name "radio button").

Whenever you have two or more mutually exclusive options that users can toggle on or off.

Radio buttons must always be placed within a containing form block and wrapped within a label tag. Two radio buttons can be placed next to each other (side by side) on the same HTML line (example 1). Three or more radio buttons in a group must be stacked on top of each other in separate lines (example 2)

When placing radio buttons side by side, the label element follows the input element (see example 1). When stacking radio buttons, a class of "stacked" is applied to the containing cell, and the label element wraps the input element (see example 2).

The following guidelines come from the Microsoft UX Guide:

• Is the control used to choose one option from a set of mutually exclusive choices? If not, use another control. To choose multiple options, use check boxes, a multiple-selection list or a check box list instead.
• Is the number of options between two and seven? Since the screen space used is proportional to the number of options, keep the number of options in a group between two and seven. For eight or more options, use a drop-down list or single-selection list.
• Would a check box be a better choice? If there are only two options, you could use a single check box instead. However, check boxes are suitable only for turning a single option on or off, whereas radio buttons can be used for completely different alternatives. If both solutions are possible: use radio buttons if the meaning of the cleared check box isn't completely obvious.