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..a72c724b01 100644
--- a/app/views/govuk_publishing_components/components/_date_input.html.erb
+++ b/app/views/govuk_publishing_components/components/_date_input.html.erb
@@ -15,6 +15,8 @@
error_items ||= []
describedby ||= nil
has_error ||= error_message || error_items.any?
+ error_item_names = error_items.group_by { |ei| ei[:name] }.keys.compact_blank
+ has_no_named_errors = error_item_names.none?
css_classes = %w(gem-c-date-input govuk-date-input)
form_group_css_classes = %w(govuk-form-group)
@@ -59,7 +61,7 @@
text: item[:label] || item[:name].capitalize
},
grouped: true,
- has_error: has_error,
+ has_error: error_item_names.include?(item[:name]) || (has_error && has_no_named_errors),
name: name ? (name + "[" + item[:name] + "]") : item[:name],
value: item[:value],
width: item[:width],
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..879a39daef 100644
--- a/app/views/govuk_publishing_components/components/docs/date_input.yml
+++ b/app/views/govuk_publishing_components/components/docs/date_input.yml
@@ -69,3 +69,10 @@ examples:
name: dob-blwyddyn
width: 4
value: 1980
+ with_named_error_items:
+ data:
+ legend_text: "When was your passport issued?"
+ hint: "For example, 27 3 2007"
+ error_items:
+ - name: "year"
+ text: "The date your passport was issued must include a year"
diff --git a/spec/components/date_input_spec.rb b/spec/components/date_input_spec.rb
index f19f545e3b..b640efaacb 100644
--- a/spec/components/date_input_spec.rb
+++ b/spec/components/date_input_spec.rb
@@ -78,6 +78,22 @@ def component_name
assert_select ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-date-input__item .govuk-input--error", 3
end
+ it "renders with named error items" do
+ render_component(
+ legend_text: "What is your date of birth?",
+ error_items: [
+ { name: "day", text: "day-error" },
+ { name: "year", text: "year-error" },
+ ],
+ )
+
+ assert_select(
+ ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-error-message",
+ html: "Error: day-error
year-error",
+ )
+ assert_select ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-date-input__item .govuk-input--error", 2
+ end
+
it "renders with custom items" do
render_component(
legend_text: "What is your date of birth?",