{
    "component": "date-input-from-form",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "form": {
                    "name": "example",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"input-example\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-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=\"input-example-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-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=\"input-example-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "classess",
            "options": {
                "form": {
                    "name": "example",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null
                },
                "classes": "my-special-class"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input my-special-class\" id=\"input-example\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-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=\"input-example-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-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=\"input-example-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "attributes",
            "options": {
                "form": {
                    "name": "example",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null
                },
                "attributes": {
                    "general": "kenobi",
                    "data-attribute": "Matthew"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input\" general=\"kenobi\" data-attribute=\"Matthew\" id=\"input-example\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-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=\"input-example-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-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=\"input-example-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with legend as page heading",
            "options": {
                "form": {
                    "name": "example",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null
                },
                "fieldset": {
                    "legend": {
                        "classes": "govuk-fieldset__legend--l",
                        "isPageHeading": true
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"govuk-date-input\" id=\"input-example\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-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=\"input-example-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-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=\"input-example-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null,
                    "hint": "For example, 31 3 1980"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-with-hint-hint\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"govuk-date-input\" id=\"input-example-with-hint\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-hint-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-hint-day\" name=\"example-with-hint-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=\"input-example-with-hint-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-hint-month\" name=\"example-with-hint-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=\"input-example-with-hint-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-hint-year\" name=\"example-with-hint-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with custom hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null,
                    "hint": "For example, 31 3 1980"
                },
                "hint": {
                    "html": "<p>I am a custom hint</p>"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-with-hint-hint\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n      <p>I am a custom hint</p>\n    </div>\n    <div class=\"govuk-date-input\" id=\"input-example-with-hint\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-hint-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-hint-day\" name=\"example-with-hint-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=\"input-example-with-hint-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-hint-month\" name=\"example-with-hint-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=\"input-example-with-hint-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-hint-year\" name=\"example-with-hint-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "form": {
                    "name": "example-with-error",
                    "question": "What is your date of birth?",
                    "day": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "month": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "year": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "errors": [
                        "Enter a valid date"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-with-error-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <p id=\"input-example-with-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Enter a valid date\n    </p>\n    <div class=\"govuk-date-input\" id=\"input-example-with-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-with-error-day\" name=\"example-with-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=\"input-example-with-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-with-error-month\" name=\"example-with-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=\"input-example-with-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"input-example-with-error-year\" name=\"example-with-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with partial error message",
            "options": {
                "form": {
                    "name": "example-with-error",
                    "question": "What is your date of birth?",
                    "day": {
                        "errors": [
                            "You must enter a day"
                        ]
                    },
                    "month": null,
                    "year": null,
                    "errors": [
                        "You must enter a day"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-with-error-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <p id=\"input-example-with-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> You must enter a day\n    </p>\n    <div class=\"govuk-date-input\" id=\"input-example-with-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-with-error-day\" name=\"example-with-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=\"input-example-with-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-error-month\" name=\"example-with-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=\"input-example-with-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-error-year\" name=\"example-with-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "form": {
                    "name": "example-with-hint-and-error",
                    "question": "What is your date of birth?",
                    "hint": "For example, 31 3 1980",
                    "day": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "month": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "year": {
                        "errors": [
                            "Enter a valid date"
                        ]
                    },
                    "errors": [
                        "Enter a valid date"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-with-hint-and-error-hint input-example-with-hint-and-error-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div id=\"input-example-with-hint-and-error-hint\" class=\"govuk-hint\">\n      For example, 31 3 1980\n    </div>\n    <p id=\"input-example-with-hint-and-error-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> Enter a valid date\n    </p>\n    <div class=\"govuk-date-input\" id=\"input-example-with-hint-and-error\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-hint-and-error-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-with-hint-and-error-day\" name=\"example-with-hint-and-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=\"input-example-with-hint-and-error-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-with-hint-and-error-month\" name=\"example-with-hint-and-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=\"input-example-with-hint-and-error-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"input-example-with-hint-and-error-year\" name=\"example-with-hint-and-error-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with values in all the fields",
            "options": {
                "form": {
                    "name": "example-with-values",
                    "question": "What is your date of birth?",
                    "day": {
                        "data": 25
                    },
                    "month": {
                        "data": 12
                    },
                    "year": {
                        "data": 2025
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"input-example-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=\"input-example-with-values-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-values-day\" name=\"example-with-values-day\" type=\"text\" value=\"25\" 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=\"input-example-with-values-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-values-month\" name=\"example-with-values-month\" type=\"text\" value=\"12\" 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=\"input-example-with-values-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-values-year\" name=\"example-with-values-year\" type=\"text\" value=\"2025\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with values in some of the fields",
            "options": {
                "form": {
                    "name": "example-with-values",
                    "question": "What is your date of birth?",
                    "day": {
                        "data": 25
                    },
                    "month": null,
                    "year": {
                        "data": 2025
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"input-example-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=\"input-example-with-values-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-values-day\" name=\"example-with-values-day\" type=\"text\" value=\"25\" 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=\"input-example-with-values-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-values-month\" name=\"example-with-values-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=\"input-example-with-values-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-values-year\" name=\"example-with-values-year\" type=\"text\" value=\"2025\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with overwritten items",
            "options": {
                "form": {
                    "name": "example-with-overwritten-items",
                    "question": "What is your date of birth?",
                    "day": null,
                    "month": null,
                    "year": null
                },
                "items": [
                    {
                        "name": "year",
                        "classes": "govuk-input--width-4"
                    },
                    {
                        "name": "month",
                        "classes": "govuk-input--width-2"
                    },
                    {
                        "name": "day",
                        "classes": "govuk-input--width-2"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      What is your date of birth?\n    </legend>\n    <div class=\"govuk-date-input\" id=\"input-example-with-overwritten-items\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-with-overwritten-items-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-with-overwritten-items-year\" name=\"example-with-overwritten-items-year\" 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=\"input-example-with-overwritten-items-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-overwritten-items-month\" name=\"example-with-overwritten-items-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=\"input-example-with-overwritten-items-day\">\n            Day\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-with-overwritten-items-day\" name=\"example-with-overwritten-items-day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        }
    ]
}