UCLA Design System

Radio Group

Radio groups 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

Radio Buttons Anatomy

1. Title (required)

2. Radio Button (required)

3. Label (required)

Radio groups can be either horizontal or vertical. When radio button selection is required it should be reflected in the fieldset label.

Radio Buttons Variation

Examples

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Radio input (default)</legend>
    <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>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Radio input (default vertical)</legend>
    <div class="ucla-field">
      <div class="ucla-field__control ucla-field__radio-vertical">
        <label class="ucla-field__radio-label" for="exampleRadioVertical1">
            <input id="exampleRadioVertical1" class="ucla-field__radio" type="radio" name="radio-vertical" value="radio1">
            Radio 1
          </label>
          <label class="ucla-field__radio-label" for="exampleRadioVertical2">
            <input id="exampleRadioVertical2" class="ucla-field__radio" type="radio" name="radio-vertical" value="radio2">
            Radio 2
          </label>
      </div>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Radio input (warning)</legend>
    <div class="ucla-field ucla-is-warning" aria-describedby="uclaRadioWarning">
      <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>
      <p class="ucla-field__help ucla-field__radio-checkbox-help-has-icon" id="uclaRadioWarning">You must choose a selection</p>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
  <legend class="ucla-fieldset__legend">Radio input (error)</legend>
  <div class="ucla-field ucla-is-error" aria-describedby="uclaRadioError">
    <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>
    <p class="ucla-field__help ucla-field__radio-checkbox-help-has-icon" id="uclaRadioError">You must choose a selection</p>
  </div>
</fieldset>

<fieldset class="ucla-fieldset">
  <legend class="ucla-fieldset__legend">Radio input (disabled)</legend>
  <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>
</fieldset>

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.