UX Patterns Guide
Back to compare picker

Filter chips vs Filter panel vs Multi-select

Use filter chips for a compact set of high-frequency result filters, a filter panel for grouped criteria management, and multi-select for choosing several form values from a longer option set.

Filter chips live exampleFilter panel live exampleMulti-select live example
Learn the decision

Match the interaction to the person's task

Use filter chips for a compact set of high-frequency result filters, a filter panel for grouped criteria management, and multi-select for choosing several form values from a longer option set.

Filter chips

Use it when: A few common filters should stay visible and directly toggleable near the content.

Make this state clear: Selected chip state with visible selected indicator and updated result count.

Observe the result: A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates.

Study the full pattern →

Filter panel

Use it when: Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.

Make this state clear: Applied state with active-filter count, result count, and removable applied criteria near the results.

Observe the result: 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.

Study the full pattern →

Multi-select

Use it when: Users choose many values from a long predefined list.

Make this state clear: Open filtered option list state.

Observe the result: Selection limits and duplicates are handled before submit.

Study the full pattern →

Practice the judgment: Imagine this situation: Selected chips reorder to the front after every tap, causing users to lose track of where options were. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

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 Help the person reach a clear task outcome.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 panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading.Selected values hidden inside a closed dropdown.
Good UX A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates.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.Selection limits and duplicates are handled before submit.
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 Selected chip state with visible selected indicator and updated result count.Applied state with active-filter count, result count, and removable applied criteria near the results.Open filtered option list state.
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.Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.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
Help the person reach a clear task outcome.
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 tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates.
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
Selected chip state with visible selected indicator and updated 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 panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading.
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
Applied state with active-filter count, result count, and removable applied criteria near the results.
Accessibility burden
Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse
Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.

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
Selection limits and duplicates are handled before submit.
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
Open filtered option list state.
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.

Saved items