Search Bar

Open almost any app and the first thing you see is a grey field with a magnifying glass: Search Amazon, Dishes, restaurants, Search in mail. It’s often the most used control in the whole app, and users expect it to behave exactly like the one in every other app.

It’s also deceptively complex. Behind that one field sit the keyboard, suggestions, recent searches, a clear button, a Cancel button and focus handling. This page is about the field itself. What happens after you search (results, filters, sorting, debounce and race conditions) is covered on the Search, filters & sorting page.

What is a search bar?

A search bar is a single-line text field that takes a query and finds matching content. It looks like a text fieldText fieldAn input where the user types text, like a name, email, password or search query.Open in glossary →, but it behaves differently: what you type is a question to the app, not data to be saved.

Search bars work in one of two ways, and testers must know which one they’re looking at:

• Live filtering: the list below updates as you type (contacts, settings, a list of 50 recipes). No Search key needed.
• Submit search: you type, optionally pick a suggestion, then press Search (Enter) and the app asks the server (shops, maps, mail).

Many apps mix the two: they show suggestions and recent searches while you type, and real results after you submit.

Anatomy

How it differs from similar components

Component	You type…	You get…
Search bar	A free-text query	Results, matching or partly matching
Text field	Data to save (name, email)	Validation, then the value is stored
Combo box	Part of an option’s name	One option from a fixed list (see Dropdown)
Filter chips	Nothing, you tap	A narrower list, by fixed categories

Dev note

iOS has UISearchBar (usually inside a UISearchController) and SwiftUI’s .searchable. Material 3 has a search bar that opens a search view. On the web it’s <input type="search"> inside a form marked with role="search" (or the newer <search> element). Users just say “the search box”.

Designs & variants

All four work correctly. Type, clear, cancel, and try them with only the keyboard (Tab, arrows, Enter, Esc).

Recipes

• Spaghetti carbonara
• Chicken tikka masala
• Pad thai
• Crème brûlée
• Tiramisu
• Apple crumble

Search in mailA

• Ana

  Flight to Lisbon: boarding pass

• FoodNow

  Your pizza is on its way

• Marko

  Photos from the hike

• Bank

  Monthly statement

Help center

Search help articles

Search

Type a question and press Search.

SHOPLY

Focus and the keyboard

The moment a user taps the field, a lot should happen at once, and each part is testable:

• The keyboard opens with a Search key instead of Return.
  Dev note

  On iOS that’s the search return key type; on Android imeOptions="actionSearch"; on the web type="search" in a form, or enterkeyhint="search".
• Auto-capitalization and autocorrect are off. A plain text field capitalizes the first letter and “corrects” words. In a search field that turns iphone into Iphone and airpods into airports.
• The screen switches into search mode: on iOS the large title collapses and Cancel appears; in Material the bar expands into a full search view.
• Recent searches or suggestions appear while the field is still empty.
• The Search key submits the query and usually hides the keyboard, so the results are visible.

Suggestions and recent searches

Suggestions (also called autocompleteAutocompleteSuggestions shown under a field while typing, which the user can pick to finish the input.Open in glossary →) are a list that pops up under the field, so they share the bugs of dropdowns: keyboard navigation, highlighted vs selected, clipped lists. The Dropdown page covers the listbox pattern in detail. Recent searches add their own rules:

• Most recent first, and no duplicates: searching “pizza” twice moves it to the top, it doesn’t add a second row.
• Treat variants as the same search: “Pizza”, “pizza” and “pizza ” are one entry.
• Each entry can be removed, and removed entries stay gone.
• They’re private: after logging out or switching accounts, the next user must not see them.
• Blank searches are never saved.

Clear, Cancel, Back and Esc

Action	What it should do
Clear (×)	Empty the field, clear its results, keep focus and the keyboard
Cancel (iOS)	Leave search mode, hide the keyboard, restore the screen exactly as it was
Back (Android)	First close the keyboard or search view, then navigate back
Esc (web)	Close the suggestions; in some browsers (Chrome, Safari) it also clears an <input type="search">

