Search Bar Design
A search bar is a promise that users can find anything. Its design should make it easy to spot, quick to use and helpful before and after the user types.
By Mohamed Farhan · Updated Oct 19, 2026
Inside the example
The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px), text-xs (12px) and spacing gap-2 (8px), px-3 (12px), py-2.5 (10px), px-1.5 (6px), mt-2 (8px), p-1.5 (6px), py-2 (8px), constrained by max-w-lg and w-4. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.
Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.
Anatomy
- 1.Input
- Wide enough for typical queries.
- 2.Search icon or button
- Signals purpose and submits.
- 3.Placeholder
- Hints at what can be searched.
- 4.Suggestions
- Recent searches, popular items or autocomplete.
- 5.Clear button
- Resets the query in one tap.
Common variations
- Persistent search bar, always visible in the header. Best for content-heavy sites and stores.
- Expandable search, an icon that opens a field. Saves space but hides search.
- Command palette, opened with a shortcut like Cmd+K, for apps and developer tools.
- Hero search, the centerpiece of search-led products.
States to design
- Idle: placeholder hints at what can be searched.
- Focused: recent and suggested searches appear.
- Typing: autocomplete suggestions update.
- Results: query remains in the field, with filters and counts.
- No results: suggestions, spelling corrections and popular searches.
A walkthrough
A designer opens a design inspiration library and presses the slash key. The search field is focused and shows recent searches and trending topics. She types 'fintech onb', and suggestions for 'fintech onboarding' and 'fintech onboarding mobile' appear; she picks the first with the arrow keys and Enter.
On the results page her query stays in the field and filters appear for platform and style. She misspells her next search as 'dashbord', and instead of a dead end she sees 'Did you mean dashboard?' with popular searches below. On her phone, tapping the search icon opens a full-screen search view with the keyboard ready and a clear Cancel button.
Behind the scenes the team reviews search analytics weekly. Zero-result queries like 'neumorphism' and 'bento grid' showed that users were looking for styles the library did not tag yet, so new tags and synonyms were added. The suggestion list is a proper combobox, so it works with arrow keys and is announced to screen reader users as they move through it.
How different products use it
Ecommerce stores rely on search for high-intent shoppers, with autocomplete for products and categories and filters on the results page.
Documentation and help centers need search that understands synonyms and shows article snippets.
Apps and developer tools use command palettes that search across pages, actions and settings.
Visual design guidelines
A search input should be at least 40 to 48px tall with a clear icon, placeholder text in a readable grey and generous width. Suggestions appear directly below in a panel the same width as the input, with the highlighted suggestion clearly marked. On results pages, keep the query visible at the top with filters nearby.
Best practices
Do
- Make the input wide enough for about 27 characters on desktop.
- Show recent and suggested searches on focus.
- Support a keyboard shortcut (like / or Cmd+K) in apps.
- Keep the query in the results page input.
Don't
- Do not hide search behind an icon on content-heavy sites.
- Do not show 'No results' without suggestions.
- Do not clear the query when results load.
On mobile
On mobile, tapping search should open a focused full-screen search view with the keyboard ready, recent searches and a clear cancel button. Use type="search" and appropriate inputmode so the keyboard shows a search key.
Common mistakes
- Hiding search on content-heavy sites.
- Clearing the query on the results page.
- Dead-end no-results pages.
- Inaccessible suggestions that cannot be reached with the keyboard.
Edge cases to plan for
- Typos and synonyms should still return results or suggestions.
- Very long queries should not break the layout.
- Searches with special characters should be handled safely.
- Empty queries submitted by accident should show useful defaults rather than errors.
Accessibility checklist
- Use role="search" on the form.
- Give the input a label, even if visually hidden.
- Make suggestion lists navigable with arrow keys (combobox pattern).
Implementation notes
Wrap search in a form with role="search", give the input a label, and implement suggestions with the WAI-ARIA combobox pattern so they work with arrow keys and screen readers. Debounce requests to avoid overloading your search backend.
In your design system
In a design system, search is a combobox component with an input, suggestion list, recent searches and empty state, plus variants for header, hero and command palette. Building the keyboard behaviour and announcements into the component once means every search field in the product is accessible by default.
How to measure whether it works
Track search usage, zero-result queries and click-through on results. Zero-result queries reveal missing content and vocabulary mismatches; low click-through suggests poor ranking.
Pre-launch checklist
Microcopy you can use
A step-by-step design process
- Decide how central search is to your product.
- Design the idle and focused states, including recent searches.
- Design autocomplete with keyboard support.
- Design the results page with the query and filters.
- Design the no-results state with helpful suggestions.
- Review search analytics to improve results over time.
Usability test tasks
Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:
- Find a specific product by name.
- Use a suggestion with only the keyboard.
- Recover from a misspelled search.
- Filter search results by category.
Key terms
- Autocomplete: Suggestions that complete the query as you type.
- Combobox: The accessible pattern for an input with a suggestion list.
- Zero-result query: A search that returns nothing.
- Command palette: A searchable list of actions opened with a shortcut.
Writing the copy
Placeholders should hint at what can be searched: 'Search products, brands and categories'. No-results messages should help: show the query, suggest corrections and offer popular searches. Avoid placeholders that disappear as the only label.
Prompts to generate variations
If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:
- Design a search experience with keyboard shortcut, recent and trending suggestions, autocomplete and filtered results.
- Create a Cmd+K command palette for a SaaS app that searches pages, actions and settings.
- Design a mobile full-screen search with recent searches and categories.
Related patterns
Search ties into the navbar, search results page design and pagination for long result lists.
Generate this pattern for your product
Inspo AI designs the full pattern with every state, grounded in how real products solve it, and exports React + Tailwind.
Sources and further reading
- WAI-ARIA APG: Search Bar · The W3C reference for accessible keyboard and screen reader behaviour.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Nielsen Norman Group articles · Usability research on interface patterns.
More UI patterns
Questions people ask
Where should a search bar go?
Top center or top right on most websites. For search-led products, make it the most prominent element on the page.
How wide should a search bar be?
Wide enough to show about 27 characters on desktop, so most queries are fully visible.
Should a search bar have a button?
An icon or button helps users who do not press Enter, but always support Enter to submit.
Should search show results as you type?
Instant results work well for small datasets and apps. For large sites, show suggestions as you type and full results on submit.
Where should the search bar go on mobile?
At the top of the screen or behind a clearly visible search icon that opens a full-screen search view.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.