UX Patterns Guide
Back to compare picker

Filter chips vs Filter panel vs Multi-select

Prefer filter chips when users need to toggle a small, visible set of high-frequency filters directly above the content being narrowed.

Filter chips live exampleFilter panel live exampleMulti-select live example

Decision dimensions

Dimension Filter chipsFilter panelMulti-select
UI or UX UI + UX - Compact chip set for toggling or removing result filtersUI + UX - Grouped filter control panel for narrowing a current result setUI + UX - Multi-value picker widget
UI guidance Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states.Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance Use filter chips for quick, low-cost filtering when users can understand the available criteria at a glance and combine a few chips without opening a larger panel.Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.Help users choose multiple values from a large, compact, or dynamic option set.
Good UI A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background.A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.Selected values are shown as removable chips or checked rows with clear labels.
Bad UI A single pill labelled Filter sits alone and behaves like a vague button.A filter drawer closes with no active count, leaving users unaware that filters are still hiding records.Selected values hidden inside a closed dropdown.
Good UX A user taps Urgent and Appeals, sees the result count drop immediately, then removes Appeals without losing the search query or sort order.A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX Tapping a chip changes the page route and clears the result context.Applying a filter silently resets the query, sort order, current page, and view density.Removing a value is impossible by keyboard.
Best fit A few common filters should stay visible and directly toggleable near the content.Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.Users choose many values from a long predefined list.
Avoid when There are many criteria, ranges, dates, or grouped fields that need a panel or form.The result set is small enough that scanning is faster than filtering.The set is short and independent choices should stay visible.
Required state Unselected chip set state with no active filters and a clear result count.Default state with no user-applied filters and an explicit result count.No selected values state with empty selected set.
Accessibility burden Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.Expose selected state for options and labels for remove controls.
Common misuse Using a lone chip as a generic Filter button.Hiding active filters inside a closed panel with no count, chips, or result-state summary.Hiding selected values inside a closed menu.

Filter chips

UI or UX
UI + UX - Compact chip set for toggling or removing result filters
UI guidance
Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states.
UX guidance
Use filter chips for quick, low-cost filtering when users can understand the available criteria at a glance and combine a few chips without opening a larger panel.
Good UI
A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background.
Bad UI
A single pill labelled Filter sits alone and behaves like a vague button.
Good UX
A user taps Urgent and Appeals, sees the result count drop immediately, then removes Appeals without losing the search query or sort order.
Bad UX
Tapping a chip changes the page route and clears the result context.
Best fit
A few common filters should stay visible and directly toggleable near the content.
Avoid when
There are many criteria, ranges, dates, or grouped fields that need a panel or form.
Required state
Unselected chip set state with no active filters and a clear result count.
Accessibility burden
Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.
Common misuse
Using a lone chip as a generic Filter button.

Filter panel

UI or UX
UI + UX - Grouped filter control panel for narrowing a current result set
UI guidance
Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.
UX guidance
Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.
Good UI
A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.
Bad UI
A filter drawer closes with no active count, leaving users unaware that filters are still hiding records.
Good UX
A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.
Bad UX
Applying a filter silently resets the query, sort order, current page, and view density.
Best fit
Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.
Avoid when
The result set is small enough that scanning is faster than filtering.
Required state
Default state with no user-applied filters and an explicit result count.
Accessibility burden
Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse
Hiding active filters inside a closed panel with no count, chips, or result-state summary.

Multi-select

UI or UX
UI + UX - Multi-value picker widget
UI guidance
Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance
Help users choose multiple values from a large, compact, or dynamic option set.
Good UI
Selected values are shown as removable chips or checked rows with clear labels.
Bad UI
Selected values hidden inside a closed dropdown.
Good UX
Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX
Removing a value is impossible by keyboard.
Best fit
Users choose many values from a long predefined list.
Avoid when
The set is short and independent choices should stay visible.
Required state
No selected values state with empty selected set.
Accessibility burden
Expose selected state for options and labels for remove controls.
Common misuse
Hiding selected values inside a closed menu.
Decision rules
  • Prefer filter chips when users need to toggle a small, visible set of high-frequency filters directly above the content being narrowed.
  • Prefer a filter panel when users need grouped categories, ranges, dates, text fields, batch apply, mobile drawer behavior, or more filters than can stay scannable in one chip set.
  • Prefer multi-select when the selected values are form input values that will be submitted or saved, especially when users need search, async option loading, validation limits, or selected-value chips outside a picker.
  • Use filter chips as controls when each chip directly changes which results are included or excluded, not when the chip is merely a decorative tag or status label.
  • Use dismissible applied-filter chips when filters were chosen elsewhere and the chip's primary job is to summarize and remove that active criterion.
  • Keep filter-chip labels short, user-facing, and stable in position; do not reorder existing chips after selection because users rely on the set's spatial memory.
  • Allow multiple filter chips to be selected when several criteria can combine; use choice chips, radio groups, or segmented controls when exactly one option must be active.
  • Show selected, unselected, focused, disabled, overflow, and no-result states when chip selections update a result set.
  • Do not mix filter chips with badges that look similar but cannot be removed or toggled; noninteractive tags need a different visual treatment.
  • Do not use filter chips for sorting because sort changes result order while chip filters change result inclusion.
Inspect live examples
Filter chipsFilter panelMulti-select
Failure modes
  • A single chip appears alone as a fake button, giving no sense that it belongs to a filter set.
  • Selected chips reorder to the front after every tap, causing users to lose track of where options were.
  • Chip labels say New, Hot, or 1 without naming the filter category or result effect.
  • A removable applied chip lacks an accessible remove label, so screen-reader users hear only the visible text.
  • A row of ten wrapped chip lines pushes the result list below the fold when a panel or drawer would be more scannable.
  • Clearing a chip resets query, sort, pagination, and saved view rather than removing only that filter.