UX Patterns Guide
Back to compare picker

Filter reset that clears unrelated search vs Filter panel vs Basic search vs Filter chips vs Saved search

Flag filter reset that clears unrelated search when the control label says Clear filters or Reset filters but the action also clears the submitted query, search box text, search scope, search history item, saved search identity, URL state, sort order, page size, selected view, or layout state.

Filter reset that clears unrelated search live exampleFilter panel live exampleBasic search live exampleFilter chips live exampleSaved search live example

Decision dimensions

Dimension Filter reset that clears unrelated searchFilter panelBasic searchFilter chipsSaved search
UI or UX UI + UX - Over-broad filter reset anti-patternUI + UX - Grouped filter control panel for narrowing a current result setUI + UX - Search input and result listUI + UX - Compact chip set for toggling or removing result filtersUI + UX - Persisted named search criteria for rerunning a dynamic result set
UI guidance Treat Clear filters or Reset filters as scoped to filter criteria only; keep the submitted search query, query field, search scope, saved search identity, sort, pagination policy, and view settings visible and unchanged unless the control explicitly names those 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 labeled search field, result count, matching rows, and clear action.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 Save search near the active query and result summary, and show exactly which query text, filters, scope, and sort will be stored.
UX guidance Use this anti-pattern during review when users try to loosen filters but lose the search term or saved search context that got them to the result set.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 find known content without browsing every category.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 saved search when users repeatedly need the same dynamic result set and must rerun it without rebuilding query, filters, sort, and scope.
Good UI A result page shows Query: appeal and filters Status: Open, Date: Last 30 days; Clear filters removes only the filter chips and keeps the query token.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.A clearly labeled search field with result count and results placed directly below.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 search results page shows Save search beside the result count, opens a naming dialog, and previews query, filters, scope, and sort before saving.
Bad UI A Clear filters button removes selected filters and empties the search field without warning.A filter drawer closes with no active count, leaving users unaware that filters are still hiding records.Search input hidden behind only an icon with no label.A single pill labelled Filter sits alone and behaves like a vague button.A star icon saves an unnamed search with no confirmation or criteria summary.
Good UX A user searching appeal clears all filters and still sees results for appeal sorted by Newest.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 type, revise, clear, and keep context while inspecting results.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 saves a search for Open renewal risks, returns next week, reruns it, and sees newly matching cases included.
Bad UX A user widens results by clearing filters, then cannot remember the exact search phrase that disappeared.Applying a filter silently resets the query, sort order, current page, and view density.Search silently changes unrelated filters.Tapping a chip changes the page route and clears the result context.Saving search stores only the current three results, so future matching records are missing.
Best fit Use this anti-pattern to review search result pages, list filters, dashboard filters, saved filters, saved searches, mobile filter drawers, no-results recovery, and generated clear/reset actions.Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.Users know a word, name, or identifier.A few common filters should stay visible and directly toggleable near the content.Users repeat the same search criteria across sessions or operational cycles.
Avoid when The action is intentionally a full Start over reset and the UI clearly lists search, filters, sort, scope, and view state as affected.The result set is small enough that scanning is faster than filtering.The task is choosing a command with side effects.There are many criteria, ranges, dates, or grouped fields that need a panel or form.The query is a one-off lookup that users will not need again.
Required state Default state with visible query, filters, sort, scope, and result count separated by ownership.Default state with no user-applied filters and an explicit result count.Empty query state.Unselected chip set state with no active filters and a clear result count.Unsaved current search with Save search available only when criteria are meaningful.
Accessibility burden Give reset controls precise accessible names such as Clear all filters, Clear search query, or Clear search and filters.Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.The input has a stable accessible name.Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.Use labelled form fields for saved-search name, description, visibility, and subscription settings.
Common misuse Implementing Clear filters by reinitializing the whole search page state object.Hiding active filters inside a closed panel with no count, chips, or result-state summary.Using placeholder text as the only label.Using a lone chip as a generic Filter button.Saving static result IDs instead of reusable criteria.

Filter reset that clears unrelated search

UI or UX
UI + UX - Over-broad filter reset anti-pattern
UI guidance
Treat Clear filters or Reset filters as scoped to filter criteria only; keep the submitted search query, query field, search scope, saved search identity, sort, pagination policy, and view settings visible and unchanged unless the control explicitly names those states.
UX guidance
Use this anti-pattern during review when users try to loosen filters but lose the search term or saved search context that got them to the result set.
Good UI
A result page shows Query: appeal and filters Status: Open, Date: Last 30 days; Clear filters removes only the filter chips and keeps the query token.
Bad UI
A Clear filters button removes selected filters and empties the search field without warning.
Good UX
A user searching appeal clears all filters and still sees results for appeal sorted by Newest.
Bad UX
A user widens results by clearing filters, then cannot remember the exact search phrase that disappeared.
Best fit
Use this anti-pattern to review search result pages, list filters, dashboard filters, saved filters, saved searches, mobile filter drawers, no-results recovery, and generated clear/reset actions.
Avoid when
The action is intentionally a full Start over reset and the UI clearly lists search, filters, sort, scope, and view state as affected.
Required state
Default state with visible query, filters, sort, scope, and result count separated by ownership.
Accessibility burden
Give reset controls precise accessible names such as Clear all filters, Clear search query, or Clear search and filters.
Common misuse
Implementing Clear filters by reinitializing the whole search page state object.

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.

