diff --git a/app/views/govuk_publishing_components/components/_date_input.html.erb b/app/views/govuk_publishing_components/components/_date_input.html.erb
index 38a76668ea..93cd0d114a 100644
--- a/app/views/govuk_publishing_components/components/_date_input.html.erb
+++ b/app/views/govuk_publishing_components/components/_date_input.html.erb
@@ -1,7 +1,7 @@
 <%
   add_gem_component_stylesheet("date-input")
 
-  id ||= "input-#{SecureRandom.hex(4)}"
+  date_input_id ||= "input-#{SecureRandom.hex(4)}"
   name ||= nil
   items ||= [
     { :name => "day", :width => 2 },
@@ -16,9 +16,7 @@
   describedby ||= nil
   has_error ||= error_message || error_items.any?
 
-  css_classes = %w(gem-c-date-input govuk-date-input)
-  form_group_css_classes = %w(govuk-form-group)
-  form_group_css_classes << "govuk-form-group--error" if has_error
+  date_css_classes = %w(gem-c-date-input govuk-date-input)
 
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
@@ -31,9 +29,14 @@
     aria_described_by << describedby if describedby
     aria_described_by = aria_described_by.join(" ")
   end
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-form-group")
+  component_helper.add_class("govuk-form-group--error") if has_error
+
 %>
 
-<%= content_tag :div, class: form_group_css_classes do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <% fieldset_content = capture do %>
     <% if hint %>
       <%= render "govuk_publishing_components/components/hint", {
@@ -51,7 +54,7 @@
       } %>
     <% end %>
 
-    <%= tag.div class: css_classes, id: id do %>
+    <%= tag.div class: date_css_classes, id: date_input_id do %>
       <% items.each do |item| %>
         <%= tag.div class: "govuk-date-input__item" do %>
           <%= render "govuk_publishing_components/components/input", {
diff --git a/app/views/govuk_publishing_components/components/docs/date_input.yml b/app/views/govuk_publishing_components/components/docs/date_input.yml
index 2039682b85..2f4fb806d1 100644
--- a/app/views/govuk_publishing_components/components/docs/date_input.yml
+++ b/app/views/govuk_publishing_components/components/docs/date_input.yml
@@ -1,5 +1,6 @@
 name: Form date input
 description: Use the date input component to help users enter a memorable date or one they can easily look up.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   Inputs in the component must:
 
@@ -69,3 +70,8 @@ examples:
           name: dob-blwyddyn
           width: 4
           value: 1980
+  with_custom_date_id_value:
+    description: |
+      A custom id can be specified on the element that contains the date inputs. If omitted, a randomised id prefixed with `input-` will be used, for example `input-6c4c5730`.
+    data:
+      date_input_id: "hello_world"