Filter (UI)
Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
Applying a filter is easy. Remembering that one is applied is the problem, and it is what produces the most expensive filter bug: a user filters, navigates away, comes back, sees an empty or short list, and concludes their data is missing. Active filters must be visible as removable chips near the results, with a single clear-all, not folded into a panel that closes.
Filter state belongs in the URL. That makes a filtered view shareable, survives a refresh, and makes browser back behave. Counts beside each option — “Paid (48)” — prevent dead ends by showing which choices lead somewhere, and disabling or hiding options that would return nothing is kinder than letting people discover it one click at a time.
Apply live or on submit
Live filtering feels responsive on small, fast sets. On slow queries or multi-select facets, an explicit Apply avoids firing a request on every checkbox and lets people build a query before running it. Choose one per surface and be consistent.
In practice
A marketplace kept filters in a collapsible sidebar that closed on mobile after applying. Users who filtered by city then browsed away returned to a short list with no visible reason. “Where did all the listings go” was a recurring support theme. Adding a persistent row of removable filter chips above the results ended it.
Where teams get it wrong
- Active filters invisible, so a short list reads as missing data.
- Filter state kept in component state instead of the URL — no sharing, no refresh, broken back button.
- No option counts, so people hit zero-result combinations one click at a time.
- No clear-all, forcing the user to undo six facets individually.
- Filters that reset when the user opens a record and returns.
( Learn more )
Related terms
All terms- Search (UI)The search control and the results behind it — where people go when they know what they want and cannot find it.
- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
- Pagination (UI)Splitting a long list across pages with controls to move between them — the alternative to infinite scroll and load-more.
- Chip (UI)A compact interactive element representing an input, filter, selection or attribute — small, often removable, usually appearing in groups.