Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Nunjucks HTML indentation: Text input #4707

Merged
merged 4 commits into from
Feb 1, 2024
Merged

Fix Nunjucks HTML indentation: Text input #4707

merged 4 commits into from
Feb 1, 2024

Conversation

colinrotherham
Copy link
Contributor

Text input changes, split out from #4448 to partially resolve #3211

Similar to the _actionLink() and _summaryCard() macros in Summary list, I've added _inputElement() and _affixItem() macros to flatten the HTML indent level back to 2 spaces

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 31, 2024 •
edited
Loading

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.45 KiB
dist/govuk-frontend-development.min.js 38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs 3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.38 KiB

Modules

File Size
all.mjs 70.32 KiB
components/accordion/accordion.mjs 21.67 KiB
components/button/button.mjs 4.7 KiB
components/character-count/character-count.mjs 21.24 KiB
components/checkboxes/checkboxes.mjs 5.83 KiB
components/error-summary/error-summary.mjs 6.57 KiB
components/exit-this-page/exit-this-page.mjs 16.08 KiB
components/header/header.mjs 4.46 KiB
components/notification-banner/notification-banner.mjs 4.93 KiB
components/radios/radios.mjs 4.83 KiB
components/skip-link/skip-link.mjs 4.39 KiB
components/tabs/tabs.mjs 10.16 KiB

View stats and visualisations on the review app

Action run for bd93180

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 31, 2024 •
edited
Loading

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
index 1fe274edf..2cd25bebd 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
index d38cc5ab7..3805b7680 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="bday-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-day" name="bday-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-day" name="bday-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="bday-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-month" name="bday-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-month" name="bday-month" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
index 9fb95e68f..2809765ef 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
@@ -5,7 +5,7 @@
         <label class="govuk-label govuk-date-input__label" for="dob-day">
           Day
         </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
@@ -13,7 +13,7 @@
         <label class="govuk-label govuk-date-input__label" for="dob-month">
           Month
         </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
@@ -21,7 +21,7 @@
         <label class="govuk-label govuk-date-input__label" for="dob-year">
           Year
         </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
       </div>
     </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
index 75533a495..4fb458f4f 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
index f4e7fdcdd..1b2199e90 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-day" name="dob-with-autocomplete-day" type="text" autocomplete="bday-day" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-day" name="dob-with-autocomplete-day" type="text" autocomplete="bday-day" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-month" name="dob-with-autocomplete-month" type="text" autocomplete="bday-month" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-month" name="dob-with-autocomplete-month" type="text" autocomplete="bday-month" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-autocomplete-attribute-year" name="dob-with-autocomplete-year" type="text" autocomplete="bday-year" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-autocomplete-attribute-year" name="dob-with-autocomplete-year" type="text" autocomplete="bday-year" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
index 1fe274edf..2cd25bebd 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
index e22199562..fd4338d2f 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
@@ -15,7 +15,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -23,7 +23,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -31,7 +31,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
index 903a665c9..ca1c73b3b 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
@@ -15,7 +15,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -23,7 +23,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -31,7 +31,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
index c6c654be0..478bd737e 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
@@ -15,7 +15,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -23,7 +23,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -31,7 +31,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
index 9af78dbee..0e6216de2 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
@@ -15,7 +15,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -23,7 +23,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -31,7 +31,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
index 0e6b11395..cde68fcc9 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
index 0403e99e5..3c0db4647 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-day" name="dob-with-input-attributes-day" type="text" inputmode="numeric" data-example-day="day">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-day" name="dob-with-input-attributes-day" type="text" inputmode="numeric" data-example-day="day">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-month" name="dob-with-input-attributes-month" type="text" inputmode="numeric" data-example-month="month">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-month" name="dob-with-input-attributes-month" type="text" inputmode="numeric" data-example-month="month">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-input-attributes-year" name="dob-with-input-attributes-year" type="text" inputmode="numeric" data-example-year="year">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-input-attributes-year" name="dob-with-input-attributes-year" type="text" inputmode="numeric" data-example-year="year">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
index daf4c3dce..410a435d3 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
@@ -12,7 +12,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-day">
             Day
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -20,7 +20,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-month">
             Month
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -28,7 +28,7 @@
           <label class="govuk-label govuk-date-input__label" for="dob-year">
             Year
           </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
         </div>
       </div>
     </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-default.html b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