Basic search

UI or UX
UI + UX - Search input and result list
UI guidance
Render a labeled search field, result count, matching rows, and clear action.
UX guidance
Help users find known content without browsing every category.
Good UI
A clearly labeled search field with result count and results placed directly below.
Bad UI
Search input hidden behind only an icon with no label.
Good UX
Users can type, revise, clear, and keep context while inspecting results.
Bad UX
Search silently changes unrelated filters.
Best fit
Users know a word, name, or identifier.
Avoid when
The task is choosing a command with side effects.
Required state
Empty query state.
Accessibility burden
The input has a stable accessible name.
Common misuse
Using placeholder text as the only label.

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.

Saved search

UI or UX
UI + UX - Persisted named search criteria for rerunning a dynamic result set
UI guidance
Render Save search near the active query and result summary, and show exactly which query text, filters, scope, and sort will be stored.
UX guidance
Use saved search when users repeatedly need the same dynamic result set and must rerun it without rebuilding query, filters, sort, and scope.
Good UI
A search results page shows Save search beside the result count, opens a naming dialog, and previews query, filters, scope, and sort before saving.
Bad UI
A star icon saves an unnamed search with no confirmation or criteria summary.
Good UX
A user saves a search for Open renewal risks, returns next week, reruns it, and sees newly matching cases included.
Bad UX
Saving search stores only the current three results, so future matching records are missing.
Best fit
Users repeat the same search criteria across sessions or operational cycles.
Avoid when
The query is a one-off lookup that users will not need again.
Required state
Unsaved current search with Save search available only when criteria are meaningful.
Accessibility burden
Use labelled form fields for saved-search name, description, visibility, and subscription settings.
Common misuse
Saving static result IDs instead of reusable criteria.
Decision rules
  • Flag filter reset that clears unrelated search when the control label says Clear filters or Reset filters but the action also clears the submitted query, search box text, search scope, search history item, saved search identity, URL state, sort order, page size, selected view, or layout state.
  • Choose filter panel when users need to compose or reset grouped filter criteria; clear-all must return filters to their defaults while preserving independent query, sort, view, scope, and pagination policy unless those are visibly part of the filter set.
  • Choose basic search when the user is clearing query text or a submitted keyword search; use labels such as Clear search or Clear query instead of hiding query reset behind Clear filters.
  • Choose filter chips when users need to remove one applied criterion or all applied filter chips; removing a chip must remove only that criterion and keep the search query and sort stable.
  • Choose saved search when the saved object intentionally includes query text plus filters, sort, scope, alerts, or result subscription; reset or rerun language must show that broader bundle before clearing it.
  • If a control clears both filters and search, label it as a broader reset such as Clear search and filters, show the affected state list, and provide an undo or confirmation when loss is surprising.
  • When filters and search share a result summary, show separate state tokens for query, filters, sort, scope, and saved identity so users can predict what each reset will affect.
  • In no-results recovery, offer scoped actions such as Remove Date filter, Clear all filters, and Clear search separately rather than one broad reset.
  • In batch filter panels, Reset draft should affect pending filter controls only; Clear applied filters should affect applied filters only; neither should erase the submitted query unless explicitly included.
  • During generated UI review, inspect reset buttons, chip clear-all, empty-state recovery links, mobile filter drawers, saved-filter application, and saved-search reruns for accidental query or history loss.
Inspect live examples
Filter reset that clears unrelated searchFilter panelBasic searchFilter chipsSaved search
Failure modes
  • A Clear filters button removes Status: Open and Date: Last 30 days but also empties the search query appeal.
  • Removing a single Team: Benefits chip clears every chip, the submitted query, and the sort order.
  • A mobile filter drawer Reset button returns to all results and wipes the search box without warning.
  • A no-results empty state offers Start over and silently deletes both search and filters when the user only needed to loosen one filter.
  • Applying a saved filter clears the current search query even though the preset stores only filter criteria.
  • Reset filters removes the saved search identity and search-history event without showing that saved criteria were part of the reset.
  • Clear all in a batch panel resets draft controls, applied controls, query, sort, and pagination using one vague label.
  • After filter reset, users cannot reconstruct the original search because the query is gone from the field, result heading, URL, and history.