Search fields and search bar styles
.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>
.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>
.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>