Checkboxes

Notes

  • use checkboxes to select either on/off toggles or multiple selections
  • make it clear with words when users can select multiple options
<!-- Start: @checkboxes--default -->
<div class="form-group">
    <fieldset>
        <legend class="heading-medium">Which types of waste do you transport regularly?</legend>
        <p>Select all that apply:</p>

        <label class="block-label" for="question-1">
      <input id="question-1" type="checkbox" value="1">
      Waste from animal carcasses
    </label>

        <label class="block-label" for="question-2">
      <input id="question-2" type="checkbox" value="2">
      Waste from mines or quarries
    </label>

        <label class="block-label" for="question-3">
      <input id="question-3" type="checkbox" value="3">
      Farm or agricultural waste
    </label>

    </fieldset>
</div>
<!-- End: @checkboxes--default -->
 
 <div class="form-group">
  <fieldset>
    <legend class="heading-medium">{{ questionText }}</legend>
    <p>Select all that apply:</p>
    {% for option in options %}
    <label class="block-label" for="{{ id }}-{{ option.value }}">
      <input id="{{ id }}-{{ option.value }}" type="checkbox" value="{{ option.value }}">
      {{ option.label }}
    </label>
    {% endfor %}
  </fieldset>
 </div>
 
{
  "@checkboxes--default": {
    "id": "question",
    "questionText": "Which types of waste do you transport regularly?",
    "options": [
      {
        "label": "Waste from animal carcasses",
        "value": 1
      },
      {
        "label": "Waste from mines or quarries",
        "value": 2
      },
      {
        "label": "Farm or agricultural waste",
        "value": 3
      }
    ]
  }
}