Filter Chips Row
Removable filter chips above results with a live match count and a clear all control.
Removable filter chips above results with a live match count and a clear all control.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Filter Chips Row is the applied-filter strip that sits above a results list, four active tokens rendered as rounded pills: Status: Open, Owner: Me, Priority: High, and Label: Bug. Each chip carries an X to dismiss it individually; a Clear all ghost button removes the set at once. The result count updates live, 14 of 312 issues match when all four are on, and climbs as chips are removed.
Filters are one const array; a lookup map of sorted key combinations drives the live count so every removal state shows an honest number without a network call. The count is the signal that the filter is doing something real.
Reach for this block above any filterable list or table, wired to your filter state store. Keep the chip labels consistent with the filter UI that set them so users know which panel controls which pill.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the issue tracker filter bar. Other chip rows:
Tip: always show the result count beside the chips; absence of a count makes users unsure the filter ran.