Filter Bar
Definition
Filter Bars are used to narrow down results by common characteristics.
Semantically, the Filter Bar is an Accordion group, inside each Accordion is a List, and each list item contains a checkbox and label.
Description
Use the Filter Bar when you want to toggle a category of items in a user interface.
Adding a count to the Filter Bar title helps users know filters are on in that accordion.
Component Example with Code
Filter Bar Example
All Filters
Clear filters
<div class="col-12 col-md-6">
<div class="d-md-block d-none">
<div
class="mb-4 d-flex flex-wrap align-items-center justify-content-between align-self-center">
<h4>All Filters</h4>
<a href="#">Clear filters</a>
</div>
<div class="accordion mb-3" id="accordionfilterParent">
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="headingstatusFilter">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter"
aria-expanded="false"
aria-controls="collapsestatusFilter">
<div class="d-flex flex-column justify-content-start">
<span class="title">Filter by Status</span>
</div>
</button>
</h2>
<!-- data-bs-parent is omitted since each accordion item has no scope to its parent -->
<div
id="collapsestatusFilter"
class="accordion-collapse collapse"
aria-labelledby="statusFilter">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value="all"
id="allCheckedStatus"
/>
<label class="form-check-label" for="allCheckedStatus">
All</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="todo"
/>
<label class="form-check-label" for="todo"> To Do</label>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="incomplete"
/>
<label class="form-check-label" for="incomplete">
Incomplete</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="changesNeeded"
/>
<label class="form-check-label" for="changesNeeded">
Changes Needed</label
>
</div>
</li>
</ul>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="completed"
/>
<label class="form-check-label" for="completed">
Completed</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="approved"
/>
<label class="form-check-label" for="approved">
Approved</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="rejected"
/>
<label class="form-check-label" for="rejected"
>Rejected</label
>
</div>
</li>
</ul>
</li>
</ul>
<!-- end -->
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter"
aria-expanded="false"
aria-controls="collapsestatusFilter">Hide</button
>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="headingstatusFilter2">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter2"
aria-expanded="false"
aria-controls="collapsestatusFilter2">
<div class="d-flex flex-column justify-content-start">
<span class="title">Filter by Subject</span>
</div>
</button>
</h2>
<!-- data-bs-parent is omitted since each accordion item has no scope to its parent -->
<div
id="collapsestatusFilter2"
class="accordion-collapse collapse"
aria-labelledby="statusFilter2">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="allCheckedSubject"
/>
<label class="form-check-label" for="allCheckedSubject">
All</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="science"
/>
<label class="form-check-label" for="science"
>Science</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="anthropology"
/>
<label class="form-check-label" for="anthropology"
>Anthropolgy</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="biology"
/>
<label class="form-check-label" for="biology"
>Biology</label
>
</div>
</li>
</ul>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="math"
/>
<label class="form-check-label" for="math">Math</label>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="algebra"
/>
<label class="form-check-label" for="algebra"
>Algebra</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="calculus"
/>
<label class="form-check-label" for="calculus"
>Calculus</label
>
</div>
</li>
</ul>
</li>
</ul>
<!-- end -->
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter2"
aria-expanded="false"
aria-controls="collapsestatusFilter2">Hide</button
>
</div>
</div>
</div>
</div>
</div>
<div class="d-md-none d-flex justify-content-between align-items-center">
<button
class="btn btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#filterModal"
type="button">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="sliders"
class="svg-inline--fa fa-sliders"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
><path
fill="currentColor"
d="M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z"
></path></svg
>
Filter (6)</button
>
<div
class="modal fade"
id="filterModal"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="filterModalLabel"
aria-hidden="true"
tabindex="-1">
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-3" id="filterModalLabel">
All Filters
</h2>
<button
class="btn-close"
data-bs-dismiss="modal"
type="button"
aria-label="Close"></button>
</div>
<div class="modal-body py-1">
<div
class="d-flex align-items-center flex-wrap justify-content-md-between my-3">
<div class="d-flex flex-wrap align-items-center w-100 mb-2">
<label class="h4 me-3 mb-sm-1" for="sort">Sort by:</label>
<div class="w-100">
<select name="sort" id="sort" class="form-select">
<option selected="" value="1">Date</option>
</select>
</div>
</div>
<div class="d-flex flex-wrap align-items-center w-100 mb-2">
<label class="h4 me-3 mb-sm-1" for="pages"
>View per page:</label
>
<div class="w-100">
<select name="pages" id="pages" class="form-select">
<option selected="" value="1">10</option>
</select>
</div>
</div>
</div>
<h3 class="fs-4">Filter Categories:</h3>
<div class="accordion mb-3" id="accordionfilterParentSmall">
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="headingstatusFilterSmall">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilterSmall"
aria-expanded="false"
aria-controls="collapsestatusFilterSmall">
<div class="d-flex flex-column justify-content-start">
<span class="title">Filter by Status</span>
</div>
</button>
</h2>
<!-- data-bs-parent is omitted since each accordion item has no scope to its parent -->
<div
id="collapsestatusFilterSmall"
class="accordion-collapse collapse"
aria-labelledby="statusFilterSmall">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value="all"
id="allCheckedStatus2"
/>
<label
class="form-check-label"
for="allCheckedStatus2">
All</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="todo2"
/>
<label class="form-check-label" for="todo2">
To Do</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="incomplete2"
/>
<label
class="form-check-label"
for="incomplete2">
Incomplete</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="changesNeeded2"
/>
<label
class="form-check-label"
for="changesNeeded2">
Changes Needed</label
>
</div>
</li>
</ul>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="completed2"
/>
<label class="form-check-label" for="completed2">
Completed</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="approved2"
/>
<label
class="form-check-label"
for="approved2">
Approved</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="rejected2"
/>
<label
class="form-check-label"
for="rejected2">Rejected</label
>
</div>
</li>
</ul>
</li>
</ul>
<!-- end -->
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilterSmall"
aria-expanded="false"
aria-controls="collapsestatusFilterSmall">Hide</button
>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="headingstatusFilter2Small">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter2Small"
aria-expanded="false"
aria-controls="collapsestatusFilter2Small">
<div class="d-flex flex-column justify-content-start">
<span class="title">Filter by Subject</span>
</div>
</button>
</h2>
<!-- data-bs-parent is omitted since each accordion item has no scope to its parent -->
<div
id="collapsestatusFilter2Small"
class="accordion-collapse collapse"
aria-labelledby="statusFilter2Small">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="allCheckedSubject2"
/>
<label
class="form-check-label"
for="allCheckedSubject2">
All</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="science2"
/>
<label class="form-check-label" for="science2"
>Science</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="anthropology2"
/>
<label
class="form-check-label"
for="anthropology2">Anthropolgy</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="biology2"
/>
<label class="form-check-label" for="biology2"
>Biology</label
>
</div>
</li>
</ul>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="math2"
/>
<label class="form-check-label" for="math2"
>Math</label
>
</div>
<ul>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="algebra2"
/>
<label class="form-check-label" for="algebra2"
>Algebra</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="calculus2"
/>
<label
class="form-check-label"
for="calculus2">Calculus</label
>
</div>
</li>
</ul>
</li>
</ul>
<!-- end -->
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapsestatusFilter2Small"
aria-expanded="false"
aria-controls="collapsestatusFilter2Small">Hide</button
>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="d-grid gap-2 col-12 mx-auto">
<button class="btn btn-primary" type="button">Apply</button>
</div>
</div>
</div>
</div>
</div>
<a href="#">Clear all filters</a>
</div>
</div>
Accessibility Considerations
The filtered items should be selected when the user clicks either the label or the checkbox.
When a checkbox is in focus its corresponding label is bolded. You can tab to each checkbox and select(deselect) the filter with the space bar.
The component is easier to use if it is placed to the left of the content it is filtering. This makes it easier to visualize changes and track the relationships between the checkboxes and their corresponding labels.
Refer to our section on indeterminate state on how to properly display parent-child checkbox states when filtering.
Each label in the filter bar has a css property of "width: 100%"" to increase the target area horizontally. If a user taps any area
between the label and checkbox the field with be selected.
Guidelines and Restrictions
Do not include the data-bs-parent attribute from Bootstrap so that
accordions remain open unless the user closes it.
The filter bar incorporates our accordion component to show and hide other filter groups.
When using the accordordion in a group it is important to ensure that
accordion items stay open when their siblings are collapsed. Doing this
ensures that the user does not lose sight of what filters have been applied.
Omit the data-bs-parent attribute on each .accordion-collapse to make the accordion items stay open when another is opened.
On mobile devices and small screens, the filter accordions are hidden by default and a "Filters" button is displayed instead. Clicking the button displays a modal that contains the sorting and pagination options followed by the filter accordions and an "Apply" button. When implementing this in React, the state of the sorting, pagination and filter options in the modal must be synchronized with state of those options on the desktop/large screen display.