Search Bar filter-search-001
A visible text input for entering search queries, typically placed in the site header. Use when your site has substantial content that users need to find by keyword.
Reference · UX pattern catalogueSearch, filter & sort patterns
42 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/filter-search-patterns.json.
Search
Instant Search filter-search-002
Results update dynamically as the user types, without requiring form submission. Use when datasets are small enough for sub-200ms responses or backed by a fast search API.
Search Suggestions filter-search-003
A dropdown of recommended queries or results appears below the search input as users type. Saves time, reduces typos, and reveals available content. Selected 23% of the time on e-commerce sites (NN/G).
Search Results Page filter-search-004
A dedicated page displaying items matching a search query with result counts, highlighted snippets, and pagination. Use for any search returning more than a handful of results.
Faceted Search filter-search-005
Combines free-text search with structured filter categories (facets) that let users drill down by attributes. The de facto standard for e-commerce product discovery.
Full-Text Search filter-search-006
Searches across entire document content, not just titles or tags. Use when users need to find content by terms appearing anywhere in the body text.
Fuzzy Matching filter-search-007
Returns results even when the query contains typos, using edit-distance algorithms. Prevents zero-result dead ends from minor spelling errors.
Recent Searches filter-search-008
Shows the user's past search queries when focusing the empty search input. Show 3-5 items on mobile, up to 10 on desktop. Saves time for repeat queries.
Saved Searches filter-search-009
Lets users save a query + filter combination for later reuse, optionally with notifications for new matches. Use for power users with repeated search criteria (job boards, marketplaces).
Search Scoping filter-search-010
Restricts search to a specific section or content type. Always default to "All" — users expect full-site search and may not notice scope restriction (NN/G).
Filter
Sidebar Filters filter-search-011
A vertical panel (typically left-side) containing filter categories in expandable accordion groups. The most common desktop filter layout for content-heavy sites.
Horizontal Filter Bar filter-search-012
A horizontal row of filter controls above the results grid, each opening a dropdown when clicked. Best for interfaces with fewer than 5-7 filter categories.
Filter Chips filter-search-013
Small removable pill-shaped elements above results showing all active filters. Each chip has an X button to remove that filter. Essential for showing what is currently filtered.
Multi-Select Filters filter-search-014
Filter groups where users select multiple values simultaneously (e.g., multiple brands). The most common filter interaction pattern.
Range Filters filter-search-015
Allows users to define a numeric or date range via slider handles or min/max text fields. Always pair sliders with text inputs for precise entry.
Toggle Filters filter-search-016
Binary yes/no filters (e.g., "In stock only," "Free shipping"). Use for naturally boolean attributes. Place prominently as high-priority filters.
Cascading Filters filter-search-017
Selections in one filter constrain available options in another (e.g., "Electronics" reveals "Screen Size" but not "Fabric Type"). Prevents impossible combinations.
Filter Presets filter-search-018
Pre-configured filter combinations for common user intents (e.g., "Budget picks," "Top rated," "New arrivals"). 20% of top e-commerce sites lack these despite high value (Baymard).
Saved Filters filter-search-019
Lets users save their current filter configuration as a named preset for reuse. Valuable for power users in SaaS dashboards and job boards.
Search Within Filters filter-search-020
A text input within a filter group for searching among filter values (e.g., searching within 200 brands). Essential when a filter category has many values.
Sort
Sort Dropdown filter-search-021
A dropdown for choosing sort criterion and direction (e.g., "Price: Low to High"). The most common sort control. Place right-aligned in the results header.
Column Sort filter-search-022
Clicking table column headers sorts by that column. Shift+click adds secondary sort. Standard for data tables.
Default Sort Order filter-search-023
The initial result order before any user interaction. Should match user intent: relevance for search, recency for feeds, popularity for browsing. Avoid alphabetical as default (NN/G).
Sort Direction Indicators filter-search-024
Visual arrows on sortable columns indicating current sort direction and whether a column is sortable at all.
Combined
Search + Filter + Sort Layout filter-search-025
The integrated layout combining search input, filter controls, and sort selector above results. The standard pattern for any list/grid with 20+ items.
URL-Synced Filters filter-search-026
Serialize active query, filters, sort, and pagination into URL params so the view can be bookmarked, shared, or navigated with browser back/forward.
Filter Counts filter-search-027
Numeric counts next to each filter option showing how many results match (e.g., "Nike (42)"). Prevents selecting filters that produce zero results.
Active Filter Summary filter-search-028
A dedicated area displaying all active filters as removable chips with "Clear all." Place between filter controls and results. 32% of sites lack best practices here (Baymard).
Apply Button with Count filter-search-029
A button showing expected result count (e.g., "Show 247 results") that applies all pending filter selections at once. Recommended for mobile and batch filtering.
Performance
Debounced Search Input filter-search-030
Delays search API calls until the user stops typing (150-300ms), preventing excessive requests per keystroke. Essential for any search-as-you-type implementation.
Server-Side vs Client-Side Filtering filter-search-031
Client-side filtering works on loaded data (fast, limited size). Server-side sends params to API (handles large datasets). Use client-side for under ~1000 items, server-side for larger.
Filter Result Caching filter-search-032
Cache filter results so revisiting a previous filter combination returns instantly. Reduces server load and improves perceived performance.
Search Indexing filter-search-033
Pre-built data structures enabling sub-millisecond full-text search by mapping terms to documents. Essential for performant search.
A11y
Search Landmark filter-search-034
The ARIA search landmark identifies a search region. Screen reader users can jump directly to it via landmark navigation.
Live Result Count filter-search-035
An aria-live region announcing result counts to screen reader users when search or filter results change. Prevents the silent-update problem.
Filter Keyboard Navigation filter-search-036
All filter controls must be keyboard-operable. Tab moves between groups; Space toggles checkboxes; Arrow keys navigate radio groups/sliders; Enter activates buttons.
Filter Group Labeling filter-search-037
Each filter group must have a programmatic label associating its heading with controls so screen readers announce context.
Mobile
Bottom Sheet Filters filter-search-038
A panel sliding up from the bottom containing filter controls. Keeps controls within thumb reach. Include a visible close button — many users don't discover swipe dismissal (NN/G).
Collapsible Filter Panel filter-search-039
Filter categories that collapse/expand individually on mobile to conserve vertical space. Tap a heading to reveal options.
Full-Screen Filter Overlay filter-search-040
A full-screen modal showing all filter categories. Used when filter interface is complex. User applies filters and returns to results.
Horizontal Scroll Chips filter-search-041
A horizontally scrollable row of filter chips at the top of mobile results. Each chip toggles a filter value. Best for 5-12 high-priority options.
Sort & Filter Button filter-search-042
A single button opening a bottom sheet with both sort and filter controls. Consolidates two entry points for constrained mobile space.