Search

Search allows users to quickly find app content.


Usage

Search allows users to quickly locate content across an app. Basic search enables users to input a query into a search text field to view related results.

Search query input methods can be extended to include historical suggestions, auto-completion of queries, and voice input.


Persistent search

Use persistent search when search is the primary focus of your app. The search text field is presented inside of a search bar, ready to receive focus.

Usage

  1. When in focus, the search experience expands to fill the entire screen. Optionally, historical search suggestions can be displayed below the text field.
  2. A user can type a query or select from a suggestion (if available). Upon pressing Return, the search is submitted.
  3. Search results are displayed below the search bar.
  4. To release focus from the search box and dismiss search suggestions, the user taps the Up arrow.
Persistent search field receiving focus, loading results, and returning to an unfocused state
Persistent search bar without focus (default)
Persistent search bar in focus, with cards of suggested queries below

Expandable search

Use expandable search when search is not the primary focus of your app. Expandable search displays a search icon in the toolbar, instead of an open search text box.

Usage

  1. The user taps the search icon (in the toolbar) to transform it into a focused search bar.
  2. As a user types, historical search suggestions can be shown beneath the search bar.
  3. Upon entering a query or choosing a suggestion, pressing Return submits the search.
  4. Results appear below the search bar and scroll beneath it.

When displaying results, the search text field remains visible, but not in focus. Tapping the Up arrow releases the focus from search, dismisses suggestions and the on-screen keyboard, and returns the toolbar to its original state.

Expandable search bar opening from an icon and loading results

Expandable search in its default state
Search text field in focus with auto-complete suggestions

Up next