digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
276 lines (275 loc) • 29.8 kB
JSON
{
"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>"
}
]
}