Filter

The Filter pattern lets users restrict which options they are shown to fit their search criteria.

Desktop example

Filter

  • Government/local authority
  • Heat pumps
Category title
HTML
<div class="filter">
  <div class="filter-header">
    <div class="filter-header-title">
      <h2 class="h4">Filter</h2>
    </div>
    <button type="button" class="btn btn-primary btn-sm">Apply filters</button>
  </div>
  <div class="filter-content">
    <div class="filter-selected">
      <button class="clear-filters link" href="">Clear all filters</button>
      <ul class="filter-tags">
        <li><span class="filter-tag">Government/local authority</span></li>
        <li><span class="filter-tag">Heat pumps</span></li>
      </ul>
    </div>
    <div class="filter-options">
      <div class="form-group">
        <fieldset class="fieldset">
          <legend role="button" class="fieldset-legend h6" tabindex="0" data-bs-toggle="collapse" data-bs-target="#checkboxes1" aria-expanded="true" aria-controls="collapseExample">Category title</legend>
          <div id="checkboxes1" class="checkboxes show">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="1-1" id="cat1-1" checked>
              <label class="form-check-label" for="cat1-1">
                Government/local authority
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="1-2" id="cat1-2">
              <label class="form-check-label" for="cat1-2">
                Option 2
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="1-3" id="cat1-3">
              <label class="form-check-label" for="cat1-3">
                Option 3
              </label>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="form-group">
        <fieldset class="fieldset">
          <legend role="button" class="fieldset-legend h6" tabindex="0" data-bs-toggle="collapse" data-bs-target="#checkboxes2" aria-expanded="false" aria-controls="collapseExample">Category title 2</legend>
          <div id="checkboxes2" class="checkboxes collapse">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="2-1" id="cat2-1" checked>
              <label class="form-check-label" for="cat2-1">
                Heat pumps
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="2-2" id="cat2-2">
              <label class="form-check-label" for="cat2-2">
                Option 2
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="2-3" id="cat2-3">
              <label class="form-check-label" for="cat2-3">
                Option 3
              </label>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</div>