One particular type of toolbar item is called the ToolbarFilter
. When used, selected filters are displayed in chip groups below the toolbar. Placing any ToolbarFilter
inside of a toggle group makes the toolbar responsive.
Using a ToolbarFilter
requires three properties:
First is a managed array of selected filters called chips
as strings or ReactNodes.
An onDelete
callback function to be executed whenever the user deletes a selected filter chip.
A categoryName
which will be used to label the chip group.
1) Define the required onDelete
function to be passed to each ToolbarFilter
.
Add the function to the ToolbarDemoApp
class. Make sure to add it below the onSelect
function definition in the ToolbarDemoApp
class.
The onDelete
callback function is executed whenever the user deletes a selected filter chip.
onDelete = (type = "", id = "") => {
if (type) {
this.setState((prevState) => {
prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
return {
filters: prevState.filters,
}
});
} else {
this.setState({
filters: {
name: [],
risk: [],
status: [],
}
})
}
};
2) Locate the following three ToolbarItems
inside the ToolbarToggleGroup
:
<ToolbarItem variant="search-filter">
<Input value="" id="step2Input" ariaLabel="Step 2 input" />
</ToolbarItem>
<ToolbarGroup variant="filter-group">
<ToolbarItem>
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarItem>
<ToolbarItem>
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarItem>
</ToolbarGroup>
3) Replace each of the three ToolbarItems
inside the ToolbarToggleGroup
with a ToolbarFilter
.
4) Pass an appropriate label as the categoryName
property to each ToolbarFilter
.
The categoryName
is a required property of ToolbarFilter
. After completing step 4 and before completing step 5, there will be an error indicating that the categoryName
property is missing from ToolbarFilter
.
a) For the first ToolbarFilter
(containing a text input) add the property categoryName="Name"
.
b) For the second ToolbarFilter
(containing the status filter) add the property categoryName="Status"
.
c) For the third ToolbarFilter
(containing the risk filter) add the property categoryName="Risk"
.
Once completed, the contents of the ToolbarToggleGroup
should appear as follows:
<ToolbarFilter>
<Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</ToolbarFilter>
<ToolbarGroup variant="filter-group">
<ToolbarFilter>
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarFilter>
<ToolbarFilter>
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarFilter>
</ToolbarGroup>
5) Add a chips
property to each of the ToolbarFilter
components.
Each of the ToolbarFilter
components requires a chips
property. In this case, the state managed filters array's properties can serve as the chips
property for each ToolbarFilter
.
a) For the first ToolbarFilter
(containing a text input) add the property chips={filters.name}
.
b) For the second ToolbarFilter
(containing the status filter) add the property chips={filters.status}
.
c) For the third ToolbarFilter
(containing the risk filter) add the property chips={filters.risk}
.
6) Pass the onDelete function as the deleteChip
property to each ToolbarFilter
.
Once steps 4, 5, and 6 are completed, the contents of the ToolbarToggleGroup
should appear as follows:
<ToolbarFilter chips={filters.name} deleteChip={this.onDelete} categoryName="Name">
<Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</ToolbarFilter>
<ToolbarGroup variant="filter-group">
<ToolbarFilter chips={filters.status} deleteChip={this.onDelete} categoryName="Status">
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarFilter>
<ToolbarFilter chips={filters.risk} deleteChip={this.onDelete} categoryName="Risk">
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarFilter>
</ToolbarGroup>
7) Experiment with two optional properties passed to Toolbar
.
Two properties can be optionally added to the top-level Toolbar
component when using a ToolbarFilter
.
a) Pass a clearAllFilters
event handler to Toolbar
.
A 'Clear All Filters' action will appear alongside the applied filters chip groups.
b) Pass a collapseListedFiltersBreakpoint
is passed to Toolbar
.
The chip groups will collapse to a summary message at the passed in breakpoint, making the applied filters chip groups more responsive.
Add the following code to the Toolbar
to see optional properties in action.
clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl"
Note: Take some time to experiment with the toolbar to see how it responds to changes in viewport size and the number of filters applied.

At smaller viewport widths, a responsive collapsed view of the toolbar and applied filters should be visible.
