Radio buttons

Notes

  • use radio buttons to let users choose a single option from a list
  • for more than two options, radio buttons should be stacked
  • radio buttons with large hit areas are easier to select with a mouse or touch devices
<!-- Start: @radio-buttons--default -->
<div class="form-group">
    <fieldset>
        <legend class="heading-medium">Where do you live?</legend>

        <label class="block-label" for="question-1">
      <input id="question-1" type="radio" name="question" value="1">
      Northern Ireland
    </label>

        <label class="block-label" for="question-2">
      <input id="question-2" type="radio" name="question" value="2">
      Isle of Man or the Channel Islands
    </label>

        <label class="block-label" for="question-3">
      <input id="question-3" type="radio" name="question" value="3">
      I am a British citizen living abroad
    </label>

    </fieldset>
</div>
<!-- End: @radio-buttons--default -->
 
 <div class="form-group">
  <fieldset>
    <legend class="heading-medium">{{ questionText }}</legend>
    {% for option in options %}
    <label class="block-label" for="{{ id }}-{{ option.value }}">
      <input id="{{ id }}-{{ option.value }}" type="radio" name="{{ id }}" value="{{ option.value }}">
      {{ option.label }}
    </label>
    {% endfor %}
  </fieldset>
 </div>
 
{
  "@radio-buttons--default": {
    "id": "question",
    "questionText": "Where do you live?",
    "options": [
      {
        "label": "Northern Ireland",
        "value": 1
      },
      {
        "label": "Isle of Man or the Channel Islands",
        "value": 2
      },
      {
        "label": "I am a British citizen living abroad",
        "value": 3
      }
    ]
  }
}