{
  "name": "Search input",
  "component": "search-input",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "placeholder": "NHS number",
        "hint": {
          "text": "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"example-hint\">\n    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" aria-describedby=\"example-hint\" autocomplete=\"off\" placeholder=\"NHS number\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "placeholder": "NHS number",
        "name": "example",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" disabled autocomplete=\"off\" placeholder=\"NHS number\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-label=\"Search\" aria-disabled=\"true\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "placeholder": "NHS number",
        "name": "example",
        "button": {
          "disabled": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\" placeholder=\"NHS number\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-label=\"Search\" aria-disabled=\"true\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled with enabled button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "placeholder": "NHS number",
        "name": "example",
        "disabled": true,
        "button": {
          "disabled": false
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" disabled autocomplete=\"off\" placeholder=\"NHS number\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "large",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "large": true,
        "width": 30
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input nhsuk-search-input--large\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-input-wrapper--large nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--large nhsuk-input--width-30 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "large with brand button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "l",
          "isPageHeading": true
        },
        "button": {
          "variant": "brand"
        },
        "name": "example",
        "large": true,
        "width": 30
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input nhsuk-search-input--large\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-input-wrapper--large nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--large nhsuk-input--width-30 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with alternative icon",
      "context": {
        "label": {
          "text": "Search by postcode",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "icon": "arrow-right"
        },
        "name": "example",
        "width": 10
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by postcode\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-10 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with brand button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "variant": "brand"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with brand button text",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "text": "Search",
          "variant": "brand"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n      <span class=\"nhsuk-button__content\">Search</span>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with brand button text only",
      "context": {
        "label": {
          "text": "Product order number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "icon": false,
          "text": "Find",
          "variant": "brand"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Product order number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      Find\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with error message",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "errorMessage": {
          "text": "Enter NHS number"
        },
        "name": "example",
        "value": "999 123 4567",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"example-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter NHS number\n  </span>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" value=\"999 123 4567\" aria-describedby=\"example-error\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with error message and hint",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "hint": {
          "text": "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "errorMessage": {
          "text": "Enter NHS number"
        },
        "name": "example",
        "value": "999 123 4567",
        "width": 20
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"example-hint\">\n    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <span class=\"nhsuk-error-message\" id=\"example-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter NHS number\n  </span>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" value=\"999 123 4567\" aria-describedby=\"example-hint example-error\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with hidden label",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "classes": "nhsuk-u-visually-hidden"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <label class=\"nhsuk-label nhsuk-u-visually-hidden\" for=\"example\">\n    Search by NHS number\n  </label>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with hint",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "hint": {
          "text": "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "id": "with-hint",
        "name": "example",
        "width": 20
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"with-hint\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-hint-hint\">\n    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"with-hint\" name=\"example\" type=\"search\" aria-describedby=\"with-hint-hint\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with hint and value",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "hint": {
          "text": "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
        },
        "name": "example",
        "value": "999 123 4567",
        "width": 20
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"example-hint\">\n    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App\n  </div>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" value=\"999 123 4567\" aria-describedby=\"example-hint\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "without button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "button": false,
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n  </div>\n</div>"
    },
    {
      "name": "without page heading",
      "context": {
        "label": {
          "text": "Search by NHS number"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <label class=\"nhsuk-label\" for=\"example\">\n    Search by NHS number\n  </label>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with prefix",
      "context": {
        "label": {
          "text": "Code lookup",
          "size": "m",
          "isPageHeading": true
        },
        "prefix": {
          "text": "SNOMED"
        },
        "id": "with-prefix",
        "name": "example",
        "value": "160245001",
        "width": 10,
        "code": true,
        "button": {
          "icon": "arrow-right",
          "variant": "brand"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"with-prefix\">\n      Code lookup\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">SNOMED</div>\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-10 nhsuk-search-input__input\" id=\"with-prefix\" name=\"example\" type=\"search\" value=\"160245001\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with prefix and error message",
      "context": {
        "label": {
          "text": "Code lookup",
          "size": "m",
          "isPageHeading": true
        },
        "prefix": {
          "text": "SNOMED"
        },
        "errorMessage": {
          "text": "Enter a SNOMED code"
        },
        "id": "with-prefix",
        "name": "example",
        "width": 10,
        "code": true,
        "button": {
          "icon": "arrow-right",
          "variant": "brand"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"with-prefix\">\n      Code lookup\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-prefix-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter a SNOMED code\n  </span>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">SNOMED</div>\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10 nhsuk-search-input__input\" id=\"with-prefix\" name=\"example\" type=\"search\" aria-describedby=\"with-prefix-error\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with secondary button",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "variant": "secondary"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with secondary button text",
      "context": {
        "label": {
          "text": "Search by NHS number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "text": "Search",
          "variant": "secondary"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Search by NHS number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      <svg class=\"nhsuk-icon nhsuk-icon--search\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z\"/>\n      </svg>\n      <span class=\"nhsuk-button__content\">Search</span>\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with secondary button text only",
      "context": {
        "label": {
          "text": "Product order number",
          "size": "m",
          "isPageHeading": true
        },
        "button": {
          "icon": false,
          "text": "Find",
          "variant": "secondary"
        },
        "name": "example",
        "width": 20
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-search-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"example\">\n      Product order number\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper nhsuk-search-input__wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input\" id=\"example\" name=\"example\" type=\"search\" autocomplete=\"off\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-search-input__button\" data-module=\"nhsuk-button\" type=\"submit\" aria-label=\"Search\">\n      Find\n    </button>\n  </div>\n</div>"
    }
  ]
}