Back to Snippets List

form - Form Inset Checkboxes

What is your nationality?

Select all options that are relevant to you.

<fieldset class="form-group">
  <legend>
    <span class="form-label-bold">
      What is your nationality?
    </span>
  </legend>
  <p>
    Select all options that are relevant to you.
  </p>
  <div class="form-group-compound">
    <label class="block-label" for="nationality-british">
      <input id="nationality-british" type="checkbox" value="British">
      British (including English, Scottish, Welsh and Northern Irish)
    </label>
    <label class="block-label" for="nationality-irish">
      <input id="nationality-irish" type="checkbox" value="Irish">
      Irish
    </label>
    <label class="block-label" for="nationality-other" data-target="example-different-country">
      <input id="nationality-other" type="checkbox" value="Citizen of a different country">
      Citizen of a different country
    </label>
  </div>
  <div class="panel-indent js-hidden" id="example-different-country">
    <label class="form-label" for="nationality-other-country">Country name</label>
    <input class="form-control" type="text" id="nationality-other-country">
  </div>
</fieldset>

Inset Checkboxes

Inset refers to a single or group of inputs that are optionally shown, if a specific radio/checkbox (hereafter referred to as checkbox) is selected.

One use-case could be; if someone was born outside of the UK, what country where they born in?

They work by the checkbox having a data-target="example-different-country" attribute. It's value matches an ID of an element which is ordinarily hidden. <div class="panel-indent js-hidden" id="example-different-country">


Notes


Changelog

24th August 2015