Radio input

Allow users to choose a single option among many

Overview #

Use the radio input component to allow users to choose a single option among many.

Examples #

Choose an example

<fieldset class="rvt-fieldset">
  <legend class="rvt-text-bold">Radio input (default)</legend>
  <ul class="rvt-list-plain">
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-1">
        <label for="radio-1-1">Option one</label>
      </div>
    </li>
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-2">
        <label for="radio-1-2">Option two</label>
      </div>
    </li>
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-3" checked disabled>
        <label for="radio-1-3">Option three</label>
      </div>
    </li>
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-4" aria-describedby="radio-1-4-description">
        <label for="radio-1-4">Option one</label>
        <div id="radio-1-4-description" class="rvt-radio__description">This is a description for the radio button.</div>
      </div>
    </li>
  </ul>
</fieldset>

Open in new window Copy link to example

<fieldset class="rvt-fieldset">
  <legend class="rvt-text-bold">Radio input (inline list)</legend>
  <ul class="rvt-list-inline">
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-1">
        <label for="radio-1-1">Option one</label>
      </div>
    </li>
    <li>
      <div class="rvt-radio">
        <input type="radio" name="radio-group-1" id="radio-1-2">
        <label for="radio-1-2">Option two</label>
      </div>
    </li>
  </ul>
</fieldset>

Elements #

Element	Description	Usage	Required	Multiple
Label	Text that appears next to the radio button	Limit to a few words. Keep all labels in a group of radio buttons to a similar length. Write labels using sentence-style capitalization without punctuation. Use positive phrasing that describes what the user is opting into by selecting the radio button.	Label is required	Component may contain only one Label

Usage #

Do

Use to present a choice between mutually exclusive options

Don't

Use to present a list of options that can be toggled on or off—use a list of checkboxes instead
Use to present a long list of options—consider a select input instead