index 47a4ce680..6114d0567 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-example">
     National Insurance number
   </label>
-<input class="govuk-input" id="input-example" name="test-name" type="text">
+  <input class="govuk-input" id="input-example" name="test-name" type="text">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
index 7b7dbd37f..78c7b362f 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-with-autocomplete-attribute">
     Postcode
   </label>
-<input class="govuk-input" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
+  <input class="govuk-input" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
index 8f59ae228..e025b5b9c 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
@@ -8,5 +8,5 @@
   <p id="input-with-error-message-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Error message goes here
   </p>
-<input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
+  <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
index 1a70cb5c5..cd0d70677 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-with-extra-letter-spacing">
     National insurance number
   </label>
-<input class="govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing" id="input-with-extra-letter-spacing" name="" type="text" value="QQ 12 34 56 C">
+  <input class="govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing" id="input-with-extra-letter-spacing" name="" type="text" value="QQ 12 34 56 C">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
index c0df11de1..e0271580f 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
@@ -5,5 +5,5 @@
   <div id="input-with-hint-text-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
+  <input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
index fc69566f8..307e576f3 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
@@ -4,5 +4,5 @@
       National Insurance number
     </label>
   </h1>
-<input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
+  <input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
index 1fd8410dd..56d710a54 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-example">
     National Insurance number
   </label>
-<input class="govuk-input" id="input-example" name="test-name" type="text">
+  <input class="govuk-input" id="input-example" name="test-name" type="text">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
index 97035256a..c79d05dc6 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-with-pattern-attribute">
     Numbers only
   </label>
-<input class="govuk-input" id="input-with-pattern-attribute" name="numbers-only" type="number" pattern="[0-9]*">
+  <input class="govuk-input" id="input-with-pattern-attribute" name="numbers-only" type="number" pattern="[0-9]*">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
index ee1a4a619..28cee4dd3 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
@@ -2,7 +2,9 @@
   <label class="govuk-label" for="input-with-prefix-suffix">
     Cost per item, in pounds, per household member
   </label>
-<div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per household member</div>
-</div>
+  <div class="govuk-input__wrapper">
+    <div class="govuk-input__prefix" aria-hidden="true">£</div>
+    <input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text">
+    <div class="govuk-input__suffix" aria-hidden="true">per household member</div>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
index 97cd90a99..15c8a1d64 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
@@ -5,7 +5,9 @@
   <p id="input-with-prefix-suffix-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Error message goes here
   </p>
-<div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input govuk-input--error" id="input-with-prefix-suffix" name="cost" type="text" aria-describedby="input-with-prefix-suffix-error"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
-</div>
+  <div class="govuk-input__wrapper">
+    <div class="govuk-input__prefix" aria-hidden="true">£</div>
+    <input class="govuk-input govuk-input--error" id="input-with-prefix-suffix" name="cost" type="text" aria-describedby="input-with-prefix-suffix-error">
+    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
index 60ed71d7c..3bf04a745 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
@@ -2,7 +2,9 @@
   <label class="govuk-label" for="input-with-prefix-suffix">
     Cost per item, in pounds
   </label>
-<div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input govuk-input--width-5" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
-</div>
+  <div class="govuk-input__wrapper">
+    <div class="govuk-input__prefix" aria-hidden="true">£</div>
+    <input class="govuk-input govuk-input--width-5" id="input-with-prefix-suffix" name="cost" type="text">
+    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
index c46d567db..31ba8ea6a 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
@@ -2,7 +2,9 @@
   <label class="govuk-label" for="input-with-prefix-suffix">
     Cost per item, in pounds
   </label>
-<div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
-</div>
+  <div class="govuk-input__wrapper">
+    <div class="govuk-input__prefix" aria-hidden="true">£</div>
+    <input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text">
+    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
index 9c5cdf1e1..acee3d2f3 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
@@ -2,6 +2,8 @@
   <label class="govuk-label" for="input-with-prefix">
     Amount, in pounds
   </label>
-<div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix" name="amount" type="text"></div>
+  <div class="govuk-input__wrapper">
+    <div class="govuk-input__prefix" aria-hidden="true">£</div>
+    <input class="govuk-input" id="input-with-prefix" name="amount" type="text">
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
index 6ffcb89e5..d606bfee1 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-with-spellcheck-disabled">
     Spellcheck is disabled
   </label>
-<input class="govuk-input" id="input-with-spellcheck-disabled" name="spellcheck" type="text" spellcheck="false">
+  <input class="govuk-input" id="input-with-spellcheck-disabled" name="spellcheck" type="text" spellcheck="false">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
index c87ae3176..c3190bc02 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
@@ -2,5 +2,5 @@
   <label class="govuk-label" for="input-with-spellcheck-enabled">
     Spellcheck is enabled
   </label>
-<input class="govuk-input" id="input-with-spellcheck-enabled" name="spellcheck" type="text" spellcheck="true">
+  <input class="govuk-input" id="input-with-spellcheck-enabled" name="spellcheck" type="text" spellcheck="true">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
index c011b2880..2403b0759 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
@@ -2,6 +2,8 @@
   <label class="govuk-label" for="input-with-suffix">
     Weight, in kilograms
   </label>
-<div class="govuk-input__wrapper"><input class="govuk-input" id="input-with-suffix" name="weight" type="text"><div class="govuk-input__suffix" aria-hidden="true">kg</div>
-</div>
+  <div class="govuk-input__wrapper">
+    <input class="govuk-input" id="input-with-suffix" name="weight" type="text">
+    <div class="govuk-input__suffix" aria-hidden="true">kg</div>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
index b293a9775..bb84b59db 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-10-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
+  <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
index f09349d2f..7978d0114 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-2-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
+  <input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
index e617374ed..f6b3344b2 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-20-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
+  <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
index 5d926a3c6..1af64164f 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-3-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
+  <input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
index d4628c077..e20eed1b7 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-30-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
+  <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
index 8eac25f93..e6e5a7050 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-4-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
+  <input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
index 6bdf63d20..1d4d2c6f5 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
@@ -5,5 +5,5 @@
   <div id="input-width-5-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
+  <input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
 </div>

