Search

Search fields and search bar styles

Class .wb-search .wb-search__icon .wb-search__field

Our standard styling for a search input. It adds a search icon to input field.

<div class='wb-search'>
  <i class='fa fa-search wb-search__icon'></i>
  <input type="text" placeholder="Search by name, email" class="wb-search__field">
</div>

Class .wb-search-bar, .wb-search-bar__filter, .wb-search-bar__field, .wb-search-bar__submit

Typically you want to use the search input with a submit button or an additional filter (like a dropdown or a checkbox). Use the .wb-search-bar as a parent container, and wrap each element with .wb-search-bar__filter, .wb-search-bar__field, or .wb-search-bar__submit. Note that .wb-search-bar__field should be an adjacent sibling of .wb-search-bar__filter.

Search bar with input field and submit button.

Search bar with dropdown filter, input field, and submit button.

Search bar with dropdown filter & input field, but no submit button.

<p>Search bar with input field and submit button.</p>
<div class='wb-search-bar'>
  <div class='wb-search-bar__field'>
     <div class='wb-search'>
        <i class='fa fa-search wb-search__icon'></i>
        <input type="text" placeholder="Search by name, email" class="wb-search__field">
     </div>
  </div>
  <div class='wb-search-bar__submit'>
     <button type='submit' class='wb-button'>Search</button>
  </div>
</div>
<p class='wb-u-margin-t-6'>Search bar with dropdown filter, input field, and submit button.</p>
<div class='wb-search-bar'>
  <div class='wb-search-bar__filter'>
    <div class='wb-dropdown'>
      <select class='wb-dropdown__select' id='moop' name='moop'>
        <option value='value_1'>All</option>
        <option value='value_2'>Only this</option>
        <option value='value_3'>Only that</option>
      </select>
    </div>
  </div>
  <div class='wb-search-bar__field'>
     <div class='wb-search'>
        <i class='fa fa-search wb-search__icon'></i>
        <input type="text" placeholder="Search by name, email" class="wb-search__field">
     </div>
  </div>
  <div class='wb-search-bar__submit'>
     <button type='submit' class='wb-button'>Search</button>
  </div>
</div>
<p class='wb-u-margin-t-6'>Search bar with dropdown filter & input field, but no submit button.</p>
<div class='wb-search-bar'>
  <div class='wb-search-bar__filter'>
    <div class='wb-dropdown'>
      <select class='wb-dropdown__select' id='loop' name='loop'>
        <option value='value_1'>All</option>
        <option value='value_2'>Only this</option>
        <option value='value_3'>Only that</option>
      </select>
    </div>
  </div>
  <div class='wb-search-bar__field'>
     <div class='wb-search'>
        <i class='fa fa-search wb-search__icon'></i>
        <input type="text" placeholder="Search by name, email" class="wb-search__field">
     </div>
  </div>
</div>

Class .wb-search .wb-search__input .wb-search__submit

Use this for our new search bar style. The submit button and input field are visually more integrated, which helps make the page seems less busy.

<div class='wb-search'>
  <input type="text" placeholder="Search by name, email" class="wb-search__input">
  <button type='submit' class='wb-icon-button wb-icon-button--primary wb-search__submit'>
    <i class='fa fa-search wb-icon-button__icon'></i>
  </button>
</div>