Radio Group

Selector

input[type="radio"] + label

A radio group is a collection of options presented as radio inputs. They are used to collect input from the user where they can only choose one option from the set. It's important not to make an unselected radio group a valid value as users aren't able to return to reset the radio buttons once they are selected. Instead, use the an extra option, labelled "None" or something similar to make that an option. To this end it's usually good practice to select a radio button by default for the user..

The radio buttons should be surrounded in a <fieldset /> to semantically and visually group them. The first child of the <fieldset /> should then be a <legend /> that provides a label for the radio group. Each radio button should also have the same name.

A radio group and a select can both be used for similar purposes - getting a selection from the user. The differences between the two are mostly design related. A select puts emphasis on the selected option while a radio group places emphasis equally. Selects are also better suited for more options since each option in a radio group takes up screen space.

States

Like other interactive controls, the radio button squishes slightly when clicked.