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.
Example
Try it in the library
The library combines keyword search with topic filters. Both are reflected in the URL so a result set can be shared.
Find form error patterns →Implementation
- Label the search field and filter controls; prefer visible labels. Explain the search scope and use a search landmark for the search controls.
- Show selected filters and result counts. Let people clear filters without losing their query, and provide a separate reset for both.
- Keep state in the URL when results should be shareable, and restore the query and filters when people return from an item.
- Use instant updates for fast, simple filtering; consider an Apply filters action for slow requests or several selections. Keep keyboard focus stable while results update.
- 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.
- 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?