govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
831 lines (830 loc) • 43.1 kB
JSON
{
"component": "input",
"fixtures": [
{
"name": "default",
"options": {
"label": {
"text": "National Insurance number"
},
"name": "test-name"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"test-name\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"test-name\" name=\"test-name\" type=\"text\">\n</div>"
},
{
"name": "with hint text",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-with-hint-text",
"name": "test-name-2"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\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 <input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
},
{
"name": "with error message",
"options": {
"label": {
"text": "National Insurance number"
},
"id": "input-with-error-message",
"name": "test-name-3",
"errorMessage": {
"text": "Enter a National Insurance number in the correct format"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"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 <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Enter a National Insurance number in the correct format\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-error\">\n</div>"
},
{
"name": "with error and hint",
"options": {
"id": "with-error-hint",
"name": "with-error-hint",
"label": {
"text": "National insurance number"
},
"errorMessage": {
"text": "Enter a National Insurance number in the correct format"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n National insurance number\n </label>\n <div id=\"with-error-hint-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 <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Enter a National Insurance number in the correct format\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>"
},
{
"name": "with width-2 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-2",
"name": "test-width-2",
"classes": "govuk-input--width-2"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-3 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-3",
"name": "test-width-3",
"classes": "govuk-input--width-3"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-4 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-4",
"name": "test-width-4",
"classes": "govuk-input--width-4"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-5 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-5",
"name": "test-width-5",
"classes": "govuk-input--width-5"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-10 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-10",
"name": "test-width-10",
"classes": "govuk-input--width-10"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-20 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-20",
"name": "test-width-20",
"classes": "govuk-input--width-20"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with width-30 class",
"options": {
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-30",
"name": "test-width-30",
"classes": "govuk-input--width-30"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\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 <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>"
},
{
"name": "with label as page heading",
"options": {
"label": {
"text": "National Insurance number",
"classes": "govuk-label--l",
"isPageHeading": true
},
"id": "input-with-page-heading",
"name": "test-name"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n <input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
},
{
"name": "with prefix",
"options": {
"label": {
"text": "Amount, in pounds"
},
"id": "input-with-prefix",
"name": "amount",
"prefix": {
"text": "£"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\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\">\n </div>\n</div>"
},
{
"name": "with suffix",
"options": {
"label": {
"text": "Weight, in kilograms"
},
"id": "input-with-suffix",
"name": "weight",
"suffix": {
"text": "kg"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n <div class=\"govuk-input__wrapper\">\n <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>"
},
{
"name": "with prefix and suffix",
"options": {
"label": {
"text": "Cost per item, in pounds"
},
"id": "input-with-prefix-suffix",
"name": "cost",
"prefix": {
"text": "£"
},
"suffix": {
"text": "per item"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"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 <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>"
},
{
"name": "with prefix and suffix and error",
"options": {
"label": {
"text": "Cost per item, in pounds"
},
"id": "input-with-prefix-suffix",
"name": "cost",
"prefix": {
"text": "£"
},
"suffix": {
"text": "per item"
},
"errorMessage": {
"text": "Error message goes here"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"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 <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>"
},
{
"name": "with prefix and suffix and width modifier",
"options": {
"label": {
"text": "Cost per item, in pounds"
},
"id": "input-with-prefix-suffix",
"name": "cost",
"classes": "govuk-input--width-5",
"prefix": {
"text": "£"
},
"suffix": {
"text": "per item"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"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 <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>"
},
{
"name": "with extra letter spacing",
"options": {
"id": "input-with-extra-letter-spacing",
"label": {
"text": "National insurance number"
},
"classes": "govuk-input--width-30 govuk-input--extra-letter-spacing",
"value": "QQ 12 34 56 C"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n National insurance number\n </label>\n <input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
},
{
"name": "classes",
"options": {
"id": "with-classes",
"name": "with-classes",
"label": {
"text": "With classes"
},
"classes": "app-input--custom-modifier"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
},
{
"name": "id",
"options": {
"id": "input-id",
"name": "testing-name",
"label": {
"text": "With custom id"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-id\">\n With custom id\n </label>\n <input class=\"govuk-input\" id=\"input-id\" name=\"testing-name\" type=\"text\">\n</div>"
},
{
"name": "custom type",
"options": {
"id": "with-custom-type",
"name": "with-custom-type",
"label": {
"text": "With custom type"
},
"type": "number"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n <input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
},
{
"name": "value",
"options": {
"id": "with-value",
"name": "with-value",
"label": {
"text": "With value"
},
"value": "QQ 12 34 56 C"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n <input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
},
{
"name": "zero value",
"options": {
"id": "with-zero-value",
"name": "with-zero-value",
"label": {
"text": "With zero value"
},
"value": 0
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-zero-value\">\n With zero value\n </label>\n <input class=\"govuk-input\" id=\"with-zero-value\" name=\"with-zero-value\" type=\"text\" value=\"0\">\n</div>"
},
{
"name": "with describedBy",
"options": {
"id": "with-describedby",
"name": "with-describedby",
"label": {
"text": "With describedBy"
},
"describedBy": "test-target-element"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n <input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"test-target-element\">\n</div>"
},
{
"name": "attributes",
"options": {
"id": "with-attributes",
"name": "with-attributes",
"label": {
"text": "With attributes"
},
"attributes": {
"data-attribute": "my data value"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n <input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
},
{
"name": "hint with describedBy",
"options": {
"id": "with-hint-describedby",
"name": "with-hint-describedby",
"label": {
"text": "With hint describedBy"
},
"describedBy": "test-target-element",
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\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 <input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-hint-describedby-hint\">\n</div>"
},
{
"name": "error with describedBy",
"options": {
"id": "with-error-describedby",
"name": "with-error-describedby",
"label": {
"text": "With error describedBy"
},
"describedBy": "test-target-element",
"errorMessage": {
"text": "Error message"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"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 <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=\"test-target-element with-error-describedby-error\">\n</div>"
},
{
"name": "with error, hint and describedBy",
"options": {
"id": "with-error-hint-describedby",
"name": "with-error-hint-describedby",
"label": {
"text": "With error, hint and describedBy"
},
"errorMessage": {
"text": "Error message"
},
"hint": {
"text": "Hint"
},
"describedBy": "test-target-element"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"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 <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\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=\"test-target-element with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
},
{
"name": "inputmode",
"options": {
"id": "with-inputmode",
"name": "with-inputmode",
"label": {
"text": "With inputmode"
},
"inputmode": "decimal"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n <input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
},
{
"name": "with prefix with html as text",
"options": {
"label": {
"text": "Amount, in pounds"
},
"id": "input-with-prefix",
"name": "amount",
"prefix": {
"text": "<span>£</span>"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\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\">\n </div>\n</div>"
},
{
"name": "with prefix with html",
"options": {
"label": {
"html": "Amount, in pounds"
},
"id": "input-with-prefix",
"name": "amount",
"prefix": {
"html": "<span>£</span>"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\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\">\n </div>\n</div>"
},
{
"name": "with prefix with classes",
"options": {
"label": {
"text": "Amount, in pounds"
},
"id": "input-with-prefix-element",
"name": "amount",
"prefix": {
"text": "£",
"classes": "app-input__prefix--custom-modifier"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\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\">\n </div>\n</div>"
},
{
"name": "with prefix with attributes",
"options": {
"label": {
"text": "Amount, in pounds"
},
"id": "input-with-prefix-element",
"name": "amount",
"prefix": {
"text": "£",
"attributes": {
"data-attribute": "value"
}
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\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\">\n </div>\n</div>"
},
{
"name": "with suffix with html as text",
"options": {
"label": {
"text": "Weight, in kilograms"
},
"id": "input-with-suffix",
"name": "weight",
"suffix": {
"text": "<span>kg</span>"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n <div class=\"govuk-input__wrapper\">\n <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>"
},
{
"name": "with suffix with html",
"options": {
"label": {
"text": "Weight, in kilograms"
},
"id": "input-with-suffix",
"name": "weight",
"suffix": {
"html": "<span>kg</span>"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n <div class=\"govuk-input__wrapper\">\n <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>"
},
{
"name": "with suffix with classes",
"options": {
"label": {
"text": "Weight, in kilograms"
},
"id": "input-with-suffix",
"name": "weight",
"suffix": {
"html": "<span>kg</span>",
"classes": "app-input__suffix--custom-modifier"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n <div class=\"govuk-input__wrapper\">\n <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>"
},
{
"name": "with suffix with attributes",
"options": {
"label": {
"text": "Weight, in kilograms"
},
"id": "input-with-suffix",
"name": "weight",
"suffix": {
"html": "<span>kg</span>",
"attributes": {
"data-attribute": "value"
}
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n <div class=\"govuk-input__wrapper\">\n <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>"
},
{
"name": "with customised input wrapper",
"options": {
"label": {
"text": "Cost per item, in pounds"
},
"id": "input-with-customised-input-wrapper",
"name": "cost",
"inputWrapper": {
"classes": "app-input-wrapper--custom-modifier",
"attributes": {
"data-attribute": "value"
}
},
"prefix": {
"text": "£"
},
"suffix": {
"text": "per item"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-customised-input-wrapper\">\n Cost per item, in pounds\n </label>\n <div class=\"govuk-input__wrapper app-input-wrapper--custom-modifier\" data-attribute=\"value\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-customised-input-wrapper\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>"
},
{
"name": "with optional form-group classes",
"options": {
"label": {
"text": "National Insurance number"
},
"id": "input-example",
"name": "test-name",
"formGroup": {
"classes": "extra-class"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
},
{
"name": "with autocomplete attribute",
"options": {
"label": {
"text": "Postcode"
},
"id": "input-with-autocomplete-attribute",
"name": "postcode",
"autocomplete": "postal-code"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n <input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
},
{
"name": "with pattern attribute",
"options": {
"label": {
"text": "Numbers only"
},
"id": "input-with-pattern-attribute",
"name": "numbers-only",
"type": "number",
"pattern": "[0-9]*"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n <input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
},
{
"name": "with spellcheck enabled",
"options": {
"label": {
"text": "Spellcheck is enabled"
},
"id": "input-with-spellcheck-enabled",
"name": "spellcheck",
"type": "text",
"spellcheck": true
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n <input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
},
{
"name": "with spellcheck disabled",
"options": {
"label": {
"text": "Spellcheck is disabled"
},
"id": "input-with-spellcheck-disabled",
"name": "spellcheck",
"type": "text",
"spellcheck": false
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n <input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
},
{
"name": "with autocapitalize turned off",
"options": {
"label": {
"text": "Autocapitalize is turned off"
},
"id": "input-with-autocapitalize-off",
"name": "autocapitalize",
"type": "text",
"autocapitalize": "none"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocapitalize-off\">\n Autocapitalize is turned off\n </label>\n <input class=\"govuk-input\" id=\"input-with-autocapitalize-off\" name=\"autocapitalize\" type=\"text\" autocapitalize=\"none\">\n</div>"
},
{
"name": "disabled",
"options": {
"label": {
"text": "Disabled input"
},
"id": "disabled-input",
"disabled": true
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"disabled-input\">\n Disabled input\n </label>\n <input class=\"govuk-input\" id=\"disabled-input\" name=\"\" type=\"text\" disabled>\n</div>"
}
]
}