Action run for bd93180

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 31, 2024 •
edited
Loading

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
index 37a8b43a3..f7ffeda7c 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "complete question",
@@ -42,7 +42,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "day and month",
@@ -71,7 +71,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"bday-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your birthday?\n    </legend>\n    <div id=\"bday-hint\" class=\"govuk-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"govuk-date-input\" id=\"bday\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-day\" name=\"bday-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-month\" name=\"bday-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"bday-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your birthday?\n    </legend>\n    <div id=\"bday-hint\" class=\"govuk-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"govuk-date-input\" id=\"bday\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-day\" name=\"bday-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"bday-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-month\" name=\"bday-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "month and year",
@@ -100,7 +100,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      When did you move to this property?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      When did you move to this property?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with errors only",
@@ -132,7 +132,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with errors and hint",
@@ -167,7 +167,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with error on day input",
@@ -203,7 +203,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-day-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-day-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with error on month input",
@@ -239,7 +239,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-month-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-month-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with error on year input",
@@ -275,7 +275,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-year-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-year-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with default items",
@@ -294,7 +294,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with optional form-group classes",
@@ -316,7 +316,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with autocomplete values",
@@ -352,7 +352,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with input attributes",
@@ -394,7 +394,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "classes",
@@ -405,7 +405,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -418,7 +418,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with empty items",
@@ -429,7 +429,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "custom pattern",
@@ -445,7 +445,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "custom inputmode",
@@ -462,7 +462,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with nested name",
@@ -483,7 +483,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n          Day[dd]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n          Month[mm]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n          Year[yyyy]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n          Day[dd]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n          Month[mm]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n          Year[yyyy]\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with id on items",
@@ -507,7 +507,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "suffixed id",
@@ -528,7 +528,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with values",
@@ -553,7 +553,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with hint and describedBy",
@@ -572,7 +572,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with error and describedBy",
@@ -591,7 +591,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-error\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n    </p>\n    <div class=\"govuk-date-input\" id=\"dob-errors\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "fieldset html",
@@ -606,7 +606,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your <b>date of birth</b>?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n            Day\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n            Month\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n            Year\n          </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your <b>date of birth</b>?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "items with classes",
@@ -630,7 +630,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "items without classes",
@@ -651,7 +651,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index 9f482a66c..b7dbefda6 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -13,7 +13,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n  <input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
         },
         {
             "name": "with hint text",
@@ -30,7 +30,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
         },
         {
             "name": "with error message",
@@ -50,7 +50,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
         },
         {
             "name": "with width-2 class",
@@ -68,7 +68,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>"
         },
         {
             "name": "with width-3 class",
@@ -86,7 +86,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>"
         },
         {
             "name": "with width-4 class",
@@ -104,7 +104,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>"
         },
         {
             "name": "with width-5 class",
@@ -122,7 +122,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>"
         },
         {
             "name": "with width-10 class",
@@ -140,7 +140,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>"
         },
         {
             "name": "with width-20 class",
@@ -158,7 +158,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>"
         },
         {
             "name": "with width-30 class",
@@ -176,7 +176,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>"
         },
         {
             "name": "with label as page heading",
@@ -192,7 +192,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n  </h1>\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n  </h1>\n  <input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
         },
         {
             "name": "with optional form-group classes",
@@ -209,7 +209,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n  <input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
         },
         {
             "name": "with autocomplete attribute",
@@ -224,7 +224,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n  <input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
         },
         {
             "name": "with pattern attribute",
@@ -240,7 +240,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n  <input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
         },
         {
             "name": "with spellcheck enabled",
@@ -256,7 +256,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n  <input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
         },
         {
             "name": "with spellcheck disabled",
@@ -272,7 +272,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n  <input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
         },
         {
             "name": "with prefix",
@@ -289,7 +289,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\">\n  </div>\n</div>"
         },
         {
             "name": "with suffix",
@@ -306,7 +306,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n  </div>\n</div>"
         },
         {
             "name": "with prefix and suffix",
@@ -326,7 +326,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n</div>"
         },
         {
             "name": "with prefix and long suffix",
@@ -346,7 +346,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n  </div>\n</div>"
         },
         {
             "name": "with prefix and suffix and error",
@@ -369,7 +369,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n</div>"
         },
         {
             "name": "with prefix and suffix and width modifier",
@@ -390,7 +390,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n</div>"
         },
         {
             "name": "with extra letter spacing",
@@ -405,7 +405,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n<input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n  <input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
         {
             "name": "classes",
@@ -420,7 +420,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
         },
         {
             "name": "custom type",
@@ -435,7 +435,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n  <input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
         },
         {
             "name": "value",
@@ -450,7 +450,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n  <input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
         {
             "name": "with describedBy",
@@ -465,7 +465,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"test-target-element\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n  <input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"test-target-element\">\n</div>"
         },
         {
             "name": "attributes",
@@ -482,7 +482,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
         },
         {
             "name": "hint with describedBy",
@@ -500,7 +500,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-hint-describedby-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-hint-describedby-hint\">\n</div>"
         },
         {
             "name": "error with describedBy",
@@ -518,7 +518,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-describedby-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-describedby-error\">\n</div>"
         },
         {
             "name": "with error and hint",
@@ -538,7 +538,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
         },
         {
             "name": "with error, hint and describedBy",
@@ -559,7 +559,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
         },
         {
             "name": "inputmode",
@@ -574,7 +574,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n  <input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
         },
         {
             "name": "with prefix with html as text",
@@ -591,7 +591,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\">\n  </div>\n</div>"
         },
         {
             "name": "with prefix with html",
@@ -608,7 +608,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n    <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\">\n  </div>\n</div>"
         },
         {
             "name": "with prefix with classes",
@@ -626,7 +626,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\">\n  </div>\n</div>"
         },
         {
             "name": "with prefix with attributes",
@@ -646,7 +646,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n    <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\">\n  </div>\n</div>"
         },
         {
             "name": "with suffix with html as text",
@@ -663,7 +663,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n  </div>\n</div>"
         },
         {
             "name": "with suffix with html",
@@ -680,7 +680,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n</div>"
         },
         {
             "name": "with suffix with classes",
@@ -698,7 +698,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n    <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n</div>"
         },
         {
             "name": "with suffix with attributes",
@@ -718,7 +718,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n  <div class=\"govuk-input__wrapper\">\n    <input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n  </div>\n</div>"
         }
     ]
 }

