<

Voyager
Voyager

Radio Buttons

Radio buttons present a short list of items where users can select one option.

Group label
HTML Copy 

<fieldset>
    <legend class="qw-legend-radio">Radio button group</legend>
    <div class="qw-radio">
        <input type="radio" name="radio-example-1" id="radio-example-1" value="1" checked />
        <label for="radio-example-1">Option 1</label>
    </div>
    <div class="qw-radio">
        <input type="radio" name="radio-example-1" id="radio-example-2" value="2" />
        <label for="radio-example-2">Option 2</label>
    </div>
<fieldset>

Disabled

Use the disabled attribute to disable a radio.

Group label

Usage notes

  • Use the same value for the name attribute within a group of radio buttons
  • Always have an associated label
  • Be part of a list that includes at least two choices
  • Include mutually exclusive options
  • Be listed in an order that makes logical sense
  • Be organized in into fieldsets
  • Offer six or fewer choices. For seven or more options, consider a select box.
  • Use fieldsets to help users of assistive tech understand the relationship of the choices.