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,
    spellcheck: params.spellcheck,
    value: params.value,
    formGroup: params.formGroup,
    classes: 'govuk-js-character-count' + (' ' + 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
  }) }}
  {%- set fallbackHintLength = params.maxwords or params.maxlength %}
  {%- set fallbackHintDefault = 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') %}
  {{ govukHint({
    text: (params.fallbackHintText or fallbackHintDefault) | replace('%{count}', fallbackHintLength),
    id: params.id + '-info',
    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
  }) }}
</div>