Search View is a control that lets users search a collection of content for specific terms they enter.
- Container: The background of the Search View. It includes a background color, stroke width and style, radius, and elevation properties.
- 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).
- Text: Text that indicates the state of the Search View (for example, search, typing) or shows the user input.
- Loader: An animated icon shown while the search results are being loaded.
- 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.
The Search View supports multiple states to indicate its status:
|Inactive||The default state of the Search View before the user starts interacting with it. Tapping on the whole area activates the search experience.|
|Disabled||A 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.|
|Active||A 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.|
|Typing||A state when the user starts typing - the text’s style changes.|
|Searching||A state that indicates the search activity.|
|Results||A state to indicate the finished search query. The search box style changes back to normal.|
Search in Entertainment
Search in a media source
Search in Navigation
|Theming||The 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.|
|Configurations||Normal and minimized Search Views are supported. Icons can be configured.|
|Content||The labels can be changed and icons can be replaced (unless they are non-customizable map assets or coming from a third-party service).|