Socket
Socket
Sign inDemoInstall

govuk-frontend

Package Overview
Dependencies
0
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.0.0 to 4.0.1

2

govuk/components/accordion/macro-options.json

@@ -72,3 +72,3 @@ [

"required": false,
"description": "Whether the section should be expanded upon initial load or not. Defaults to `false`."
"description": "Sets whether the section should be expanded when the page loads for the first time. Defaults to `false`."
}

@@ -75,0 +75,0 @@ ]

50

govuk/components/date-input/fixtures.json

@@ -9,3 +9,3 @@ {

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": false

@@ -41,3 +41,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -72,3 +72,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -106,3 +106,3 @@ },

},
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -141,3 +141,3 @@ },

},
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -176,3 +176,3 @@ },

},
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -211,3 +211,3 @@ },

},
"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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\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 \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \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\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -229,3 +229,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -250,3 +250,3 @@ },

},
"html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -285,3 +285,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -326,3 +326,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n \n </div>\n </div>\n \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 \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\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -336,3 +336,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -348,3 +348,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -358,3 +358,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -373,3 +373,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n \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 \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 \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -389,3 +389,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n \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 \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 \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -409,3 +409,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -432,3 +432,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -452,3 +452,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -476,3 +476,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -494,3 +494,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": true

@@ -512,3 +512,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\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\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": true

@@ -526,3 +526,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": true

@@ -549,3 +549,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -569,3 +569,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n\n</div>",
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \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 \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
"hidden": true

@@ -572,0 +572,0 @@ }

23

govuk/components/error-summary/error-summary.js

@@ -718,4 +718,4 @@ (function (global, factory) {

}
$module.focus();
this.setFocus();
$module.addEventListener('click', this.handleClick.bind(this));

@@ -725,2 +725,23 @@ };

/**
* Focus the error summary
*/
ErrorSummary.prototype.setFocus = function () {
var $module = this.$module;
if ($module.getAttribute('data-disable-auto-focus') === 'true') {
return
}
// Set tabindex to -1 to make the element programmatically focusable, but
// remove it on blur as the error summary doesn't need to be focused again.
$module.setAttribute('tabindex', '-1');
$module.addEventListener('blur', function () {
$module.removeAttribute('tabindex');
});
$module.focus();
};
/**
* Click event handler

@@ -727,0 +748,0 @@ *

41

govuk/components/error-summary/fixtures.json

@@ -19,3 +19,3 @@ {

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n \n </li>\n \n <li>\n \n <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n \n </li>\n \n <li>\n \n <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": false

@@ -33,3 +33,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": false

@@ -51,3 +51,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": false

@@ -70,3 +70,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Please fix the errors below.\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Please fix the errors below.\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n <li>\n \n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": false

@@ -84,3 +84,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, &lt;em&gt;alert&lt;/em&gt;\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, &lt;em&gt;alert&lt;/em&gt;\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -98,3 +98,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -113,3 +113,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Lorem ipsum\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n Lorem ipsum\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -128,3 +128,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See errors below (▼)\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See errors below (▼)\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -143,3 +143,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See <span>errors</span> below\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <p>\n See <span>errors</span> below\n </p>\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -158,3 +158,3 @@ },

},
"html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -176,3 +176,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Invalid username or password\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -195,3 +195,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -209,3 +209,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -223,3 +223,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n The date your passport was issued <b>must</b> be in the past\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n The date your passport was issued <b>must</b> be in the past\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -238,3 +238,3 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true

@@ -253,6 +253,15 @@ },

},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n <li>\n \n <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n \n </li>\n \n </ul>\n </div>\n</div>",
"hidden": true
},
{
"name": "autofocus disabled",
"options": {
"titleText": "There is a problem",
"disableAutoFocus": true
},
"html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n \n <ul class=\"govuk-list govuk-error-summary__list\">\n \n </ul>\n </div>\n</div>",
"hidden": true
}
]
}

6

govuk/components/error-summary/macro-options.json

@@ -59,2 +59,8 @@ [

{
"name": "disableAutoFocus",
"type": "boolean",
"required": false,
"description": "Prevent moving focus to the error summary when the page loads."
},
{
"name": "classes",

@@ -61,0 +67,0 @@ "type": "string",

80

govuk/components/input/fixtures.json

@@ -13,3 +13,3 @@ {

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>",
"hidden": false

@@ -29,3 +29,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n\n</div>",
"hidden": false

@@ -48,3 +48,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n\n</div>",
"hidden": false

@@ -65,3 +65,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n\n</div>",
"hidden": false

@@ -82,3 +82,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n\n</div>",
"hidden": false

@@ -99,3 +99,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n\n</div>",
"hidden": false

@@ -116,3 +116,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n\n</div>",
"hidden": false

@@ -133,3 +133,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n\n</div>",
"hidden": false

@@ -150,3 +150,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n\n</div>",
"hidden": false

@@ -167,3 +167,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n\n</div>",
"hidden": false

@@ -181,3 +181,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n\n</div>",
"hidden": false

@@ -197,3 +197,3 @@ },

},
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>",
"hidden": false

@@ -211,3 +211,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n\n</div>",
"hidden": false

@@ -226,3 +226,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n\n</div>",
"hidden": false

@@ -241,3 +241,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n\n</div>",
"hidden": false

@@ -256,3 +256,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n\n</div>",
"hidden": false

@@ -272,3 +272,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
"hidden": false

@@ -288,3 +288,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n\n</div>",
"hidden": false

@@ -307,3 +307,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
"hidden": false

@@ -326,3 +326,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n\n</div>",
"hidden": false

@@ -348,3 +348,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
"hidden": false

@@ -368,3 +368,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
"hidden": false

@@ -382,3 +382,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n\n</div>",
"hidden": true

@@ -396,3 +396,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n\n</div>",
"hidden": true

@@ -410,3 +410,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n\n</div>",
"hidden": true

@@ -424,3 +424,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n\n</div>",
"hidden": true

@@ -440,3 +440,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n\n</div>",
"hidden": true

@@ -457,3 +457,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n\n</div>",
"hidden": true

@@ -474,3 +474,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n\n</div>",
"hidden": true

@@ -493,3 +493,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n\n</div>",
"hidden": true

@@ -513,3 +513,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n\n</div>",
"hidden": true

@@ -527,3 +527,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n\n</div>",
"hidden": true

@@ -543,3 +543,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
"hidden": true

@@ -559,3 +559,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
"hidden": true

@@ -576,3 +576,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>",
"hidden": true

@@ -595,3 +595,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>",
"hidden": true

@@ -611,3 +611,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n\n</div>",
"hidden": true

@@ -627,3 +627,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n\n</div>",
"hidden": true

@@ -644,3 +644,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n\n</div>",
"hidden": true

@@ -663,3 +663,3 @@ },

},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n\n</div>",
"hidden": true

@@ -666,0 +666,0 @@ }

2

package.json
{
"name": "govuk-frontend",
"description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
"version": "4.0.0",
"version": "4.0.1",
"main": "govuk/all.js",

@@ -6,0 +6,0 @@ "sass": "govuk/all.scss",

govuk/all.js

Sorry, the diff of this file is too big to display

govuk/components/accordion/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/error-summary/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/input/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/radios/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/radios/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/radios/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/select/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/summary-list/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/summary-list/fixtures.json

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc