Search finds text across a large corpus when someone knows roughly what to type. Filters narrow a list already on screen by known categories. Gmail uses both: search for words, filters for unread or labels.

Should filters live in a panel or inline?

Inline chips above the list work for three to six active filters people toggle often. A side panel suits many facets with long option lists. Mobile usually moves filters behind a button that opens a sheet.

Use both when checkboxes set state and chips show what is active. Removing a chip should uncheck the matching box. Chips alone without a panel hide available criteria until someone knows to add them.

What if nothing matches?

Show an empty state in the list area that names the active filters and offers Clear all. A blank table with no explanation reads as a bug.

AND or OR between filters?

AND is default: Open and Invoices means both must be true. OR across facets needs explicit UI, like a tag picker that says any of these. Document the logic because people assume AND.

Persist filter state in the URL?

Yes when people share filtered views or use the back button. Query parameters for each active facet let a link reopen the same slice. Session-only state is fine for ephemeral triage.

Filters

Filters slice an existing list by criteria someone toggles on and off. The full set stays in memory while the view shows only what matches.

Structure and navigationBuild difficulty: Hard<fieldset>

Also called Filter bar, Facet filters, Refinement chips.

Toggle checkboxes or remove chips: the list below narrows immediately. Clear all resets both groups.

For designers

Filters turn a long list into a working set. E-commerce category pages, issue trackers and finance tables all expose facets because scanning three hundred rows is slower than toggling Overdue and watching the list drop to twelve.

The cost is state management. Every checkbox, chip and clear action must stay in sync. A chip that does not remove its checkbox trains people that the filter bar is decoration.

Amazon's left rail and Jira's filter bar both show active constraints where people can see them. Hidden filter state produces support questions about missing rows that are only filtered out. Visible chips pay for their space by making the current slice legible.

Use filters when

People already have a list in view and need to narrow it by status, type or tag
Several criteria can be active at once and combine with AND logic
Removing a criterion should instantly restore matching rows without a reload

Reach for something else when

People need to find one item by name across the whole product. Use search instead.
There is one dropdown with one dimension and no need to combine filters. Use a select instead.
The criteria change the server query and the list is empty until a new fetch finishes. Use a combobox with search instead.

Variants

OpenOverdueInvoices

Chips above mirror active checkboxes. Removing a chip turns off the matching box.

Chips. Active criteria as removable badges above the list. Quick to scan and clear.

Checkbox groups. Fieldsets for each facet, Status and Type in the demo. Clear labels and legends.

Clear all. One action that resets every facet when the list hits zero rows.

How to build filters

Group each facet in a fieldset with a legend. Checkboxes write to shared filter state that drives the list query or client filter.

<fieldset>
  <legend>Status</legend>
  <label><input type="checkbox" name="status" value="open"> Open</label>
  <label><input type="checkbox" name="status" value="overdue"> Overdue</label>
</fieldset>

Mirror active values as chips above the list. Each chip remove button unchecks the source control. Announce result count changes with aria-live="polite" on the list region so screen readers hear when rows drop to zero.

Disable Apply buttons when filters are instant. If filtering hits the server, show loading on the list and keep chips in sync with the request, not with optimistic state that snaps back on error.

Counts beside checkbox labels help before someone commits. Open (24) tells people the slice is worth toggling. Update counts when other facets change if the numbers are cheap to compute client-side.

Mobile filter sheets should repeat the same chip row at the top when the sheet closes, so people see what stayed active without reopening the panel.

Edge cases

Zero facets selected. Decide whether that means show all or show none, and document it. Most products treat empty as show all.

Conflicting filters. When two criteria cannot combine, disable the incompatible checkbox and say why in a hint, rather than returning an empty list silently.

Reduced motion. List updates can fade rows. Under prefers-reduced-motion: reduce, swap the list without animation.

Saved views. Named filter presets, like Overdue invoices, are filters plus a shortcut. They should still render as chips someone can edit, not as a black box mode with no visible criteria.

Common questions

Filters or search?: Search finds text across a large corpus when someone knows roughly what to type. Filters narrow a list already on screen by known categories. Gmail uses both: search for words, filters for unread or labels.
Should filters live in a panel or inline?: Inline chips above the list work for three to six active filters people toggle often. A side panel suits many facets with long option lists. Mobile usually moves filters behind a button that opens a sheet.
Chips or checkboxes?: Use both when checkboxes set state and chips show what is active. Removing a chip should uncheck the matching box. Chips alone without a panel hide available criteria until someone knows to add them.
What if nothing matches?: Show an empty state in the list area that names the active filters and offers Clear all. A blank table with no explanation reads as a bug.
AND or OR between filters?: AND is default: Open and Invoices means both must be true. OR across facets needs explicit UI, like a tag picker that says any of these. Document the logic because people assume AND.
Persist filter state in the URL?: Yes when people share filtered views or use the back button. Query parameters for each active facet let a link reopen the same slice. Session-only state is fine for ephemeral triage.

Last reviewed 26 AUG 2026