The Filter pattern lets users restrict which options they are shown to fit their search criteria.
Desktop example
Filter
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><a class="filter-tag" href="/path/to/remove/this">Government/local authority</a></li>
<li><a class="filter-tag" href="/path/to/remove/this">Heat pumps</a></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>