Patterns
Search and filtering
Search and filter patterns: placement, live results, announcing counts, filter chips, sheets on phones and shareable filter state.
Search finds a known item; filters narrow a list. Most list screens need both.
Search
- Put the search field above the list it searches, with a visible label or a clear placeholder and an accessible name.
- Search as the person types for local lists; debounce and show a loading state for remote ones.
- Announce the number of results to screen readers, and keep the query visible with a clear button.
- For an empty result, say what was searched and suggest how to widen it.
Filters
- Show active filters as chips that state the field and the value, each removable, with “Clear all”.
- Apply filters immediately on large screens. On phones, collect them in a sheet with an Apply action.
- Keep filter state in the URL on the web so views can be shared.
Components
| Part | Web | iOS and iPadOS | Android |
|---|---|---|---|
| Search field | SearchInput | searchable, StanceSearchField | StanceSearchBar |
| Filters | FilterBar, FilterChip | StanceFilterBar | StanceFilterBar, StanceFilterChip |
| Results | SearchableList, Combobox | StanceSearchableList | StanceSearchableList |
| Global search | CommandPalette | System search | Search bar in the top app bar |