Pattern model
Parts that must work together
Search inputFilter controlsApplied-filter summaryResults and countSortEmpty and recovery states
Why this matters
A pattern is not a screenshot. It is a reusable decision model that must preserve intent, state, recovery, and accessibility as layouts change.
Decision framework
Questions to answer before choosing UI
What does search cover?
Make the searchable scope clear and align matching behavior with user language, identifiers, and common misspellings.
When do filters apply?
Use immediate updates for lightweight results; use an Apply action when several choices need review or requests are expensive.
How is state preserved?
Represent valuable query, filter, sort, and page state in the URL so results can be revisited and shared.
Cross-system baseline
End-to-end accessibility
- Use a labeled search landmark when appropriate
- Announce result count changes without excessive interruption
- Expose applied filters as removable controls
- Return focus predictably after clearing or applying filters
Common mistakes
Failure patterns to test
01
Clearing the query on no results
02
Hiding active filters
03
Changing results before input is complete
04
Using placeholder-only labels