{
    "component": "search-box",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "id": "search-keywords",
                "label": "Keyword search",
                "ariaLabel": "keywords",
                "inputId": "keywords",
                "inputName": "q",
                "inputLabel": "Keyword search"
            },
            "hidden": false,
            "description": "Default search box",
            "previewLayoutModifiers": [],
            "html": "<div id=\"search-keywords\" role=\"search\" aria-label=\"keywords\" data-module=\"dm-search-box\">\n  <div class=\"dm-search-box dm-search-box--on-white\">\n    <label for=\"keywords\" class=\"dm-search-box__label\">\n      Keyword search\n    </label>\n    <div class=\"dm-search-box__item-wrapper\">\n      <input\n        type=\"search\"\n        id=\"keywords\"\n        name=\"q\"\n        title=\"Keyword search\"\n        class=\"dm-search-box__item dm-search-box__input js-class-toggle\"\n      >\n      <div class=\"dm-search-box__item dm-search-box__submit-wrapper\">\n        <button type=\"submit\" class=\"dm-search-box__submit\">Search</button>\n      </div>\n    </div>\n  </div>\n</div>"
        },
        {
            "name": "with value",
            "options": {
                "id": "search-keywords",
                "label": "Keyword search",
                "ariaLabel": "keywords",
                "inputId": "keywords",
                "inputName": "q",
                "inputLabel": "Keyword search",
                "inputValue": "This is a search term"
            },
            "hidden": false,
            "description": "with a value",
            "previewLayoutModifiers": [],
            "html": "<div id=\"search-keywords\" role=\"search\" aria-label=\"keywords\" data-module=\"dm-search-box\">\n  <div class=\"dm-search-box dm-search-box--on-white\">\n    <label for=\"keywords\" class=\"dm-search-box__label\">\n      Keyword search\n    </label>\n    <div class=\"dm-search-box__item-wrapper\">\n      <input\n        type=\"search\"\n value=\"This is a search term\"         id=\"keywords\"\n        name=\"q\"\n        title=\"Keyword search\"\n        class=\"dm-search-box__item dm-search-box__input js-class-toggle\"\n      >\n      <div class=\"dm-search-box__item dm-search-box__submit-wrapper\">\n        <button type=\"submit\" class=\"dm-search-box__submit\">Search</button>\n      </div>\n    </div>\n  </div>\n</div>"
        }
    ]
}