When to use it

A search bar is a good choice when:

• There’s more content than people can scroll through comfortably: products, contacts, messages, settings.
• Users know what they’re looking for and can name it (“ramen”, “invoice March”).
• Search is a main task: then keep the bar visible at the top, not hidden behind an icon.
• Content has many attributes, so a fixed set of filters can’t cover every question.

Good and bad uses

Common bugs

These are the bugs testers report most often in the search field itself.

#	Bug	What you see	Typical severity
1	Search key does nothing	You press Search/Enter, nothing happens; only tapping a suggestion works	High
2	Clear (×) leaves stale results	The field is empty but old results stay, or × closes the keyboard	Medium
3	Auto-capitalization / autocorrect on	“iphone” becomes “Iphone”, “airpods” becomes “airports”; results are wrong or empty	High
4	Spaces and case not handled	“pizza ” or “PIZZA” finds nothing, although “pizza” works	Medium
5	Blank query accepted	Pressing Search on an empty or spaces-only field shows everything or an error	Low–Medium
6	Duplicate or leaked recents	“pizza” three times, deleted entries come back, or the previous user’s searches appear	Medium (High if private)
7	Cancel doesn’t restore the screen	After Cancel the selected tab, filter or scroll position is reset	Medium
8	Stale suggestions	The list still shows suggestions for an older query	Medium
9	Keyboard covers results	After submitting, the keyboard stays open and hides the results	Medium
10	Long text breaks the layout	Long queries push the × or Cancel off-screen, or the results title overflows	Low
11	Special characters break it	Emoji, diacritics, &, % or " cause errors, wrong encoding or no results	Medium

Stress-test it

Search bars get the strangest input of any field: typos, emoji, accents, half-sentences, spaces before and after. Try each preset below, look at the request that gets sent, then switch the field settings to fix the problems.

🧪 Query lab

The left side is how the developer configured the field. Type (or tap a preset), press Enter, and see what the server receives. Then fix the settings until every query works.

Field settings

Auto-capitalizeKeyboard capitalizes the first letterAutocorrectKeyboard replaces “misspelled” wordsTrim spacesRemove spaces at the start and endIgnore case & accents“creme” finds “Crème”Ignore blank queriesSearch key does nothing when empty

Type:iphone caseairpods␣␣sneakers␣␣creme brulee🍕 stoneonly spacesvery longsearch ↵

Request sent

—

Results

—

Tap a preset, then “search ↵” (or press Enter in the field).

Find the bug

This food delivery app has a search bar with six bugs, all in the search field and its lists. Test it like a real user, then like a tester:

• Type a dish and press Enter (that’s the keyboard’s Search key).
• Type in lowercase, as most people do on a phone.
• Search for the same thing twice, and use the recent searches.
• Use the × button, and try Cancel after choosing a category on the home screen.
• Search for nothing: just a few spaces.

🐞 Bug hunt: Food delivery search

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Deliver to Ilica 10

Delivery

AllPizzaAsianHealthyBurgersDesserts

Popular near you

• 🍕Margherita pizzaLuigi's Pizzeria€9.50
• 🍕Pepperoni pizzaLuigi's Pizzeria€11.00
• 🍣Salmon sushi boxTokyo Bento€14.90
• 🍜Chicken ramenTokyo Bento€12.50
• 🍝Pad thaiBangkok Street€10.90
• 🥗Poke bowlGreen Leaf€12.00
• 🥗Quinoa saladGreen Leaf€9.90
• 🍔Classic burgerGrill House€10.50
• 🍔Veggie burgerGrill House€10.00
• 🍫Chocolate brownieSweet Spot€4.50
• 🍰TiramisuSweet Spot€5.50

Device settings

Restart app

Auto-Capitalization (iOS keyboard setting, on by default)

