Search Fields
Default
- The Magnifying Glass Icon in Search Design: Pros and Cons – Nielsen Norman Group
<div class="adb-search_field adb-input_row adb-js-input_row"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-input_row--item_content" placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square adb-input_row--item_content"> <i class="adb-icon__search"></i> </button> </div> </div>
<div class="adb-search_field adb-input_row adb-js-input_row"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square_small adb-input_row--item_content"> <i class="adb-icon__search"></i> </button> </div> </div>
<div class="adb-search_field adb-input_row adb-input_row__full_width adb-js-input_row"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-input_row--item_content" placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square adb-input_row--item_content"> <i class="adb-icon__search"></i> </button> </div> </div>
States
<div class="adb-search_field adb-input_row adb-js-input_row"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-input_row--item_content" placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square adb-input_row--item_content"> <i class="adb-icon__search"></i> </button> </div> </div>
<div class="adb-search_field adb-input_row adb-js-input_row adb-is-error"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-input_row--item_content" placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square adb-input_row--item_content"> <i class="adb-icon__search"></i> </button> </div> </div>
<div class="adb-search_field adb-input_row adb-js-input_row adb-is-disabled"> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-search_field--input adb-input_row--item_content" disabled placeholder="Search" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-button__square adb-input_row--item_content" disabled> <i class="adb-icon__search"></i> </button> </div> </div>
These are the same as Input Rows states.
With Filters
<div class="adb-search_field adb-input_row adb-js-input_row"> <div class="adb-input_row--item"> <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset"> <select> <option>All</option> <option> modi ut </option> <option> cumque atque </option> <option> et distinctio </option> </select> </div> </div> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-input_row--item_content adb-search_field--input" placeholder="Find Applications for Your Business" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-input_row--item_content" type="submit"> <i class="adb-icon__search"></i> Search </button> </div> </div>
<div class="adb-search_field adb-input_row adb-js-input_row"> <div class="adb-input_row--item"> <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small"> <select> <option>All</option> <option> optio explicabo </option> <option> incidunt ratione </option> <option> ea nemo </option> </select> </div> </div> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-input_row--item_content adb-search_field--input adb-text__small" placeholder="Find Applications for Your Business" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-input_row--item_content adb-button__small" type="submit"> <i class="adb-icon__search"></i> Search </button> </div> </div>
<div class="adb-search_field adb-input_row adb-input_row__full_width adb-js-input_row"> <div class="adb-input_row--item"> <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset"> <select> <option>All</option> <option> animi aut </option> <option> iure perspiciatis </option> <option> quasi modi </option> </select> </div> </div> <div class="adb-input_row--item adb-input_row--primary"> <input class="adb-input_row--item_content adb-search_field--input" placeholder="Find Applications for Your Business" type="search"> </div> <div class="adb-input_row--item"> <button class="adb-input_row--item_content" type="submit"> <i class="adb-icon__search"></i> Search </button> </div> </div>
Auto-Complete Search
<div class="adb-search_field adb-search_field__auto"> <span class="adb-search_field--affix adb-search_field--affix__default"></span> <span class="adb-search_field--affix adb-search_field--affix__loading"> <span class="adb-loading"> <span class="adb-loading--text">Loading...</span> </span> </span> <input class="adb-js-auto_search--input adb-search_field--input" id="name-search" placeholder="Search" type="search"> <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a> </div>
<div class="adb-search_field adb-search_field__auto"> <span class="adb-search_field--affix adb-search_field--affix__default"></span> <span class="adb-search_field--affix adb-search_field--affix__loading"> <span class="adb-loading"> <span class="adb-loading--text">Loading...</span> </span> </span> <input class="adb-js-auto_search--input adb-search_field--input adb-text__small" id="name-search" placeholder="Search" type="search"> <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a> </div>