Search View

Last edit: 2023.08.07

Search View is a control that lets users search a collection of content for specific terms they enter.

Anatomy

anatomy
  1. Container: The background of the Search View. It includes a background color, stroke width and style, radius, and elevation properties.
  2. Lead icon: The main graphical element that indicates the state of the Search View (for example, initiate a search, search is disabled) or search type (for example, search within an app).
  3. Text: Text that indicates the state of the Search View (for example, search, typing) or shows the user input.
  4. Loader: An animated icon shown while the search results are being loaded.
  5. Clear input field: Action to clear the search input.

By default, the Search View is displayed in an "inactive" state (see the next paragraph), and the search experience can be activated by tapping it. If the search box is only represented by an icon, it expands so that users can enter text. Additionally, the search trigger can be displayed with the Button control, tapping on which opens the search view.

anatomy search trigger

States

The Search View supports multiple states to indicate its status:

anatomy states trigger
StateAbout
InactiveThe default state of the Search View before the user starts interacting with it. Tapping on the whole area activates the search experience.
DisabledA state when searching by typing is not possible at the moment (for example, due to safety reasons). Then the icon changes to indicate the disabled state, and the text field states the reason.
ActiveA state to indicate the start of the search experience - the search box becomes highlighted and the type cursor is shown in front of the label.
TypingA state when the user starts typing - the text’s style changes.
SearchingA state that indicates the search activity.
ResultsA state to indicate the finished search query. The search box style changes back to normal.

Usage

usage example1 thumbnail

Search in Entertainment

Search in a media source

usage example2 thumbnail

Search in Navigation

Location search

Customization

TypeCustomizable
ThemingThe sizing of the container, text, margins, and paddings can be adjusted. Additionally, it is possible to change the styling of the container (background, border, and elevation), text, type indicator, and icons.
ConfigurationsNormal and minimized Search Views are supported. Icons can be configured.
ContentThe labels can be changed and icons can be replaced (unless they are non-customizable map assets or coming from a third-party service).