{
    "component": "input",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "label": {
                    "text": "National Insurance number"
                },
                "id": "input-example",
                "name": "test-name"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-form-group\">\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 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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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 optional form-group classes",
            "options": {
                "label": {
                    "text": "National Insurance number"
                },
                "id": "input-example",
                "name": "test-name",
                "formGroup": {
                    "classes": "extra-class"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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>"
        },
        {
            "name": "with prefix",
            "options": {
                "label": {
                    "text": "Amount, in pounds"
                },
                "id": "input-with-prefix",
                "name": "amount",
                "prefix": {
                    "text": "£"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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\" 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 long suffix",
            "options": {
                "label": {
                    "text": "Cost per item, in pounds, per household member"
                },
                "id": "input-with-prefix-suffix",
                "name": "cost",
                "prefix": {
                    "text": "£"
                },
                "suffix": {
                    "text": "per household member"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "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  <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>"
        },
        {
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "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": "",
            "previewLayoutModifiers": [],
            "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": "custom type",
            "options": {
                "id": "with-custom-type",
                "name": "with-custom-type",
                "label": {
                    "text": "With custom type"
                },
                "type": "number"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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\">&lt;span&gt;£&lt;/span&gt;</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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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\">&lt;span&gt;kg&lt;/span&gt;</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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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": "",
            "previewLayoutModifiers": [],
            "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>"
        }
    ]
}