Action run for bd93180

@colinrotherham colinrotherham mentioned this pull request Jan 31, 2024
Closed
@colinrotherham colinrotherham force-pushed the nunjucks-formatting-text-input branch from 5471585 to 5edd402 Compare January 31, 2024 13:04
romaricpascal
romaricpascal reviewed Feb 1, 2024
View reviewed changes
packages/govuk-frontend/src/govuk/components/input/template.njk
Comment on lines +63 to +75
{%- if hasPrefix or hasSuffix %}
<div class="govuk-input__wrapper">
{% if hasPrefix %}
{{- _affixItem(params.prefix, "prefix") | indent(2, true) }}
{% endif %}
{{ _inputElement(params) }}
{% if hasSuffix %}
{{- _affixItem(params.suffix, "suffix") | indent(2, true) }}
{% endif %}
</div>
{% else %}
{{ _inputElement(params) }}
{% endif %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linking how the encapsulation makes the structure very apparent and easier to follow than the {%- if} triggering the rendering of opening/closing tags 😍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, same! It helped me understand it too

packages/govuk-frontend/src/govuk/components/input/template.njk
Comment on lines +12 to +28
{%- macro _inputElement(params) -%}
<input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default("text", true) }}"
{%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
{%- if params.value %} value="{{ params.value }}"{% endif %}
{%- if params.disabled %} disabled{% endif %}
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
{%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
{%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
{%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{%- endmacro -%}

{%- macro _affixItem(affix, type) %}
<div class="govuk-input__{{ type }} {%- if affix.classes %} {{ affix.classes }}{% endif %}" aria-hidden="true" {%- for attribute, value in affix.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{{- affix.html | safe | trim | indent(4) if affix.html else affix.text -}}
</div>
{%- endmacro -%}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nunjucks is not where I'm the most familiar, are there any side effects to defining macros each time an input is rendered?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very little I imagine

It's the approach we started taking with Summary list, and now Button and Accordion:

govuk-frontend/packages/govuk-frontend/src/govuk/components/summary-list/template.njk

Line 1 in 8eeca8e

{%- macro _actionLink(action, cardTitle) %}

govuk-frontend/packages/govuk-frontend/src/govuk/components/summary-list/template.njk

Line 13 in 8eeca8e

{%- macro _summaryCard(params) %}

govuk-frontend/packages/govuk-frontend/src/govuk/components/button/template.njk

Line 23 in 8eeca8e

{%- macro _startIcon() %}

govuk-frontend/packages/govuk-frontend/src/govuk/components/accordion/template.njk

Line 3 in 8eeca8e

{%- macro _accordionItem(params, item, index) %}

@colinrotherham colinrotherham force-pushed the nunjucks-formatting-errors branch from faf934a to 74d326a Compare February 1, 2024 11:27
Base automatically changed from nunjucks-formatting-errors to main February 1, 2024 11:37
@colinrotherham colinrotherham force-pushed the nunjucks-formatting-text-input branch from 5edd402 to bd93180 Compare February 1, 2024 11:39
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4707 February 1, 2024 11:39 Inactive
@colinrotherham colinrotherham merged commit f5737e5 into main Feb 1, 2024
46 checks passed
@colinrotherham colinrotherham deleted the nunjucks-formatting-text-input branch February 1, 2024 11:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@romaricpascal romaricpascal romaricpascal approved these changes

Assignees
No one assigned
Labels
nunjucks
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Review use indent in our templates
3 participants
@colinrotherham @romaricpascal @govuk-design-system-ci