1. 1

   Hint: Type "ramen" and press Enter.

   The keyboard's Search key does nothing

   Nothing happens: no results, the keyboard stays open. The only way to search is to tap a suggestion or the "Search for…" row. Expected: the Search key (Enter) submits the query, shows results and hides the keyboard.

   Reveal answer✓ I found this
2. 2

   Hint: Search for something, then tap the × in the field.

   Clear (×) empties the field but keeps the old results

   The field is empty, but the screen still shows "1 result for “Margherita pizza”" and the pizza. Users think the results belong to the empty query. Expected: × clears the text and the results, and shows recent searches again while keeping the keyboard open.

   Reveal answer✓ I found this
3. 3

   Hint: Type "pizza" in lowercase and use "Search for…". Then turn off Auto-Capitalization in the device settings and try again.

   Auto-capitalization breaks search

   The field leaves the keyboard's auto-capitalization on, so "pizza" becomes "Pizza", and the search is case-sensitive: "No results for “Pizza”". With the setting off, "pizza" finds both pizzas. Expected: the field disables auto-capitalization and autocorrect (autocapitalize="none", autocorrect="off"), and search ignores case.

   Reveal answer✓ I found this
4. 4

   Hint: Search for the same thing twice, or tap a recent search, then look at the list.

   Recent searches are duplicated

   Every search adds a new row, so the list fills with "Margherita pizza", "Margherita pizza", "sushi", "sushi"… and variants like "Pizza" and "pizza" are separate entries. Expected: a repeated search moves the existing entry to the top; case and extra spaces are ignored when comparing.

   Reveal answer✓ I found this
5. 5

   Hint: Choose "Desserts" on the home screen, tap the search field, then tap Cancel.

   Cancel resets the category on the home screen

   After Cancel the home screen shows All instead of Desserts. Expected: Cancel returns the user to the screen exactly as they left it: same category, same list.

   Reveal answer✓ I found this
6. 6

   Hint: Type only a few spaces, then tap "Search for…". Open recent searches.

   A blank query is accepted and saved

   The app shows "11 results for “ ”" (every dish) and saves an empty-looking row in Recent searches. Expected: spaces-only queries are ignored (or the Search key does nothing), and nothing blank is saved.

   Reveal answer✓ I found this

How to test it

Checklist

Search bar test checklist

0 of 14 checked

Copy

