template.njk

{% from "../error-message/macro.njk" import govukErrorMessage -%}
{% from "../fieldset/macro.njk" import govukFieldset %}
{% from "../hint/macro.njk" import govukHint %}
{% from "../label/macro.njk" import govukLabel %}

{#- If an id 'prefix' is not passed, fall back to using the name attribute
   instead. We need this for error messages and hints as well -#}
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}

{#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
{% set describedBy = params.describedBy if params.describedBy else "" %}
{% if params.fieldset.describedBy %}
   {% set describedBy = params.fieldset.describedBy %}
{% endif %}

{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}

{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
  {% set hintId = idPrefix + '-hint' %}
  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
  {{ govukHint({
    id: hintId,
    classes: params.hint.classes,
    attributes: params.hint.attributes,
    html: params.hint.html,
    text: params.hint.text
  }) | indent(2) | trim }}
{% endif %}
{% if params.errorMessage %}
  {% set errorId = idPrefix + '-error' %}
  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
  {{ govukErrorMessage({
    id: errorId,
    classes: params.errorMessage.classes,
    attributes: params.errorMessage.attributes,
    html: params.errorMessage.html,
    text: params.errorMessage.text,
    visuallyHiddenText: params.errorMessage.visuallyHiddenText
  }) | indent(2) | trim }}
{% endif %}
  <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
    data-module="govuk-checkboxes">
    {% for item in params.items %}
      {% if item %}
        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
        {%- if item.id -%}
          {%- set id = item.id -%}
        {%- else -%}
          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
          {%- if loop.first -%}
            {%- set id = idPrefix %}
          {% else %}
            {%- set id = idPrefix + "-" + loop.index -%}
          {%- endif -%}
        {%- endif -%}
        {% set name = item.name if item.name else params.name %}
        {% set conditionalId = "conditional-" + id %}
        {%- if item.divider %}
          <div class="govuk-checkboxes__divider">{{ item.divider }}</div>
        {%- else %}
          {% set isChecked = item.checked | default(params.values and item.value in params.values) %}
          {% set hasHint = true if item.hint.text or item.hint.html %}
          {% set itemHintId = id + "-item-hint" if hasHint else "" %}
          {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
          {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
            {{-" checked" if isChecked }}
            {{-" disabled" if item.disabled }}
            {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
            {%- if item.behaviour %} data-behaviour="{{ item.behaviour }}"{% endif -%}
            {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
            {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
            {{ govukLabel({
              html: item.html,
              text: item.text,
              classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
              attributes: item.label.attributes,
              for: id
            }) | indent(6) | trim }}
            {% if hasHint %}
            {{ govukHint({
              id: itemHintId,
              classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
              attributes: item.hint.attributes,
              html: item.hint.html,
              text: item.hint.text
            }) | indent(6) | trim }}
            {% endif %}
          </div>
          {% if item.conditional.html %}
            <div class="govuk-checkboxes__conditional{% if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
              {{ item.conditional.html | safe }}
            </div>
          {% endif %}
        {% endif %}
      {% endif %}
    {% endfor %}
  </div>
{% endset -%}

<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
  {% call govukFieldset({
    describedBy: describedBy,
    classes: params.fieldset.classes,
    attributes: params.fieldset.attributes,
    legend: params.fieldset.legend
  }) %}
  {{ innerHtml | trim | safe }}
  {% endcall %}
{% else %}
  {{ innerHtml | trim | safe }}
{% endif %}
</div>