{
  "name": "Input",
  "component": "input",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "label": {
          "text": "What is your full name?",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example"
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      What is your full name?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input\" id=\"example\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "disabled",
      "context": {
        "label": {
          "text": "What is your full name?",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      What is your full name?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input\" id=\"example\" name=\"example\" type=\"text\" disabled>\n</div>"
    },
    {
      "name": "example address line 1",
      "context": {
        "label": {
          "text": "Address line 1"
        },
        "name": "address-line1",
        "autocomplete": "address-line1"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-line1\">\n    Address line 1\n  </label>\n  <input class=\"nhsuk-input\" id=\"address-line1\" name=\"address-line1\" type=\"text\" autocomplete=\"address-line1\">\n</div>"
    },
    {
      "name": "example address line 2",
      "context": {
        "label": {
          "text": "Address line 2 (optional)"
        },
        "name": "address-line2",
        "autocomplete": "address-line2"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-line2\">\n    Address line 2 (optional)\n  </label>\n  <input class=\"nhsuk-input\" id=\"address-line2\" name=\"address-line2\" type=\"text\" autocomplete=\"address-line2\">\n</div>"
    },
    {
      "name": "example address postcode",
      "context": {
        "label": {
          "text": "Postcode"
        },
        "name": "address-postcode",
        "autocomplete": "postal-code",
        "width": 10
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-postcode\">\n    Postcode\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
    },
    {
      "name": "example address town or city",
      "context": {
        "label": {
          "text": "Town or city"
        },
        "name": "address-town",
        "autocomplete": "address-level2",
        "classes": "nhsuk-u-width-two-thirds"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-town\">\n    Town or city\n  </label>\n  <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"address-town\" name=\"address-town\" type=\"text\" autocomplete=\"address-level2\">\n</div>"
    },
    {
      "name": "example email address",
      "context": {
        "label": {
          "text": "Email address"
        },
        "name": "contact-by-email",
        "classes": "nhsuk-u-width-two-thirds",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"contact-by-email\">\n    Email address\n  </label>\n  <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>"
    },
    {
      "name": "example mobile phone number",
      "context": {
        "label": {
          "text": "Mobile phone number"
        },
        "type": "tel",
        "name": "contact-by-text",
        "classes": "nhsuk-u-width-two-thirds"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"contact-by-text\">\n    Mobile phone number\n  </label>\n  <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>"
    },
    {
      "name": "example phone number",
      "context": {
        "label": {
          "text": "Phone number"
        },
        "type": "tel",
        "name": "contact-by-phone",
        "classes": "nhsuk-u-width-two-thirds"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n    Phone number\n  </label>\n  <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>"
    },
    {
      "name": "example phone number with error message",
      "context": {
        "label": {
          "text": "Phone number"
        },
        "errorMessage": {
          "text": "Enter your phone number"
        },
        "type": "tel",
        "name": "contact-by-phone",
        "classes": "nhsuk-u-width-two-thirds"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n    Phone number\n  </label>\n  <span class=\"nhsuk-error-message\" id=\"contact-by-phone-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter your phone number\n  </span>\n  <input class=\"nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\" aria-describedby=\"contact-by-phone-error\">\n</div>"
    },
    {
      "name": "label",
      "description": "with size S",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "s",
          "isPageHeading": true
        },
        "id": "custom-size",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--s\" for=\"custom-size\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"custom-size\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "label",
      "description": "with size M",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "m",
          "isPageHeading": true
        },
        "id": "custom-size",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"custom-size\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"custom-size\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "label",
      "description": "with size L",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "id": "custom-size",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"custom-size\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"custom-size\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "label",
      "description": "with size XL",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "xl",
          "isPageHeading": true
        },
        "id": "custom-size",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--xl\" for=\"custom-size\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"custom-size\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "label",
      "description": "with id attribute on",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true,
          "id": "custom-id"
        },
        "id": "custom-size",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" id=\"custom-id\" for=\"custom-size\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"custom-size\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 2 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "2 character width"
        },
        "width": 2
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    2 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-2\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 3 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "3 character width"
        },
        "width": 3
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    3 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-3\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 4 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "4 character width"
        },
        "width": 4
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    4 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-4\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 5 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "5 character width"
        },
        "width": 5
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    5 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 10 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "10 character width"
        },
        "width": 10
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    10 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-10\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 20 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "20 character width"
        },
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    20 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-20\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width",
      "description": "with 30 character",
      "context": {
        "name": "example",
        "id": "input-width",
        "label": {
          "text": "30 character width"
        },
        "width": 30
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"input-width\">\n    30 character width\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-30\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width class",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "id": "input-width",
        "name": "example",
        "classes": "nhsuk-input--width-10"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"input-width\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--width-10\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "width class overriding width param",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "id": "input-width",
        "name": "example",
        "classes": "nhsuk-input--width-10",
        "width": 30
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"input-width\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <input class=\"nhsuk-input nhsuk-input--width-10\" id=\"input-width\" name=\"example\" type=\"text\">\n</div>"
    },
    {
      "name": "with autocomplete attribute",
      "context": {
        "label": {
          "text": "Enter a full postcode in England",
          "isPageHeading": true
        },
        "hint": {
          "text": "For example, LS1 1AB"
        },
        "id": "with-autocomplete-attribute",
        "name": "example",
        "autocomplete": "postal-code"
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-autocomplete-attribute\">\n      Enter a full postcode in England\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-autocomplete-attribute-hint\">\n    For example, LS1 1AB\n  </div>\n  <input class=\"nhsuk-input\" id=\"with-autocomplete-attribute\" name=\"example\" type=\"text\" aria-describedby=\"with-autocomplete-attribute-hint\" autocomplete=\"postal-code\">\n</div>"
    },
    {
      "name": "with button",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "id": "with-button",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false,
        "formGroup": {
          "afterInput": {
            "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>\n"
          }
        }
      },
      "screenshot": {
        "viewports": [
          "watch",
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-button\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"with-button\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n      Search\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with button and error message",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "errorMessage": {
          "text": "Enter NHS number"
        },
        "id": "with-button-error-message",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false,
        "formGroup": {
          "afterInput": {
            "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>\n"
          }
        }
      },
      "screenshot": {
        "viewports": [
          "watch",
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-button-error-message\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-button-error-message-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter NHS number\n  </span>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10\" id=\"with-button-error-message\" name=\"example\" type=\"text\" spellcheck=\"false\" aria-describedby=\"with-button-error-message-error\" inputmode=\"numeric\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n      Search\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with code input styling",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "hint": {
          "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "id": "with-code-input-styling",
        "name": "example",
        "width": 10,
        "code": true,
        "value": "999 123 4567",
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-code-input-styling\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-code-input-styling-hint\">\n    This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"with-code-input-styling\" name=\"example\" type=\"text\" spellcheck=\"false\" value=\"999 123 4567\" aria-describedby=\"with-code-input-styling-hint\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "with error message",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "errorMessage": {
          "text": "Enter NHS number"
        },
        "id": "with-error-message",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-error-message\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-error-message-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter NHS number\n  </span>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10\" id=\"with-error-message\" name=\"example\" type=\"text\" spellcheck=\"false\" aria-describedby=\"with-error-message-error\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "with error message and hint",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "hint": {
          "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "errorMessage": {
          "text": "Enter NHS number"
        },
        "id": "with-hint-error",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": {
        "states": [
          "focus"
        ],
        "selector": "#with-hint-error"
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-hint-error\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-hint-error-hint\">\n    This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <span class=\"nhsuk-error-message\" id=\"with-hint-error-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter NHS number\n  </span>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10\" id=\"with-hint-error\" name=\"example\" type=\"text\" spellcheck=\"false\" aria-describedby=\"with-hint-error-hint with-hint-error-error\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "with hint",
      "context": {
        "label": {
          "text": "What is your NHS number?",
          "size": "l",
          "isPageHeading": true
        },
        "hint": {
          "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "id": "with-hint",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-hint\">\n      What is your NHS number?\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-hint-hint\">\n    This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"with-hint\" name=\"example\" type=\"text\" spellcheck=\"false\" aria-describedby=\"with-hint-hint\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "without page heading",
      "context": {
        "label": {
          "text": "What is your NHS number?"
        },
        "id": "without-heading",
        "name": "example",
        "width": 10,
        "code": true,
        "inputmode": "numeric",
        "spellcheck": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"without-heading\">\n    What is your NHS number?\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10\" id=\"without-heading\" name=\"example\" type=\"text\" spellcheck=\"false\" inputmode=\"numeric\">\n</div>"
    },
    {
      "name": "with prefix",
      "context": {
        "label": {
          "text": "Cost in pounds",
          "isPageHeading": true
        },
        "id": "with-prefix",
        "name": "example",
        "prefix": {
          "text": "£"
        },
        "width": 5
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-prefix\">\n      Cost in pounds\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-prefix\" name=\"example\" type=\"text\">\n  </div>\n</div>"
    },
    {
      "name": "with prefix and suffix",
      "context": {
        "label": {
          "text": "Cost per item, in pounds",
          "isPageHeading": true
        },
        "id": "with-prefix-suffix",
        "name": "example",
        "prefix": {
          "text": "£"
        },
        "suffix": {
          "text": "per item"
        },
        "width": 5
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-prefix-suffix\">\n      Cost per item, in pounds\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-prefix-suffix\" name=\"example\" type=\"text\">\n    <div class=\"nhsuk-input-wrapper__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n</div>"
    },
    {
      "name": "with prefix and suffix and error message",
      "context": {
        "label": {
          "text": "Cost per item, in pounds",
          "isPageHeading": true
        },
        "errorMessage": {
          "text": "Enter a cost per item, in pounds"
        },
        "id": "with-prefix-suffix",
        "name": "example",
        "prefix": {
          "text": "£"
        },
        "suffix": {
          "text": "per item"
        },
        "width": 5
      },
      "screenshot": {
        "states": [
          "focus"
        ],
        "selector": "#with-prefix-suffix"
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-prefix-suffix\">\n      Cost per item, in pounds\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-prefix-suffix-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter a cost per item, in pounds\n  </span>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-5\" id=\"with-prefix-suffix\" name=\"example\" type=\"text\" aria-describedby=\"with-prefix-suffix-error\">\n    <div class=\"nhsuk-input-wrapper__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n</div>"
    },
    {
      "name": "with prefix deprecated option",
      "context": {
        "label": {
          "text": "Cost in pounds",
          "isPageHeading": true
        },
        "id": "with-prefix",
        "name": "example",
        "prefix": "£",
        "width": 5
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-prefix\">\n      Cost in pounds\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">£</div>\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-prefix\" name=\"example\" type=\"text\">\n  </div>\n</div>"
    },
    {
      "name": "with prefix HTML",
      "context": {
        "label": {
          "text": "Cost in pounds",
          "isPageHeading": true
        },
        "id": "with-prefix",
        "name": "example",
        "prefix": {
          "html": "<span>£</span>"
        },
        "width": 5
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-prefix\">\n      Cost in pounds\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\"><span>£</span></div>\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-prefix\" name=\"example\" type=\"text\">\n  </div>\n</div>"
    },
    {
      "name": "with suffix",
      "context": {
        "label": {
          "text": "Weight in kilograms",
          "isPageHeading": true
        },
        "id": "with-suffix",
        "name": "example",
        "suffix": {
          "text": "kg"
        },
        "width": 5
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-suffix\">\n      Weight in kilograms\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-suffix\" name=\"example\" type=\"text\">\n    <div class=\"nhsuk-input-wrapper__suffix\" aria-hidden=\"true\">kg</div>\n  </div>\n</div>"
    },
    {
      "name": "with suffix deprecated option",
      "context": {
        "label": {
          "text": "Weight in kilograms",
          "isPageHeading": true
        },
        "id": "with-suffix",
        "name": "example",
        "suffix": "kg",
        "width": 5
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-suffix\">\n      Weight in kilograms\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-suffix\" name=\"example\" type=\"text\">\n    <div class=\"nhsuk-input-wrapper__suffix\" aria-hidden=\"true\">kg</div>\n  </div>\n</div>"
    },
    {
      "name": "with suffix HTML",
      "context": {
        "label": {
          "text": "Weight in kilograms",
          "isPageHeading": true
        },
        "id": "with-suffix",
        "name": "example",
        "suffix": {
          "html": "<span>kg</span>"
        },
        "width": 5
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label\" for=\"with-suffix\">\n      Weight in kilograms\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-5\" id=\"with-suffix\" name=\"example\" type=\"text\">\n    <div class=\"nhsuk-input-wrapper__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n</div>"
    }
  ]
}