Multiple radio buttons

Use radio buttons to offer the user a number of options, allowing the user to select only one option.

Suitable for use in similar situations to the select menu, this method is best for a smaller list of choices.

This is actually a construction of several elements covered elsewhere, with the addition of the radio button field which behaves similarly to the checkbox.

To comply with accessibility guidelines, each field must be explicitly and uniquely identified and labeled, and to work with the template style sheets, some spans and classes must be added.

<div class="array">
<span class="question">This is a radio array.</span>
<fieldset class="answer">
  <legend>A radio array:</legend>
  <label for="q8a"><input type="radio" name="q8" id="q8a" value="Unique option 1" />Unique option 1</label>
  <label for="q8b"><input type="radio" name="q8" id="q8b" value="Unique option 2" />Unique option 2</label>
  <label for="q8c"><input type="radio" name="q8" id="q8c" value="Unique option 3" />Unique option 3</label>
  <label for="q8d"><input type="radio" name="q8" id="q8d" value="Unique option 4" />Unique option 4</label>
  <label for="q8e"><input type="radio" name="q8" id="q8e" value="Unique option 5" />Unique option 5</label>
</fieldset>
</div>

To enable validation for this type of field you need to add the required class to the enclosing div and a span of class required-flag to the question span.

<div class="array required">
<span class="question">This is a radio array. <span class="required-flag">(required)</span></span>
<fieldset class="answer">
  <legend>A radio array:</legend>
  <label for="q8a"><input type="radio" name="q8" id="q8a" value="Unique option 1" />Unique option 1</label>
  <label for="q8b"><input type="radio" name="q8" id="q8b" value="Unique option 2" />Unique option 2</label>
  <label for="q8c"><input type="radio" name="q8" id="q8c" value="Unique option 3" />Unique option 3</label>
  <label for="q8d"><input type="radio" name="q8" id="q8d" value="Unique option 4" />Unique option 4</label>
  <label for="q8e"><input type="radio" name="q8" id="q8e" value="Unique option 5" />Unique option 5</label>
</fieldset>
</div>