Filters
A filter bar is the row of controls above a table, catalogue or result list that narrows what is shown without changing what is stored: a date range, a segmented switch between states, a set of removable chips each holding one condition. Conditions combine, so the bar has to say plainly which ones are on, and let any single one be taken off without rebuilding the rest.
Filter state is application state and repays being treated as such: put it in the URL, so a narrowed view can be reloaded, sent to a colleague and linked from a report. The failure mode here is quiet. A filter left on from an earlier session makes a full table look empty, and what gets reported is missing data rather than a control nobody could see. Showing the result count beside the controls, giving every chip its own clear button and the bar a single reset, is what keeps that from happening.
Calendar
Best for
Dashboards, reports, anything scoped to a date range
Anatomy
A Today shortcut · a date-range preset dropdown paired with a range display · search · filter/settings actions
Table
Best for
Data tables, transaction lists, record browsers
Anatomy
An All/Income/Expenses segmented control · search · filter/settings actions · a working Sort by dropdown
Chips
Best for
Advanced filtering, faceted search, saved-filter bars
Anatomy
Removable filter chips that toggle between an unset Choose state and a filled value-with-clear-button state · search · filter/settings actions
Selectable chips
Best for
Filters picked by tapping, one answer or several
Anatomy
Single choice with a check · multiple choice with a plus that turns into a check · selected count · clear all · result count
Using Filters
Reach for it when
- A table long enough that scanning it is slower than narrowing it
- Records scoped by time, where a preset range answers most of the questions asked of them
- A catalogue with facets people combine: status and type and owner at once
- A result list where conditions need to come off one at a time
Reach for something else when
- Only a handful of rows exist: sorting, or nothing, beats a bar of controls over a short list
- Each person wants a different fixed view of the same set: saved views or tabs carry that better than filters reapplied by hand every visit
- The query is free text across everything rather than a narrowing by field. That is a search field, or a command menu when it spans kinds
Where it shows up
Transaction browsers
A ledger opens on everything and is read by narrowing: income or expenses first, then a sort, then a search inside what is left. The segmented switch carries the exclusive choice and the rest stacks on top.
Date-scoped reporting
A dashboard answers questions about a period, so the range is the primary control: a preset list for the common answers, a shortcut back to today, and the resolved range shown as text beside it.
Faceted catalogues
Chips hold one condition each, so somebody adds status, then type, then owner, and drops whichever turned out not to matter. An unset chip still names its field, which is how people learn what can be narrowed.
Admin record browsers
Support and operations staff work the same large tables all day. The value is removing one condition at a time rather than composing a fresh query for every question a customer asks them.
Questions
Should filters apply immediately or behind an Apply button?
Apply immediately when results are cheap to fetch and the change is visible, because that feedback is how people learn the way the filters combine. Use an explicit Apply when each query is expensive, when several fields are normally set together before anything is run, or on a long panel of criteria where partial states would fire a run of useless requests.
How do you show that filters are currently active?
Keep the applied conditions visible as filled controls or chips rather than hiding them inside a closed dropdown, and show how many results the current combination returns. Give each chip its own clear button and the bar one reset that clears everything. A filtered view that looks the same as an empty unfiltered one is what gets reported as a bug.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPFilters
A filter bar is the row of controls above a table, catalogue or result list that narrows what is shown without changing what is stored: a date range, a segmented switch between states, a set of removable chips each holding one condition. Conditions combine, so the bar has to say plainly which ones are on, and let any single one be taken off without rebuilding the rest.
Filter state is application state and repays being treated as such: put it in the URL, so a narrowed view can be reloaded, sent to a colleague and linked from a report. The failure mode here is quiet. A filter left on from an earlier session makes a full table look empty, and what gets reported is missing data rather than a control nobody could see. Showing the result count beside the controls, giving every chip its own clear button and the bar a single reset, is what keeps that from happening.
Calendar
Best for
Dashboards, reports, anything scoped to a date range
Anatomy
A Today shortcut · a date-range preset dropdown paired with a range display · search · filter/settings actions
Table
Best for
Data tables, transaction lists, record browsers
Anatomy
An All/Income/Expenses segmented control · search · filter/settings actions · a working Sort by dropdown
Chips
Best for
Advanced filtering, faceted search, saved-filter bars
Anatomy
Removable filter chips that toggle between an unset Choose state and a filled value-with-clear-button state · search · filter/settings actions
Selectable chips
Best for
Filters picked by tapping, one answer or several
Anatomy
Single choice with a check · multiple choice with a plus that turns into a check · selected count · clear all · result count
Using Filters
Reach for it when
- A table long enough that scanning it is slower than narrowing it
- Records scoped by time, where a preset range answers most of the questions asked of them
- A catalogue with facets people combine: status and type and owner at once
- A result list where conditions need to come off one at a time
Reach for something else when
- Only a handful of rows exist: sorting, or nothing, beats a bar of controls over a short list
- Each person wants a different fixed view of the same set: saved views or tabs carry that better than filters reapplied by hand every visit
- The query is free text across everything rather than a narrowing by field. That is a search field, or a command menu when it spans kinds
Where it shows up
Transaction browsers
A ledger opens on everything and is read by narrowing: income or expenses first, then a sort, then a search inside what is left. The segmented switch carries the exclusive choice and the rest stacks on top.
Date-scoped reporting
A dashboard answers questions about a period, so the range is the primary control: a preset list for the common answers, a shortcut back to today, and the resolved range shown as text beside it.
Faceted catalogues
Chips hold one condition each, so somebody adds status, then type, then owner, and drops whichever turned out not to matter. An unset chip still names its field, which is how people learn what can be narrowed.
Admin record browsers
Support and operations staff work the same large tables all day. The value is removing one condition at a time rather than composing a fresh query for every question a customer asks them.
Questions
Should filters apply immediately or behind an Apply button?
Apply immediately when results are cheap to fetch and the change is visible, because that feedback is how people learn the way the filters combine. Use an explicit Apply when each query is expensive, when several fields are normally set together before anything is run, or on a long panel of criteria where partial states would fire a run of useless requests.
How do you show that filters are currently active?
Keep the applied conditions visible as filled controls or chips rather than hiding them inside a closed dropdown, and show how many results the current combination returns. Give each chip its own clear button and the bar one reset that clears everything. A filtered view that looks the same as an empty unfiltered one is what gets reported as a bug.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
