Search Bars
People use a search bar to search through a large collection of values. There are two styles of search bars—prominent (the default) and minimal. Contacts employs the prominent style, which includes a noticeable tinted background. Photos uses the minimal style, which tends to blend more with the surrounding interface. Search bars are translucent by default, but can be made opaque. When applicable, a search bar can be configured to automatically hide the navigation bar.
Prominent
Minimal
A search bar contains a single search field, which can include placeholder text, a Clear button, a Bookmark button, and a Results List button. In addition to the search field, a search bar can contain a Cancel button for exiting the search.
Use a search bar rather than a text field to implement search. A text field doesn’t have the standard search bar appearance that people expect.
Enable the Clear and Cancel buttons. Most search bars include a Clear button that erases the contents of the field, and a Cancel button that immediately terminates the search.
Pick a search bar style that reflects the importance of search in your app. If search is a primary function in your app, use the default, prominent style of search bar. If search is infrequent, use the minimal style.
If necessary, provide hints and context in a search bar. The search field can contain placeholder text—such as “Search Clothing, Shoes and Accessories” or simply “Search”—as a reminder of the context being searched. A succinct, one-line sentence with appropriate punctuation can also be displayed directly above the search bar to provide guidance. Stocks, for example, uses text above the search field to let people know they can enter a company name or stock symbol.
Consider providing helpful shortcuts and other content below a search bar. Use the area under a search bar to help people get to content faster. Safari, for example, shows your bookmarks as soon as you tap the search field. Select one to go right to it without entering any search terms. Stocks shows a list of results as you type into the search field. Tap one at any time without typing any more characters.
Add the Bookmark or Results List button if it makes sense in your app. Use the Bookmark button to provide a shortcut to information people may want to find again, such as saved, previous, or recent searches. Use the Results List button to indicate the presence of results and then display those results when the button is tapped. You can’t display both buttons simultaneously.
For implementation details, see UISearchController and UISearchBar.
Scope Bars
A scope bar can be added to a search bar to let people refine the scope of a search. A scope bar adopts the appearance of its search bar.
Favor improving search results over including a scope bar. A scope bar can be useful when there are clearly defined categories in which to search. However, it’s best to improve search results so scoping isn’t necessary.
For implementation details, see UISearchBar.