{
  "component": "search-field",
  "fixtures": [
    {
      "name": "plain search field",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with a preselected value",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "value": "badgers"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"badgers\" spellcheck=\"false\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with a hint",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "hint": "Try searching for something interesting"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><p id=\"search1-hint\" class=\"tna-form-item__hint\">Try searching for something interesting</p><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"search1-hint\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "heading level",
      "options": {
        "label": "Catalogue search results",
        "headingLevel": 4,
        "headingSize": "l",
        "id": "search1",
        "name": "q",
        "hint": "Try searching for something interesting"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><h4 class=\"tna-form-item__label tna-heading-l\"><label for=\"search1\">Catalogue search results</label></h4></div><p id=\"search1-hint\" class=\"tna-form-item__hint\">Try searching for something interesting</p><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"search1-hint\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with custom button text",
      "options": {
        "label": "Catalogue search results",
        "buttonText": "Go",
        "id": "search1",
        "name": "q",
        "hint": "Try searching for something interesting"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><p id=\"search1-hint\" class=\"tna-form-item__hint\">Try searching for something interesting</p><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"search1-hint\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Go\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Go</button></div></div></div>"
    },
    {
      "name": "with classes",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "classes": "test-class"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input test-class\" name=\"q\" value=\"\" spellcheck=\"false\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "attributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\" data-testattribute=\"foobar\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with form group classes",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "formItemClasses": "test-class"
      },
      "html": "<div class=\"tna-form-item test-class\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    },
    {
      "name": "with form group attributes",
      "options": {
        "label": "Catalogue search results",
        "id": "search1",
        "name": "q",
        "formItemAttributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-form-item\" data-testattribute=\"foobar\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"search1\">Catalogue search results</label></div><div class=\"tna-form-item__body\"><div class=\"tna-search-field\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input\" name=\"q\" value=\"\" spellcheck=\"false\"><button class=\"tna-button tna-search-field__button tna-button--icon-only\" type=\"submit\" title=\"Search\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z\" /></svg>Search</button></div></div></div>"
    }
  ]
}