Search box with filters

For better performance during retrieving results, filters can be selected before searching.

Interactive demo

Option1: When the filters are more than 4

Multiselect dropdown with check boxes are used to show the filters.

When filters are opened

When filters are selected

Mobile View

<div class="input-group search-box search-filter-multiselect">
    <div class="input-group-prepend"> <i class="far fa-search"></i> </div>
    <input type="search" class="form-control" placeholder="Search by keyword" aria-label="" aria-describedby="">
    <select class="form-control searchFilters" id="searchFilters" multiple>
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
      <option>Item 5</option>
      <option>Item 6</option>
    </select>
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">Search</button>
    </div>
  </div>

Option2: When the filters are upto 4

Checkboxes are shown as filters below the search field.

<div class="search-box search-filter-checkbox bg-khaki mt-5">
    <div class="input-group ">
      <div class="input-group-prepend"> <i class="far fa-search"></i> </div>
      <input type="search" class="form-control" placeholder="Search by keyword" aria-label="" aria-describedby="">
    </div>
    <div class="form-group mt-2"> <span class="mt-2 me-2 d-md-inline-block d-sm-block"> <strong> Search in</strong></span>
      <div class="form-check form-check-inline d-sm-inline-block">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">
          Category 1 <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline d-sm-inline-block">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">
          Category 2 <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline d-sm-inline-block">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">
          Category 3 <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline d-sm-inline-block">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">
          Category 4 <span class="checkbox-overlay "></span> </label>
      </div>
    </div>
    <div class="text-center">
      <button class="btn btn-primary" type="button">Search</button>
    </div>
  </div>

When to use

Search box with filters should be used when:

• To improve the search performance when there are more records, meaning the information is massive, actively searching can become too slow to be practical. Filter checkboxes will return the results faster.

• When users are searching an application or website they’re unfamiliar with, filtered search feature can give them a better idea of data structure and available categories.