There are no notes for this item.

<div class="field field--checkbox field--multiplechoice field--exclusive">
    <fieldset>
        <legend class="field__legend mars u-vh">What type of central heating do you have?</legend>
        <div class="field__label venus">Select all that apply:</div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="heating-type" value="gas" id="gas" type="checkbox">
            <label class="label label--inline venus " for="gas">
            Gas
        </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="heating-type" value="electric" id="electric" type="checkbox">
            <label class="label label--inline venus " for="electric">
            Electric
        </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="heating-type" value="solid-fuel" id="solid-fuel" type="checkbox">
            <label class="label label--inline venus " for="solid-fuel">
            Solid fuel
        </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable js-exclusive-checkbox-group" name="heating-type" value="other" id="other" type="checkbox">
            <label class="label label--inline venus " for="other">
            Other
        </label>
        </div>
        <div class="field__label u-mt-s venus" aria-hidden="true">Or</div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable js-exclusive-checkbox" name="heating-type" value="no central heating" id="none" type="checkbox">
            <label class="label label--inline venus " for="none">
            <span class="u-vh">Or,</span> No central heating<span class="u-vh">. Selecting this will uncheck all other checkboxes</span>
        </label>
            <span class="js-exclusive-checkbox-alert u-vh" role="alert" aria-live="polite" data-adjective="deselected"></span>
        </div>
    </fieldset>
</div>
  • Handle: @mutually-exclusive
  • Preview:
  • Filesystem Path: components/02-form-elements/mutually-exclusive/mutually-exclusive.hbs
  • References (1): @label
{
  "options": [
    {
      "option_text": "Gas",
      "option_value": "gas",
      "label_for": "gas",
      "label_text": "Gas",
      "label_inline": true
    },
    {
      "option_text": "Electric",
      "option_value": "electric",
      "label_for": "electric",
      "label_text": "Electric",
      "label_inline": true
    },
    {
      "option_text": "Solid fuel",
      "option_value": "solid-fuel",
      "label_for": "solid-fuel",
      "label_text": "Solid fuel",
      "label_inline": true
    },
    {
      "option_text": "Other",
      "option_value": "other",
      "label_for": "other",
      "label_text": "Other",
      "label_inline": true
    }
  ]
}