Radio button
Radio buttons are used when there is a list of two or more options that are mutually exclusive. When a user chooses a new item, the previous choice is automatically deselected.
Overview
Keyboard Interactions
A group of radio buttons takes a single tab stop. The default selection will always take focus. Users can change the selected radio button by using the arrow keys. Pressing tab again will move focus out of the radio button group to the next component.
Development considerations
Use fieldset and legend. Group related radio buttons together with <fieldset>
and describe the group with <legend>
.
Use proper labels and attributes. Each radio button should have a <label>
. Associate the two by matching the <label>
’s for attribute to the <input>
’s id
attribute.