Radio buttons

Radio buttons are a type of question format. They require users to pick only one option from a list. For example, for a true or false question, the user may only select either true or false.

Radio buttons decrease the chance of user error or not understanding the options.

HTML

<form action="/form-handler" method="post" novalidate>
      <div class="hc-form-group">
        <fieldset class="hc-fieldset">
          <legend class="hc-fieldset__legend">Where do you live?</legend>
          <div class="hc-radios" data-module="hc-radios">

            <div class="hc-radios__item">
              <input
                class="hc-radios__input"
                id="hennepin"
                name="whereDoYouLive"
                type="radio"
                value="hennepin"
              />
              <label
                class="hc-field-label hc-radios__label"
                for="hennepin"
              >
                Hennepin county
              </label>
            </div>

            <div class="hc-radios__item">
              <input
                class="hc-radios__input"
                id="otherCounty"
                name="whereDoYouLive"
                type="radio"
                value="otherCounty"
              />
              <label
                class="hc-field-label hc-radios__label"
                for="otherCounty"
              >
                A county in Minnesota that is not Hennepin County
              </label>
            </div>

            <div class="hc-radios__item">
              <input
                class="hc-radios__input"
                id="outsideMN"
                name="whereDoYouLive"
                type="radio"
                value="outsideMN"
              />
              <label
                class="hc-field-label hc-radios__label"
                for="outsideMN"
              >
                A US state that is not Minnesota
              </label>
            </div>

            <div class="hc-radios__item">
              <input
                class="hc-radios__input"
                id="outsideUS"
                name="whereDoYouLive"
                type="radio"
                value="outsideUS"
              />
              <label
                class="hc-field-label hc-radios__label"
                for="outsideUS"
              >
                Outside of the US
              </label>
            </div>

          </div>
        </fieldset>
      </div>
    </form>

A PrimeNG radio buttons component example.

Import

Label

When to use

To only allow one answer: for example, when giving a choice of “yes” or “no” for release of information.
To toggle between showing and hiding a field: for example, a true or false boolean that shows or hides a field.

When not to use

For lists of more than six options.
With limited screen space (use a select component but beware of usability issues).
For questions with more than one answer (use a checkbox component).

Open all

Accessibility for radio buttons

Group related radio buttons with <fieldset> and describe the group with <legend>.
Assign each radio button a <label>. Match the <for> attribute of the <label> to the <id> attribute of the <input>.
Always place a radio button to the left of its <label> for people using screen magnifiers.

Best practices for radio buttons

Set the aria-checked attribute to true for a selected radio button.
Set the aria-checked attribute to false for an unselected radio button.
Ensure enough space on the target area for touch screens. Consider using the tile variant for larger touch targets.
Default answers can create bias or alienate a user. So set them with caution.
To let a user select zero options or change their mind on an answer, include a radio button that says "None of the above."

Open all