diff --git a/packages/govuk-frontend/src/govuk/components/character-count/template.njk b/packages/govuk-frontend/src/govuk/components/character-count/template.njk
index ee1f79dd8f..724bd13ec5 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/character-count/template.njk
@@ -16,7 +16,9 @@
Unlike objects which cannot be modified, Nunjucks can both push to and loop
arrays (as if they were objects) when in `Object.entries()` array format
#}
-{%- set attributes = [] -%}
+{%- set attributes = [
+ ["data-module", "govuk-character-count"]
+] -%}
{% for attribute, value in params.formGroup.attributes %}
{% set attributes = (attributes.push([attribute, value]), attributes) %}
@@ -68,34 +70,32 @@
{% endfor %}
{% endif -%}
-
- {{ govukTextarea({
- id: params.id,
- name: params.name,
- describedBy: params.id + '-info',
- rows: params.rows,
- spellcheck: params.spellcheck,
- value: params.value,
- formGroup: {
- classes: params.formGroup.classes,
- attributes: attributes
- },
- 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,
- info: {
- text: textareaDescriptionTextNoLimit,
- id: params.id + '-info',
- classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
- },
- errorMessage: params.errorMessage,
- attributes: params.attributes
- }) }}
-
+{{ govukTextarea({
+ id: params.id,
+ name: params.name,
+ describedBy: params.id + '-info',
+ rows: params.rows,
+ spellcheck: params.spellcheck,
+ value: params.value,
+ formGroup: {
+ classes: 'govuk-character-count' + (' ' + params.formGroup.classes if params.formGroup.classes),
+ attributes: attributes
+ },
+ 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,
+ info: {
+ text: textareaDescriptionTextNoLimit,
+ id: params.id + '-info',
+ classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
+ },
+ errorMessage: params.errorMessage,
+ attributes: params.attributes
+}) }}