{
    "component": "question-date",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                }
            },
            "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      Here is the service question\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": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hint": "This is a hint for the question"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-hint\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <div id=\"input-example-hint\" class=\"govuk-hint\">\n      This is a hint for the question\n    </div>\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 question advice",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "question_advice": "Here is the question advice"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-hint\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <div id=\"input-example-hint\" class=\"govuk-hint\">\n      <div class=\"govuk-body\">\n            Here is the question advice\n          </div>\n    </div>\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 question advice and hint",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
                    "hint": "<div class=\"hint-in-html\">This is a hint for the question</div>\n"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-hint\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <div id=\"input-example-hint\" class=\"govuk-hint\">\n      <div class=\"govuk-body\">\n            <p class=\"govuk-body-l\">Here is the question advice</p>\n      \n          </div>\n          <div class=\"hint-in-html\">This is a hint for the question</div>\n    </div>\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 optional",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "optional": 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--m\">\n      Here is the service question (optional)\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 optional text",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "optional": true,
                    "optional_text": "if applicable"
                }
            },
            "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      Here is the service question (if applicable)\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 hidden",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hidden": 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--m\">\n      Here is the service question\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 data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "2023--25"
                }
            },
            "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      Here is the service question\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\" 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-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\" value=\"\" 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\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with data in parts",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example-year": "2023",
                    "example-day": "25"
                }
            },
            "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      Here is the service question\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\" 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-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\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "errors": {
                    "example": {
                        "message": "You must 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-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <p id=\"input-example-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n    </p>\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 govuk-input--error\" 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 govuk-input--error\" 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 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hint": "This is a hint for the question"
                },
                "errors": {
                    "example": {
                        "message": "You must 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-hint input-example-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <div id=\"input-example-hint\" class=\"govuk-hint\">\n      This is a hint for the question\n    </div>\n    <p id=\"input-example-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n    </p>\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 govuk-input--error\" 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 govuk-input--error\" 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 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with previous framework",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "2023-12-25"
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n  <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <p id=\"input-example-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n    </p>\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 govuk-input--error\" id=\"input-example-day\" name=\"example-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-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-month\" name=\"example-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-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        },
        {
            "name": "with previous framework without data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "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      Here is the service question\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 previous framework and error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "2023-12-25"
                },
                "errors": {
                    "example": {
                        "message": "You must enter a valid date"
                    }
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "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-error\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n      Here is the service question\n    </legend>\n    <p id=\"input-example-error\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n    </p>\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 govuk-input--error\" id=\"input-example-day\" name=\"example-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-month\">\n            Month\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"input-example-month\" name=\"example-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-year\">\n            Year\n          </label>\n          <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
        }
    ]
}