# Search, filters, or both?

[Website version](https://patterns.alexanderclaes.com/patterns/search-or-filters/)

Updated 30 October 2026

Search finds items using words or phrases. Filters narrow the collection by predefined attributes.

## Sources take different approaches

Carbon recommends batch updates for several selections across categories or slow results, and instant updates for one category or one expected selection. Scottish Government permits automatic updates on desktop but requires an Apply button on mobile because users may miss result changes. This guide follows Carbon and treats mobile visibility as a contextual design check rather than a universal Apply requirement.

**Preferred source:** [Carbon · Filtering](https://www.carbondesignsystem.com/building-blocks/core/patterns/filtering). Prefer Carbon because it directly compares instant and batch filtering according to the task and response speed. Preserve the Scottish Government mobile warning: choose Apply when users would miss automatic changes, and test the layout and feedback.

Compare: [Scottish Government · Search filters](https://designsystem.gov.scot/patterns/search-results/search-filters). [How we choose sources](https://patterns.alexanderclaes.com/about/#sources).

## Recommendation

Use search for terms people can supply, filters for useful attributes, and both when the task benefits from both approaches.

## Problem

People need to find something in a collection.

## Combine search and filters when

- People search by keyword, browse by attributes, or combine the two.
- The collection has reliable metadata and filters that users understand, such as topic or status.

## Search and filter mistakes to avoid

- Adding many filters before understanding how people distinguish items.
- Silently resetting filters or losing the query when opening an item and returning.

## When should filters update results?

We follow Carbon’s task-based approach rather than requiring an Apply button on every mobile layout. Choose the update method for the number of choices, response speed and whether users can see or otherwise perceive the results changing.

- Instant updates: useful for a single category or one expected selection, with clear feedback after each change.
- Apply filters: useful for several selections across categories, choices that take time to consider, or slow results.
- Mobile visibility: Scottish Government requires Apply in its mobile search-filter pattern because users may miss automatic changes. Our recommendation is to use Apply when results are out of sight or changes are easy to miss, and test whether users understand when their choices take effect.

## Example

[View the example on the website](https://patterns.alexanderclaes.com/patterns/search-or-filters/#example).

## Implementation

1. Label the search field and filter controls; prefer visible labels. Explain the search scope and use a search landmark for the search controls.
2. Show selected filters and result counts. Let people clear filters without losing their query, and provide a separate reset for both.
3. Keep state in the URL when results should be shareable, and restore the query and filters when people return from an item.
4. Following Carbon, use instant updates for one simple filter choice. Use an Apply filters action when people make several selections across categories, need time to consider them, or results load slowly. On mobile, check whether users can notice the updated results; use Apply when automatic changes would be easy to miss. Keep keyboard focus stable while results update.
5. For WCAG AA, expose in-page result-count and no-results status messages to assistive technology, for example with role=status. Announce a concise summary rather than the whole results list.
6. Explain zero results and offer ways to remove constraints without retyping the query.

## Tradeoffs

Filtering can reduce scanning but introduces state users must understand. A small, well-organized list may be faster than elaborate search controls.

## Verification

Can someone identify active constraints, recover from no results, and return from an item without losing their search? Can a screen reader announce result updates without moving focus?

## References

- [USWDS · Search](https://designsystem.digital.gov/components/search/)
- [Scottish Government · Search filters](https://designsystem.gov.scot/patterns/search-results/search-filters)
- [Carbon · Filtering](https://www.carbondesignsystem.com/building-blocks/core/patterns/filtering)
- [W3C APG · Search landmarks](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/#search)
- [W3C · Status messages (WCAG 4.1.3)](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)

## Related patterns

- [What belongs in an empty state?](https://patterns.alexanderclaes.com/patterns/empty-states.md)
- [Pagination or infinite scroll?](https://patterns.alexanderclaes.com/patterns/pagination.md)
- [When should I use a drawer?](https://patterns.alexanderclaes.com/patterns/drawers.md)