Radio

Radio buttons allow users to select only one option from a group. Unlike checkboxes, selecting one automatically deselects any previously selected option in the same group.

Default Radio

A simple radio button group where one option is checked by default.

<fieldset>
  <div class="input input--radio">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Radio

A disabled radio button group prevents users from interacting with the options.

<fieldset disabled>
  <div class="input input--radio">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Radio

To highlight an error, use the .invalid class to visually indicate the issue.

<fieldset class="invalid">
  <div class="input input--radio">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>