govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    Do you have any access needs?
  </legend>
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items" name="with-divider-and-none-and-conditional-items" type="checkbox" value="accessible-toilets">
      <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items">
        Accessible toilets available
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-2" name="with-divider-and-none-and-conditional-items" type="checkbox" value="braille">
      <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-2">
        Braille translation service available
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-3" name="with-divider-and-none-and-conditional-items" type="checkbox" value="disabled-car-parking">
      <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-3">
        Disabled car parking available
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-4" name="with-divider-and-none-and-conditional-items" type="checkbox" value="another-access-need" data-aria-controls="conditional-with-divider-and-none-and-conditional-items-4">
      <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-4">
        Another access need
      </label>
    </div>
    <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-with-divider-and-none-and-conditional-items-4">
      <label class="govuk-label" for="other-access-needs">Other access needs</label>
<textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>
    </div>
    <div class="govuk-checkboxes__divider">or</div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-6" name="with-divider-and-none-and-conditional-items" type="checkbox" value="none" data-behaviour="exclusive">
      <label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-6">
        None of these
      </label>
    </div>
  </div>
</fieldset>
</div>