Learn 38 Search & Filtering concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A prominent search form for finding content across an entire website.
Create an accessible site-search form with role search, a persistent or visually hidden label, a search input wide enough to review the query, a submit button whose accessible name includes Search, a clear control, and the submitted terms preserved on the results page.A single search entry point for records, commands, and destinations across an application.
Build a global application search that clearly states its scope, groups results by type, supports keyboard navigation and Escape, exposes a visible shortcut, preserves the query when opening results, and never mixes destructive commands into results without clear labeling.A local field that filters the items currently shown in one list or table.
Add a Search this list field above a collection, filter items as the query changes, announce the updated result count politely, preserve keyboard focus, provide a clear button, and distinguish this local search from site-wide search in its label and placeholder.A search field paired with an explicit choice of where or what to search.
Create a scoped search with an explicit All, Projects, People, and Files scope control. Keep the current scope visible, give every control an accessible label, retain the query when scope changes, update results predictably, and avoid hiding the scope only in placeholder text.Results update while the user types without requiring a separate submit action.
Implement instant search with a short debounce, cancellable stale requests, a minimum query length where useful, visible loading and empty states, polite result-count announcements, preserved input focus, and an Enter action that still works predictably.A search field that can be focused quickly with a documented keyboard shortcut.
Add a visible keyboard shortcut for focusing global search, such as slash or Command/Ctrl+K. Do not override active text editing, communicate the shortcut with aria-keyshortcuts, move focus without changing the query, and let Escape return users to their previous context.An optional microphone action that converts speech into an editable search query.
Offer voice search as an optional enhancement beside a normal text search. Use a labelled microphone button, request permission only after activation, show listening and error states, place recognized text in the editable field for review, and retain full keyboard and typed-search alternatives.A combobox popup that suggests matching queries or destinations while typing.
Create an accessible search combobox with list autocomplete, aria-expanded, aria-controls and aria-activedescendant, keyboard navigation, highlighted matching text, Enter to accept, Escape to dismiss without losing the typed query, and loading plus no-suggestion states.A list of a person’s latest queries shown before they begin typing.
Show recent searches when the search field is empty and focused. Make each query keyboard-selectable, include an individually labelled remove action, offer Clear recent searches, respect private browsing and sensitive-query policies, and never expose shared-device history without user control.Common or trending queries offered as shortcuts before a search begins.
Present a short list of popular searches as optional query shortcuts with clear labels and no implication that they are personalized. Keep the text readable, make every item keyboard-operable, and refresh the list without unexpectedly moving focus.Predictive text completes the remainder of a likely query inside the search field.
Implement inline query completion using the ARIA combobox inline-autocomplete model. Visually select only the predicted remainder, keep the user-entered portion editable, accept with an explicit keyboard action, expose the correct aria-autocomplete value, and remove the prediction when it no longer matches.A correction proposes a likely intended query while preserving the original terms.
Add a Did you mean suggestion above search results when confidence is high. Keep the original query visible, make the corrected phrase a link or button, state whether results currently use the original or corrected query, and provide a way to search the exact original terms.Editable query tokens express structured terms such as sender, status, or file type.
Create a tokenized search field supporting structured terms such as from:, status:, and type:. Make tokens individually focusable and removable, preserve a normal text-entry position, support Backspace deliberately, expose each token’s meaning, and serialize the query consistently.A structured interface combines multiple fields and operators into a precise query.
Build an optional advanced-search form with field, operator, and value rows; AND and OR grouping; add and remove controls; a plain-language query summary; validation; reset; and a simple-search path. Do not make advanced search the default entry point.Controls let people review, remove, pause, or clear stored search activity.
Create search-history controls with dated queries, individually labelled delete buttons, a clear-all action with appropriate confirmation, a pause-history setting, and an explanation of storage scope. Keep private or sensitive queries from appearing unexpectedly.A dedicated view presents ranked matches for the submitted query.
Create a search-results page that preserves the submitted query, uses one clear page heading, lists relevant results with meaningful linked titles and snippets, exposes result count and sort controls, supports refinement, and keeps pagination or load-more navigation predictable.A concise status states how many matches were found and for which query.
Show a concise result summary such as 24 results for accessibility. Keep the query visually distinct, update the count after searching or filtering, announce meaningful changes through a polite live region, and avoid announcing on every keystroke before results settle.Matching words are emphasized in result titles or snippets to aid scanning.
Highlight matching query terms in result titles and snippets using semantic mark elements. Preserve readable contrast, escape user input safely, highlight meaningful whole matches without fragmenting screen-reader output, and do not rely on highlighting alone to explain relevance.Matches are organized under meaningful types such as projects, people, and files.
Group search results by meaningful content type with semantic headings, a result count for each group, consistent row structure, and View all links when truncated. Keep overall relevance understandable and avoid presenting empty groups.A compact result combines a linked title, context, excerpt, and metadata.
Create a reusable search-result snippet with a descriptive linked title, breadcrumb or content type, concise context around the match, useful metadata, safe query highlighting, and a generous link target without making unrelated actions part of the same link.A pending state communicates that results are being retrieved or recalculated.
Design a search loading state that keeps the query visible, indicates progress without blocking typing, preserves previous results when appropriate, marks the results region aria-busy, cancels stale requests, and replaces skeletons with results without layout jumps.An empty state explains that the query found no matches and suggests recovery actions.
Create a no-results state that repeats the query, confirms no matches were found, suggests checking spelling or using broader terms, offers a clear-filters action when filters are active, and avoids implying that the entire system contains no content.A recoverable state explains that search failed rather than returning zero matches.
Create a search error state distinct from no results. Preserve the query and filters, explain the temporary problem in plain language, provide a Retry button, retain any safe previous results when useful, and expose technical details only through an optional disclosure.A horizontal set of high-priority refinements sits near the result collection.
Create a responsive filter bar containing the most-used refinements, active-filter count, clear action, and sort control. Use native labelled controls, keep applied state visible, wrap or transform appropriately on narrow screens, and update the result summary after changes.A side panel narrows results across several attributes with available counts.
Build a faceted filter sidebar with semantic groups, checkbox options, available-result counts, collapsed long groups, applied-state summary, and clear actions. Keep zero-count choices understandable, preserve scroll position, and provide an equivalent mobile presentation.A compact button opens filtering controls in a mobile-appropriate panel.
Create a mobile filter drawer opened by a button showing the active-filter count. Give the panel a heading, Close and Clear controls, labelled filter groups, an Apply button with prospective result count, focus management, Escape handling, and restored focus on close.A compact labelled control exposes choices for one refinement dimension.
Create a labelled filter dropdown for one attribute using a native select when one choice is allowed, or an accessible disclosure with checkboxes for multiple choices. Show applied state in the trigger, preserve keyboard behavior, and provide a clear option.A short row of common refinements can be toggled directly above results.
Create quick-filter chips for a small set of common independent refinements. Use toggle buttons with aria-pressed, visible selected and focus states, readable labels, horizontal scrolling only when necessary, and a live result-count update after each change.Removable tokens summarize every refinement currently affecting the results.
Display applied filters as removable chips near the result summary. Give every remove button a specific accessible name, preserve the remaining filters and query, include Clear all when several are active, and return focus predictably after a chip disappears.Minimum and maximum controls restrict results to a numeric interval.
Create a numeric range filter with labelled minimum and maximum inputs, optional synchronized slider controls, units, valid range constraints, localized formatting, an explicit Apply action when updates are expensive, and a readable active-range summary.Start and end dates limit results to a specific time period.
Create a date-range filter with separately labelled start and end inputs, locale-aware hints, valid ordering, inclusive-boundary explanation, useful presets, clear and apply actions, and a readable summary of the active period.Expandable parent and child categories refine results within a taxonomy.
Build a hierarchical category filter with expandable branches, parent and child selection rules, indeterminate states where appropriate, result counts, keyboard-operable disclosure controls, visible ancestry, and a concise summary of selected paths.A local field narrows a long list of values inside one filter group.
Add a Search options field inside a long filter group. Label it with the facet name, filter values without altering applied selections, announce the number of matching options, provide a clear button, and keep selected values discoverable when they no longer match the local query.Available choices update because an earlier filter changes what values remain valid.
Create dependent Country, State, and City filters whose options update in sequence. Disable unavailable controls with an explanation, clear invalid child values after confirmation when needed, show loading state, preserve valid selections, and announce meaningful availability changes.A single action removes every applied refinement while retaining the search context.
Add a Clear all filters button visible only when refinements are active. Keep the search query unless the label explicitly includes it, reset controls and URL parameters consistently, update results and counts, announce completion, and return focus to a stable location.A labelled control changes the ordering of the same result set.
Create a Sort by control with meaningful options such as Relevance, Newest, and Name. Use a native labelled select, preserve the query and filters, update the URL where appropriate, return to the start of paginated results, and announce the new ordering.A named reusable view restores a chosen query, filters, and sort order.
Let users save the current query, filters, visible columns, and sort as a named view. Show exactly what will be saved, validate duplicate names, support rename and delete separately, indicate the active saved view, and distinguish personal from shared presets.An empty state explains that content exists but the active refinements exclude it.
Create a filtered-empty state distinct from a truly empty collection. State that no items match the current filters, show the active refinements, provide Clear all and targeted removal actions, preserve the search query, and never suggest creating new content when existing content is merely hidden.