Radio Buttons

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

<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.

To build a radio button, use the following structure:

• .ucla-field__radio-label
  • .ucla-field__radio

There are a couple things to keep in mind.

1. The <input> must be wrapped in the <label>.
2. The name attribute in the <input> must be the same value in order to have only one selection.

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

Field

To add any validation, a .ucla-field wrapper is needed:

<div class="ucla-field">
  <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>

States

To add different states to the radio buttons, a contextual class must be added to the .ucla-field element depending on the state:

Warning

Add the .ucla-is-warning to the .ucla-field element.

<div class="ucla-field ucla-is-warning">
  <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>

Error

Add the .ucla-is-error to the .ucla-field element.

<div class="ucla-field ucla-is-error">
  <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>

Fieldset

The <fieldset> element is used to contain related form controls. The <legend> element acts as a heading to identify the group.

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Radio group</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>

Helper Text

You can add a helper text with the .ucla-field__help class inside the .ucla-field element.

<div class="ucla-field">
    <!-- ... -->
    <p class="ucla-field__help">Helper Text</p>
</div>    

The helper text will change color depending on the state of the radio button. In order to have a corresponding icon to the state, you will need to add a .ucla-field__radio-checkbox-help-has-icon to the .ucla-field__help.

<div class="ucla-field">
    <!-- ... -->
    <p class="ucla-field__help ucla-field__radio-checkbox-help-has-icon">This helper text will have an icon on error and warning state.</p>
</div>    

Disable

For the disabled state, simply add the disabled attribute to both the <label> and the <input> element.

<div class="ucla-field">
  <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>