Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label.
When to use
To display a single selection. When users need to select only one option from a set of mutually exclusive choices. It differs from a Select Menu in that all choices are ever-present.
Anatomy
1. Radio Button (required)
2. Label (required)
Examples
<h2 class="headline-text__md mb-3">Default</h2>
<div class="ucla-field">
<div class="ucla-field__control">
<label class="ucla-field__radio-label" for="exampleRadio1">
<input id="exampleRadio1" class="ucla-field__radio" type="radio" name="radio" value="radio1">
Radio 1
</label>
<label class="ucla-field__radio-label" for="exampleRadio2">
<input id="exampleRadio2" class="ucla-field__radio" type="radio" name="radio" value="radio2">
Radio 2
</label>
</div>
</div>
<h2 class="headline-text__md mb-3">Warning</h2>
<div class="ucla-field ucla-is-warning">
<div class="ucla-field__control">
<label class="ucla-field__radio-label" for="exampleRadioWarning1">
<input id="exampleRadioWarning1" class="ucla-field__radio" type="radio" name="radio-warning" value="radio1">
Radio 1
</label>
<label class="ucla-field__radio-label" for="exampleRadioWarning2">
<input id="exampleRadioWarning2" class="ucla-field__radio" type="radio" name="radio-warning" value="radio2">
Radio 2
</label>
</div>
</div>
<h2 class="headline-text__md mb-3">Error</h2>
<div class="ucla-field ucla-is-error">
<div class="ucla-field__control">
<label class="ucla-field__radio-label" for="exampleRadioError1">
<input id="exampleRadioError1" class="ucla-field__radio" type="radio" name="radio-error" value="radio1">
Radio 1
</label>
<label class="ucla-field__radio-label" for="exampleRadioError2">
<input id="exampleRadioError2" class="ucla-field__radio" type="radio" name="radio-error" value="radio2">
Radio 2
</label>
</div>
</div>
<h2 class="headline-text__md mb-3">Disabled</h2>
<div class="ucla-field">
<div class="ucla-field__control">
<label class="ucla-field__radio-label" for="exampleRadioDisabled1" disabled>
<input id="exampleRadioDisabled1" class="ucla-field__radio" type="radio" name="radio-disabled" value="radio1" disabled>
Radio 1
</label>
<label class="ucla-field__radio-label" for="exampleRadioDisabled2" disabled>
<input id="exampleRadioDisabled2" class="ucla-field__radio" type="radio" name="radio-disabled" value="radio2" disabled>
Radio 2
</label>
</div>
</div>Best Practices
Use the label as a target. Users should be able to select either the text label or the radio button to select or deselect an option.
List items vertically. Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.
Use adequate spacing. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.
Set default values with caution. Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.
Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.
Use a logical order. Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.