nhsuk · colinrotherham · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,50 @@
 
 Note: This release was created from the `support/10.x` branch.
 
+### :new: **New features**
+
+#### Add date input `day`, `month` and `year` options
+
+We've updated the date input component to add individual `day`, `month` and `year` Nunjucks options.
+
+These new options can be used to partially override the defaults. For example, setting `error: true` on the year item no longer requires all other item defaults to be set:
+
+```patch
+  {{ dateInput({
+    fieldset: {
+      legend: {
+        text: "What is your date of birth?",
+        size: "l",
+        isPageHeading: true
+      }
+    },
+-   items: [
+-     {
+-       name: "dob-day",
+-       label: "Day",
+-       width: 2
+-     },
+-     {
+-       name: "dob-month",
+-       label: "Month",
+-       width: 2
+-     },
+-     {
+-       name: "dob-year",
+-       label: "Year",
+-       width: 4,
+-       error: true
+-     }
+-   ]
++   ],
++   year: {
++     error: true
++   }
+  }) }}
+```
+
+This was added in [pull request #1869: Add date input `day`, `month` and `year` options](https://github.com/nhsuk/nhsuk-frontend/pull/1869).
+
 ### :wrench: **Fixes**
 
 - [#1867: Update macro options JSON to include release metadata](https://github.com/nhsuk/nhsuk-frontend/pull/1867)

diff --git a/packages/nhsuk-frontend-review/src/examples/translated.njk b/packages/nhsuk-frontend-review/src/examples/translated.njk
@@ -93,6 +93,29 @@
         }
       }) }}
 
