UX Patterns Guide
Back to compare picker

Clear filters without losing the search query

By UX Patterns GuideWorked decision updated Editorial method

Make the reset scope match its label. Clear filters should restore filter defaults while preserving independent search text and sort choices. If the product resets the whole search, name that broader action explicitly.

Filter panel live exampleBasic search live exampleFilter chips live example

Worked decision · constructed example

What exactly should Clear filters clear?

An analyst searches invoices for Atlas, applies Status: overdue and Region: north, sorts by amount, and reaches page 3. The current combination returns no rows. The analyst wants to broaden the results while continuing to look for Atlas invoices.

Try Filter panel →Try Filter chips →Try Basic search →
Keep independent state separate from filter state
ActionChanged statePreserved state
Remove Region: northRemove that criterion and recompute results from page 1.Query Atlas, overdue status, and amount sort remain.
Clear filtersRestore all filter defaults and recompute results from page 1.Query Atlas and amount sort remain.
Clear searchRemove Atlas and recompute results from page 1.Applied filters and sort remain unless the action states a broader scope.
Reset saved searchRestore the documented saved bundle, which may include query, filters, and sort.The selected view and any unsaved changes follow the visible reset contract.

Why this choice

The page reset is a consequence of changing the result set, not permission to erase unrelated choices. Returning to page 1 avoids leaving the analyst on a page that no longer exists. Keep this pagination policy explicit in implementation and review.

Where the decision changes

Batch filters have both draft controls and applied criteria. Reset draft and Clear applied filters should be different actions when their effects differ. A saved search can legitimately own a broader bundle, but that ownership must be visible.

Try these checks

  1. Enter a query, set two filters and a sort, then activate Clear filters.
  2. Confirm the query and sort remain, the filters return to defaults, and the result summary matches the controls.
  3. Use browser Back and a copied URL to check state restoration.
  4. Repeat in the mobile filter drawer and in the no-results recovery path.

What the sources support

  • Carbon defines clearing filters as restoring their default starting state and distinguishes instant from batch application. Carbon: Filtering ↗

  • The MOJ component exposes selected filters and a scoped clearing action. Preserving the independent invoice query is the design decision in this worked case. MOJ: Filter ↗

These source claims were checked on . The scenario and decision analysis are illustrative; the checks are a test plan, not reported results from a user study.

Compare the full pattern contracts
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 the person reach a clear task outcome.Help the person reach a clear task outcome.Preserve the distinction between running a saved search temporarily and updating the saved criteria, especially when a saved search is shared or subscribed to.
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 Removing one filter chip resets the entire query and sort state.A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading.Results jump, resize, or use heavy borders that make scanning feel like reading a form.A single pill labelled Filter sits alone and behaves like a vague button.Saved searches, recently searched terms, browser bookmarks, and saved filters are mixed in one list called Saved.
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 tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates.A user saves a search for Open renewal risks, returns next week, reruns it, and sees newly matching cases included.
Bad UX Clear filters empties the search field.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 it when a reset label is narrower than the actual state it clears.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 list is small enough that recent searches, bookmarks, or manual scanning solve the problem.
Required state Default state with visible query, filters, sort, scope, and result count separated by ownership.Applied state with active-filter count, result count, and removable applied criteria near the results.Empty query state.Selected chip state with visible selected indicator and updated 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.Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.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
Removing one filter chip resets the entire query and sort state.
Good UX
A user searching appeal clears all filters and still sees results for appeal sorted by Newest.
Bad UX
Clear filters empties the search field.
Best fit
Use it when a reset label is narrower than the actual state it clears.
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 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.

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 the person reach a clear task outcome.
Good UI
A clearly labeled search field with result count and results placed directly below.
Bad UI
Results jump, resize, or use heavy borders that make scanning feel like reading a form.
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
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.

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
Preserve the distinction between running a saved search temporarily and updating the saved criteria, especially when a saved search is shared or subscribed to.
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
Saved searches, recently searched terms, browser bookmarks, and saved filters are mixed in one list called Saved.
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 list is small enough that recent searches, bookmarks, or manual scanning solve the problem.
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.

Saved items