• The field has a clear placeholder and an accessible label
• Tapping the field opens the keyboard with a Search key and shows recent searches or suggestions
• Auto-capitalization and autocorrect are off; lowercase queries stay lowercase
• The Search key (Enter) submits the query and hides the keyboard
• Search ignores case, accents and leading/trailing spaces
• Empty and spaces-only queries are ignored, never saved as recents
• The × appears only when there is text, clears text and results, and keeps focus
• Cancel (iOS), Back (Android) and Esc (web) close search and restore the previous screen state
• Recent searches: newest first, no duplicates, removable, private per account and cleared on logout
• Suggestions match the current query, work with arrow keys and can be selected
• Long queries scroll inside the field; ×, Cancel and the layout stay intact
• Emoji, diacritics and special characters (&, %, ", <) are searched safely and shown correctly
• Screen readers announce the field, the number of results and the suggestions
• Works with large text, in dark mode, in landscape and on small screens

Example test cases

Accessibility

• A real label. The placeholder is not a label: it disappears and is often too light. Give the field an accessible name (“Search dishes and restaurants”), and on the web mark the form as a search landmark so screen reader users can jump to it.
  Dev note

  The name comes from a visible label or aria-label; the landmark is role="search" (or <search>).
• Icon buttons need names. The × must be announced as “Clear text”, the microphone as “Voice search”, the filter as “Filters”, never just “button”.
• Announce results. After searching, screen reader users need to hear “12 results” or “No results”.
  Dev note

  On the web that’s a polite aria-live region; on mobile an accessibility announcement.
• Suggestions follow the combobox pattern: arrow keys to move, Enter to choose, Esc to close (see Dropdown).
  Dev note

  role="combobox" on the input, role="listbox" and role="option" for the list.
• Focus management. Opening a search view moves focus into the field; closing it returns focus to where the user was (the search icon or bar). The focus orderFocus orderThe order in which the Tab key moves through interactive elements.Open in glossary → must stay logical.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: the × and Cancel are small; their tap area should still be at least 44×44 pt (iOS) / 48×48 dp (Android). On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.
• Contrast: typed text needs 4.5:1. Light grey placeholders often fail; if the placeholder carries information, it needs enough contrast too (WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary →).
• Voice input is an accessibility feature: dictated text must work like typed text (no trailing period, no capital letter breaking the search).

Mobile vs web

iOSAndroidWeb

• Search sits in the navigation bar, often hidden under the large title until you pull down: check users can find it.
  Dev note

  UISearchController with a UISearchBar in the navigation bar, or SwiftUI’s .searchable.
• Focus shows Cancel and optional scope buttons; Cancel must restore the previous state.
• Test the Search key, auto-capitalization and autocorrect on a real device, Dynamic Type at the largest sizes, and dictation.
• Check that scrolling the results dismisses the keyboard when the app is designed to.

• Material 3 SearchBar expands into a SearchView (full screen on phones, docked on tablets). Older apps use a search icon in the toolbar.
• The system Back gesture should first close the keyboard or the search view, not leave the screen.
• Check the keyboard’s action key says Search and submits.
  Dev note

  The action key comes from imeOptions="actionSearch".
• Test with TalkBack, font scale, different keyboards (Gboard, Samsung Keyboard) and landscape, where the keyboard can cover most of the screen.

• Some browsers add their own × to a search field and clear it on Esc (Chrome and Safari do; behavior and styling differ between browsers), so check it doesn’t clash with the site’s own ×.
  Dev note

  Use <input type="search"> with a <label>, inside a form with role="search" or a <search> element.
• Watch for two dropdowns at once: the browser’s autofill history on top of the site’s own suggestions.
  Dev note

  Custom suggestions usually need autocomplete="off".
• The query normally ends up in the URL (?q=), so Back, refresh and sharing should restore it. Encoding of &, %, # and emoji is a classic bug source. More in Search, filters & sorting.
• Test keyboard-only use, mobile browsers (does the keyboard show “Go” or “Search”?), and narrow widths.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.On a real phone, every search returns "No results", but on a laptop the same search works. What should you check first?

   AThe Wi-Fi connectionBWhether the keyboard auto-capitalizes or autocorrects the queryCThe color of the search iconDThe server's time zone

2. 2.You search for "pizza", then tap the × in the field. What is the correct behavior?

   AThe field empties, but the pizza results stayBThe field and the results are cleared, focus stays in the fieldCThe whole search screen closesDThe app searches for an empty string

3. 3.What is the difference between Clear (×) and Cancel on iOS?

   AThere is noneBClear empties the field; Cancel leaves search mode and restores the previous screenCCancel deletes the recent searchesDClear submits the search

4. 4.Which recent searches list is correct after searching "pizza", "burger", then "Pizza"?

   APizza, burger, pizzaBPizza, burgerCpizza, burger, Pizza, (blank)Dburger

5. 5.A user types three spaces and presses Search. What should happen?

   AShow every productBShow "No results for “ ”"CNothing: blank queries are ignored and not savedDShow an error page

Key takeaways

• A search bar is a text field for queries: it should never auto-capitalize or autocorrect, and it should ignore case, accents and extra spaces.
• Know whether it’s live filtering or submit search; then test the Search key, the ×, Cancel / Back / Esc and focus carefully.
• Recent searches must be newest first, de-duplicated, removable, free of blanks and private to each account.
• Suggestions are a listbox: test them like a dropdown, with the keyboard and with fast typing.
• Always test on a real phone keyboard, with long text, emoji and diacritics, and with a screen reader.