+      {{ dateInput({
+        fieldset: {
+          legend: {
+            text: "Beth yw eich dyddiad geni?",
+            size: "l",
+            isPageHeading: true
+          }
+        },
+        hint: {
+          text: "Er enghraifft, 31 3 1980"
+        },
+        id: "with-translations-date",
+        day: {
+          label: "Dydd"
+        },
+        month: {
+          label: "Mis"
+        },
+        year: {
+          label: "Blwyddyn"
+        }
+      }) }}
+
       {{ passwordInput({
         label: {
           text: 'Cyfrinair',

diff --git a/packages/nhsuk-frontend/src/nhsuk/components/date-input/fixtures.mjs b/packages/nhsuk-frontend/src/nhsuk/components/date-input/fixtures.mjs
@@ -20,6 +20,30 @@ const fixtures = {
     },
     screenshot: true
   },
+  'with translations': {
+    context: {
+      fieldset: {
+        legend: {
+          text: 'Beth yw eich dyddiad geni?',
+          size: 'l',
+          isPageHeading: true
+        }
+      },
+      hint: {
+        text: 'Er enghraifft, 31 3 1980'
+      },
+      id: 'example',
+      day: {
+        label: 'Dydd'
+      },
+      month: {
+        label: 'Mis'
+      },
+      year: {
+        label: 'Blwyddyn'
+      }
+    }
+  },
   'with values': {
     context: {
       fieldset: {
@@ -41,6 +65,22 @@ const fixtures = {
     }
   },
   'day and month': {
+    context: {
+      fieldset: {
+        legend: {
+          text: 'What is your birthday?',
+          size: 'l',
+          isPageHeading: true
+        }
+      },
+      hint: {
+        text: 'For example, 5 12'
+      },
+      id: 'example',
+      year: false
+    }
+  },
+  'day and month (with items)': {
     context: {
       fieldset: {
         legend: {
@@ -65,7 +105,7 @@ const fixtures = {
       ]
     }
   },
-  'day and month (empty item)': {
+  'day and month (with empty item)': {
     context: {
       fieldset: {
         legend: {
@@ -92,6 +132,22 @@ const fixtures = {
     }
   },
   'month and year': {
+    context: {
+      fieldset: {
+        legend: {
+          text: 'When did you start your job?',
+          size: 'l',
+          isPageHeading: true
+        }
+      },
+      hint: {
+        text: 'For example, 11 2023'
+      },
+      id: 'example',
+      day: false
+    }
+  },
+  'month and year (with items)': {
     context: {
       fieldset: {
         legend: {
@@ -116,7 +172,7 @@ const fixtures = {
       ]
     }
   },
-  'month and year (empty item)': {
+  'month and year (with empty item)': {
     context: {
       fieldset: {
         legend: {
@@ -142,7 +198,7 @@ const fixtures = {
       ]
     }
   },
-  'month and year with values': {
+  'month and year with pre-defined fields': {
     context: {
       fieldset: {
         legend: {
@@ -155,20 +211,59 @@ const fixtures = {
         text: 'For example, 11 2023'
       },
       id: 'example',
+      day: false,
+      month: {
+        value: '11'
+      },
+      year: {
+        value: '2023'
+      }
+    }
+  },
+  'month and year with pre-defined fields overriding values': {
+    context: {
+      fieldset: {
+        legend: {
+          text: 'When did you start your job?',
+          size: 'l',
+          isPageHeading: true
+        }
+      },
+      hint: {
+        text: 'For example, 11 2023'
+      },
+      id: 'example',
+      day: false,
+      month: {
+        value: '11'
+      },
+      year: {
+        value: '2023'
+      },
       values: {
         month: '8',
         year: '2024'
-      },
-      items: [
-        {
-          name: 'month',
-          width: 2
-        },
-        {
-          name: 'year',
-          width: 4
+      }
+    }
+  },
+  'month and year with pre-defined values': {
+    context: {
+      fieldset: {
+        legend: {
+          text: 'When did you start your job?',
+          size: 'l',
+          isPageHeading: true
         }
-      ]
+      },
+      hint: {
+        text: 'For example, 11 2023'
+      },
+      id: 'example',
+      day: false,
+      values: {
+        month: '8',
+        year: '2024'
+      }
     }
   },
   'legend': {

diff --git a/packages/nhsuk-frontend/src/nhsuk/components/date-input/macro-options.mjs b/packages/nhsuk-frontend/src/nhsuk/components/date-input/macro-options.mjs
@@ -192,6 +192,27 @@ const options = {
     released: '1.0.0',
     isComponent: true
   },
+  day: {
+    type: 'object',
+    required: false,
+    description:
+      'Options for the day input within the date input component. See items.',
+    released: '10.5.0'
+  },
+  month: {
+    type: 'object',
+    required: false,
+    description:
+      'Options for the month input within the date input component. See items.',
+    released: '10.5.0'
+  },
+  year: {
+    type: 'object',
+    required: false,
+    description:
+      'Options for the year input within the date input component. See items.',
+    released: '10.5.0'
+  },
   values: {
     type: 'object',
     required: false,

diff --git a/packages/nhsuk-frontend/src/nhsuk/components/date-input/template.njk b/packages/nhsuk-frontend/src/nhsuk/components/date-input/template.njk
@@ -27,27 +27,53 @@
 {#- fieldset is false by default -#}
 {% set hasFieldset = true if params.fieldset else false %}
 
-{%- if params.items | length %}
-  {% set dateInputItems = params.items %}
-{% else %}
-  {% set dateInputItems = [
-    {
-      name: "day",
-      value: params.values.day,
-      width: 2
-    },
-    {
-      name: "month",
-      value: params.values.month,
-      width: 2
-    },
-    {
-      name: "year",
-      value: params.values.year,
-      width: 4
-    }
-  ] %}
-{% endif %}
+{%- set dateInputDay = {
+  id: params.day.id,
+  name: params.day.name if params.day.name else "day",
+  label: params.day.label,
+  error: params.day.error,
+  width: params.day.width if params.day.width else 2,
+  inputmode: params.day.inputmode,
+  value: params.day.value if params.day.value else params.values.day,
+  autocomplete: params.day.autocomplete,
+  pattern: params.day.pattern,
+  classes: params.day.classes,
+  attributes: params.day.attributes
+} if not params.items | length and params.day not in [null, false] -%}
+
+{%- set dateInputMonth = {
+  id: params.month.id,
+  name: params.month.name if params.month.name else "month",
+  label: params.month.label,
+  error: params.month.error,
+  width: params.month.width if params.month.width else 2,
+  inputmode: params.month.inputmode,
+  value: params.month.value if params.month.value else params.values.month,
+  autocomplete: params.month.autocomplete,
+  pattern: params.month.pattern,
+  classes: params.month.classes,
+  attributes: params.month.attributes
+} if not params.items | length and params.month not in [null, false] -%}
+
+{%- set dateInputYear = {
+  id: params.year.id,
+  name: params.year.name if params.year.name else "year",
+  label: params.year.label,
+  error: params.year.error,
+  width: params.year.width if params.year.width else 4,
+  inputmode: params.year.inputmode,
+  value: params.year.value if params.year.value else params.values.year,
+  autocomplete: params.year.autocomplete,
+  pattern: params.year.pattern,
+  classes: params.year.classes,
+  attributes: params.year.attributes
+} if not params.items | length and params.year not in [null, false] -%}
+
+{%- set dateInputItems = (params.items if params.items | length else [
+  dateInputDay,
+  dateInputMonth,
+  dateInputYear
+]) | select("mapping") -%}
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
@@ -79,7 +105,6 @@
     {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
     {% endif %}
     {% for item in dateInputItems %}
-    {% if item %}
     <div class="nhsuk-date-input__item">
       {{ input({
         label: {
@@ -99,7 +124,6 @@
         attributes: item.attributes
       }) | trim | indent(6) }}
     </div>
-    {% endif %}
     {% endfor %}
     {% if params.formGroup.afterInputs %}
     {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}