Patterns
Help someone locate one record among many: type to search, narrow with filters, scan results, open the one they want.
How it works
- Put one search box at the top of the results it filters; search after a short pause in typing, or on Enter for expensive queries.
- Show active filters as removable chips beside the box, with one action that clears them all.
- Report the result count in a polite live region ("24 results"), not by moving focus.
- Let the person switch views (table, list, gallery) without losing the query, filters or selection.
- When nothing matches, show an empty state that names the query and offers to clear filters.
See it built: search full-screen page.
Elements
Search · DataGrid · List · Pagination · Select · Chip · EmptyState
Usability
Do
- Keep the query in the URL so a search can be shared and survives a reload.
- Keep the row the person opened selected when they come back to the results.
Don’t
- Don’t reset filters when the view changes.
- Don’t announce every keystroke’s result count.
Accessibility
- The search box has a visible label or an accessible name that says what it searches.
- Result counts are announced through one
role="status"region. - Each result row has one primary link or button; secondary actions are reachable by Tab or an Actions menu.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.