diff --git a/app/views/govuk_publishing_components/components/_character_count.html.erb b/app/views/govuk_publishing_components/components/_character_count.html.erb
index e0d52e611d..1088bc7789 100644
--- a/app/views/govuk_publishing_components/components/_character_count.html.erb
+++ b/app/views/govuk_publishing_components/components/_character_count.html.erb
@@ -4,17 +4,19 @@
   maxwords ||= nil
   threshold ||= nil
   textarea ||= {}
-%>
-<% if maxlength || maxwords %>
-  <%= content_tag :div,
-    class: "gem-c-character-count govuk-character-count",
-    data: {
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-character-count govuk-character-count")
+  component_helper.add_data_attribute({
       module: "govuk-character-count",
       maxlength: maxlength,
       maxwords: maxwords,
       threshold: threshold
-    } do %>
+    })
 
+%>
+<% if maxlength || maxwords %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
 
     <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message">
diff --git a/app/views/govuk_publishing_components/components/docs/character_count.yml b/app/views/govuk_publishing_components/components/docs/character_count.yml
index 88abed5dc9..b854d25fd7 100644
--- a/app/views/govuk_publishing_components/components/docs/character_count.yml
+++ b/app/views/govuk_publishing_components/components/docs/character_count.yml
@@ -2,6 +2,7 @@ name: Form character count
 description: Help users enter text when there is a limit on the number of characters they can type
 govuk_frontend_components:
   - character-count
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   The component must: