template.njk

{% from "../textarea/macro.njk" import govukTextarea %}
{% from "../hint/macro.njk" import govukHint %}

<div class="govuk-character-count" data-module="govuk-character-count"
{%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
{%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
  {{ govukTextarea({
    id: params.id,
    name: params.name,
    describedBy: params.id + '-info',
    rows: params.rows,
    value: params.value,
    formGroup: params.formGroup,
    classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes),
    label: {
      html: params.label.html,
      text: params.label.text,
      classes: params.label.classes,
      isPageHeading: params.label.isPageHeading,
      attributes: params.label.attributes,
      for: params.id
    },
    hint: params.hint,
    errorMessage: params.errorMessage,
    attributes: params.attributes
  }) }}
  {{ govukHint({
    text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
    id: params.id + '-info',
    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
    attributes: {
      'aria-live': 'polite'
    }
  }) }}
</div>