Search
The design of search input, results, and empty/error states for content discovery.
Plain English
Search is the shortcut to the content users want. Good search design starts before the user types: the input must be obvious and accessible, usually at the top of the page. While typing: instant/live search results (with a short debounce) feel faster than requiring submit. On results: highlight the query term in results, show the count, and filter by category. On failure: a helpful empty state with suggestions, not just "No results found."
Technical
Input: type="search" (adds × clear button in some browsers), role="searchbox" or aria-label. Live search: debounce input at 150-300ms before firing the query. Results: presented in a dropdown (instant/predictive) or as a results page. Keyboard: Enter submits, Escape clears/closes, Arrow keys navigate predictive results. Highlight: wrap matching text in <mark> elements (semantic, styleable). Results count: "24 results for 'padding'". Autocomplete: role="combobox" + role="listbox" + role="option" pattern.
Live Demo
1. Simple search
2. With filters
3. With suggestions (open state)
Search is often the most used feature. Invest in it: instant results, filters, history, suggestions.
Usage
✓ Good usage
A search input with a magnifying glass icon, 250ms debounce for live results, query highlighting in results, category filter chips, and a helpful empty state with suggestions.
✗ Bad usage
Search that only returns results on Enter with no live preview — misses the expectation of instant search that users now have.
Recommended values
- Input: full-width or prominent, 44px height
- Debounce: 150-250ms before live search fires
- Highlight matches: <mark> element in results
- Show count: "12 results for X"
- Empty state: show query + suggestions, not just "No results"
- Clear button: visible when input has value
Common mistakes
- No debounce — fires a query on every keystroke, hammering the server.
- No highlight of the matching term — users cannot scan results efficiently.
- Generic "No results" empty state with no guidance.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Search input: full-width, 44px height, search icon left, clear × button right when filled. Live results after 250ms debounce. Highlight query in results with <mark>. Show "N results for 'query'". Empty state: query + 3 similar suggestions + option to clear filters.