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 214b9c96cf..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 },
@@ -54,7 +54,7 @@
       } %>
     <% end %>
 
-    <%= tag.div class: date_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 cd44c86b49..2f4fb806d1 100644
--- a/app/views/govuk_publishing_components/components/docs/date_input.yml
+++ b/app/views/govuk_publishing_components/components/docs/date_input.yml
@@ -70,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"