RubyGems - defra_ruby_template - Versions diffs - 5.11.0 → 6.4.0 - Mend

defra_ruby_template 5.11.0 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1308) hide show

data/node_modules/govuk-frontend/dist/govuk/components/date-input/fixtures.json CHANGED Viewed

@@ -4,18 +4,78 @@
         {
             "name": "default",
             "options": {
-                "id": "dob"
+                "id": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": true,
+            "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=\"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  </fieldset>\n</div>"
+        },
+        {
+            "name": "with translations",
+            "options": {
+                "id": "with-translations",
+                "fieldset": {
+                    "legend": {
+                        "text": "Pryd gafodd eich pasbort ei gyhoeddi?"
+                    }
+                },
+                "hint": {
+                    "text": "Er enghraifft, 27 3 2007"
+                },
+                "day": {
+                    "label": "Dydd"
+                },
+                "month": {
+                    "label": "Mis"
+                },
+                "year": {
+                    "label": "Blwyddyn"
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"with-translations-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      Pryd gafodd eich pasbort ei gyhoeddi?\n    </legend>\n    <div id=\"with-translations-hint\" class=\"govuk-hint\">\n      Er enghraifft, 27 3 2007\n    </div>\n    <div class=\"govuk-date-input\" id=\"with-translations\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-translations-day\">\n            Dydd\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-translations-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-translations-month\">\n            Mis\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-translations-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-translations-year\">\n            Blwyddyn\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-translations-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
-            "name": "complete question",
+            "name": "with values",
             "options": {
-                "id": "dob",
+                "id": "with-values",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "values": {
+                    "day": 31,
+                    "month": 3,
+                    "year": 1980
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"with-values-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"with-values-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\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=\"with-values-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-day\" name=\"day\" type=\"text\" value=\"31\" 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-values-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-month\" name=\"month\" type=\"text\" value=\"3\" 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-values-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-values-year\" name=\"year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+        },
+        {
+            "name": "with values and name prefix",
+            "options": {
+                "id": "with-values-name-prefix",
                 "namePrefix": "dob",
                 "fieldset": {
                     "legend": {
@@ -25,29 +85,78 @@
                 "hint": {
                     "text": "For example, 31 3 1980"
                 },
-                "items": [
-                    {
-                        "name": "day",
-                        "classes": "govuk-input--width-2"
-                    },
-                    {
-                        "name": "month",
-                        "classes": "govuk-input--width-2"
-                    },
-                    {
-                        "name": "year",
-                        "classes": "govuk-input--width-4"
+                "values": {
+                    "dob-day": 31,
+                    "dob-month": 3,
+                    "dob-year": 1980
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"with-values-name-prefix-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"with-values-name-prefix-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"with-values-name-prefix\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-values-name-prefix-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-name-prefix-day\" name=\"dob-day\" type=\"text\" value=\"31\" 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-values-name-prefix-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-name-prefix-month\" name=\"dob-month\" type=\"text\" value=\"3\" 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-values-name-prefix-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-values-name-prefix-year\" name=\"dob-year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+        },
+        {
+            "name": "with values, name prefix and custom names",
+            "options": {
+                "id": "with-values-name-prefix-custom",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
                     }
-                ]
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "day": {
+                    "label": "Day",
+                    "name": "user1-day"
+                },
+                "month": {
+                    "label": "Month",
+                    "name": "user1-month"
+                },
+                "year": {
+                    "label": "Year",
+                    "name": "user1-year"
+                },
+                "values": {
+                    "dob-user1-day": 31,
+                    "dob-user1-month": 3,
+                    "dob-user1-year": 1980
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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=\"with-values-name-prefix-custom-hint\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div id=\"with-values-name-prefix-custom-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"with-values-name-prefix-custom\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"with-values-name-prefix-custom-user1-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-name-prefix-custom-user1-day\" name=\"dob-user1-day\" type=\"text\" value=\"31\" 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-values-name-prefix-custom-user1-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-values-name-prefix-custom-user1-month\" name=\"dob-user1-month\" type=\"text\" value=\"3\" 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-values-name-prefix-custom-user1-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-values-name-prefix-custom-user1-year\" name=\"dob-user1-year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "day and month",
+            "options": {
+                "id": "bday",
+                "namePrefix": "bday",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your birthday?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 5 12"
+                },
+                "year": false
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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": "day and month (using items)",
             "options": {
                 "id": "bday",
                 "namePrefix": "bday",
@@ -72,12 +181,33 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "When did you move to this property?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 3 1980"
+                },
+                "day": false
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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": "month and year (using items)",
             "options": {
                 "id": "dob",
                 "namePrefix": "dob",
@@ -102,7 +232,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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>"
         },
@@ -115,32 +245,82 @@
                         "text": "What is your date of birth?"
                     }
                 },
-                "errorMessage": {
-                    "text": "Error message goes here"
+                "day": {
+                    "error": true
+                },
+                "month": {
+                    "error": true
+                },
+                "year": {
+                    "error": true
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\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--error 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--error 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--error 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 errors only (using classes)",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "day": {
+                    "classes": "govuk-input--error"
+                },
+                "month": {
+                    "classes": "govuk-input--error"
+                },
+                "year": {
+                    "classes": "govuk-input--error"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\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 only (using items)",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
                 },
                 "items": [
                     {
                         "name": "day",
-                        "classes": "govuk-input--width-2 govuk-input--error"
+                        "classes": "govuk-input--width-2",
+                        "error": true
                     },
                     {
                         "name": "month",
-                        "classes": "govuk-input--width-2 govuk-input--error"
+                        "classes": "govuk-input--width-2",
+                        "error": true
                     },
                     {
                         "name": "year",
-                        "classes": "govuk-input--width-4 govuk-input--error"
+                        "classes": "govuk-input--width-4",
+                        "error": true
                     }
                 ]
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\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--error 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--error 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--error 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 errors and hint",
+            "name": "with errors only (using items and classes)",
             "options": {
                 "id": "dob-errors",
                 "fieldset": {
@@ -148,12 +328,6 @@
                         "text": "What is your date of birth?"
                     }
                 },
-                "hint": {
-                    "text": "For example, 31 3 1980"
-                },
-                "errorMessage": {
-                    "text": "Error message goes here"
-                },
                 "items": [
                     {
                         "name": "day",
@@ -171,15 +345,14 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\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",
+            "name": "with error message and hint",
             "options": {
-                "id": "dob-day-error",
-                "namePrefix": "dob-day-error",
+                "id": "dob-errors",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -190,33 +363,18 @@
                 },
                 "errorMessage": {
                     "text": "Error message goes here"
-                },
-                "items": [
-                    {
-                        "name": "day",
-                        "classes": "govuk-input--width-2 govuk-input--error"
-                    },
-                    {
-                        "name": "month",
-                        "classes": "govuk-input--width-2"
-                    },
-                    {
-                        "name": "year",
-                        "classes": "govuk-input--width-4"
-                    }
-                ]
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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-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--error 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--error 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--error 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 on month input",
+            "name": "with error message and hint (using items)",
             "options": {
-                "id": "dob-month-error",
-                "namePrefix": "dob-month-error",
+                "id": "dob-errors",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -235,7 +393,7 @@
                     },
                     {
                         "name": "month",
-                        "classes": "govuk-input--width-2 govuk-input--error"
+                        "classes": "govuk-input--width-2"
                     },
                     {
                         "name": "year",
@@ -245,15 +403,14 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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-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--error 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--error 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--error 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 on year input",
+            "name": "with error on day input",
             "options": {
-                "id": "dob-year-error",
-                "namePrefix": "dob-year-error",
+                "id": "dob-day-error",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -265,32 +422,20 @@
                 "errorMessage": {
                     "text": "Error message goes here"
                 },
-                "items": [
-                    {
-                        "name": "day",
-                        "classes": "govuk-input--width-2"
-                    },
-                    {
-                        "name": "month",
-                        "classes": "govuk-input--width-2"
-                    },
-                    {
-                        "name": "year",
-                        "classes": "govuk-input--width-4 govuk-input--error"
-                    }
-                ]
+                "day": {
+                    "error": true
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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-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--error govuk-input--width-2\" id=\"dob-day-error-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-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=\"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=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
-            "name": "with default items",
+            "name": "with error on day input (using items)",
             "options": {
-                "id": "dob",
-                "namePrefix": "dob",
+                "id": "dob-day-error",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -298,19 +443,36 @@
                 },
                 "hint": {
                     "text": "For example, 31 3 1980"
-                }
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "error": true
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 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--error govuk-input--width-2\" id=\"dob-day-error-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-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=\"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=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
-            "name": "with optional form-group classes",
+            "name": "with error on month input",
             "options": {
-                "id": "dob",
-                "namePrefix": "dob",
+                "id": "dob-month-error",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -319,21 +481,23 @@
                 "hint": {
                     "text": "For example, 31 3 1980"
                 },
-                "formGroup": {
-                    "classes": "extra-class"
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "month": {
+                    "error": true
                 }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 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=\"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--error govuk-input--width-2\" id=\"dob-month-error-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-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=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
-            "name": "with autocomplete values",
+            "name": "with error on month input (using items)",
             "options": {
-                "id": "dob-with-autocomplete-attribute",
-                "namePrefix": "dob-with-autocomplete",
+                "id": "dob-month-error",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -342,35 +506,35 @@
                 "hint": {
                     "text": "For example, 31 3 1980"
                 },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
                 "items": [
                     {
                         "name": "day",
-                        "classes": "govuk-input--width-2",
-                        "autocomplete": "bday-day"
+                        "classes": "govuk-input--width-2"
                     },
                     {
                         "name": "month",
                         "classes": "govuk-input--width-2",
-                        "autocomplete": "bday-month"
+                        "error": true
                     },
                     {
                         "name": "year",
-                        "classes": "govuk-input--width-4",
-                        "autocomplete": "bday-year"
+                        "classes": "govuk-input--width-4"
                     }
                 ]
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 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=\"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--error govuk-input--width-2\" id=\"dob-month-error-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-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=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
-            "name": "with input attributes",
+            "name": "with error on year input",
             "options": {
-                "id": "dob-with-input-attributes",
-                "namePrefix": "dob-with-input-attributes",
+                "id": "dob-year-error",
                 "fieldset": {
                     "legend": {
                         "text": "What is your date of birth?"
@@ -379,35 +543,55 @@
                 "hint": {
                     "text": "For example, 31 3 1980"
                 },
-                "items": [
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "year": {
+                    "error": true
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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=\"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=\"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--error govuk-input--width-4\" id=\"dob-year-error-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+        },
+        {
+            "name": "with error on year input (using items)",
+            "options": {
+                "id": "dob-year-error",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
                     {
                         "name": "day",
-                        "classes": "govuk-input--width-2",
-                        "attributes": {
-                            "data-example-day": "day"
-                        }
+                        "classes": "govuk-input--width-2"
                     },
                     {
                         "name": "month",
-                        "classes": "govuk-input--width-2",
-                        "attributes": {
-                            "data-example-month": "month"
-                        }
+                        "classes": "govuk-input--width-2"
                     },
                     {
                         "name": "year",
                         "classes": "govuk-input--width-4",
-                        "attributes": {
-                            "data-example-year": "year"
-                        }
+                        "error": true
                     }
                 ]
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 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=\"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=\"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--error govuk-input--width-4\" id=\"dob-year-error-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "classes",
@@ -417,7 +601,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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>"
         },
@@ -431,10 +615,44 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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 items",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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 empty items",
             "options": {
@@ -443,7 +661,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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>"
         },
@@ -460,9 +678,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2\" 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",
@@ -478,9 +696,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2\" 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",
@@ -500,9 +718,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-2\" 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",
@@ -525,9 +743,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "suffixed id",
@@ -547,14 +765,14 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
-            "name": "with values",
+            "name": "with item value",
             "options": {
-                "id": "with-values",
+                "id": "with-item-value",
                 "items": [
                     {
                         "id": "day",
@@ -573,12 +791,132 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-value\">\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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with field value",
+            "options": {
+                "id": "with-field-value",
+                "year": {
+                    "value": 2023
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-field-value\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-field-value-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-field-value-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-field-value-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-field-value-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-field-value-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-field-value-year\" name=\"year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with field value and items",
+            "options": {
+                "id": "with-field-value-items",
+                "items": [
+                    {
+                        "id": "day",
+                        "name": "day"
+                    },
+                    {
+                        "id": "month",
+                        "name": "month"
+                    },
+                    {
+                        "id": "year",
+                        "name": "year"
+                    }
+                ],
+                "year": {
+                    "value": 2023
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-field-value-items\">\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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"year\" name=\"year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with field value and item value",
+            "options": {
+                "id": "with-field-value-item-value",
+                "items": [
+                    {
+                        "id": "day",
+                        "name": "day"
+                    },
+                    {
+                        "id": "month",
+                        "name": "month"
+                    },
+                    {
+                        "id": "year",
+                        "name": "year",
+                        "value": 2018
+                    }
+                ],
+                "year": {
+                    "value": 2023
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-field-value-item-value\">\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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with field value, item value and values",
+            "options": {
+                "id": "with-field-value-item-value-values",
+                "items": [
+                    {
+                        "id": "day",
+                        "name": "day"
+                    },
+                    {
+                        "id": "month",
+                        "name": "month"
+                    },
+                    {
+                        "id": "year",
+                        "name": "year",
+                        "value": 2018
+                    }
+                ],
+                "year": {
+                    "value": 2023
+                },
+                "values": {
+                    "year": 2026
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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-field-value-item-value-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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
-            "name": "with hint and describedBy",
+            "name": "with field value overriding values",
+            "options": {
+                "id": "with-field-value-values",
+                "year": {
+                    "value": 2023
+                },
+                "values": {
+                    "year": 2026
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-field-value-values\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-field-value-values-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-field-value-values-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-field-value-values-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-field-value-values-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-field-value-values-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-field-value-values-year\" name=\"year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with hint and described by",
             "options": {
                 "id": "dob-errors",
                 "fieldset": {
@@ -593,12 +931,12 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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",
+            "name": "with error message and described by",
             "options": {
                 "id": "dob-errors",
                 "fieldset": {
@@ -613,9 +951,198 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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--error 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--error 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--error 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 on single field",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "day": {
+                    "error": true
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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--error 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 on single field by omission",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "month": {
+                    "error": false
+                },
+                "year": {
+                    "error": false
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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=\"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--error 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 on single field using classes",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "day": {
+                    "classes": "govuk-input--error"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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\" 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 on single item",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "error": true
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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--error 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 on single item by omission",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2",
+                        "error": false
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4",
+                        "error": false
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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--error 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 on single item using classes",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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\" 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",
@@ -629,7 +1156,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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>"
         },
@@ -654,9 +1181,9 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 govuk-input--width-2 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 govuk-input--width-2 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 govuk-input--width-4 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",
@@ -676,9 +1203,112 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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 govuk-input--width-2\" 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 govuk-input--width-2\" 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 govuk-input--width-4\" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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 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",
+            "options": {
+                "id": "dob-with-autocomplete-attribute",
+                "namePrefix": "dob-with-autocomplete",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "autocomplete": "bday-day"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2",
+                        "autocomplete": "bday-month"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4",
+                        "autocomplete": "bday-year"
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "id": "dob-with-input-attributes",
+                "namePrefix": "dob-with-input-attributes",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "attributes": {
+                            "data-example-day": "day"
+                        }
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2",
+                        "attributes": {
+                            "data-example-month": "month"
+                        }
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4",
+                        "attributes": {
+                            "data-example-year": "year"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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>"
         }
     ]
 }