Refer to the Material 3 Search guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Intro
The search component enables users to efficiently find information by inputting a query into the search bar or text field in the search view, which then presents relevant results. Search is used to find and access content globally within an app or locally within any given screen.
Search bar in compact (left) and expanded window size class (right)
Usage
Use a search bar when search is a primary screen action.
- Provide immediate search results when users start typing.
- Only show relevant icons or buttons inside the search bar.
Anatomy
For more details about the anatomy of the search bar and search view, refer to the M3 guidelines.
Behavior and Interaction
Focusing Search Bar
When focused, the search bar expands into a search view that shows previous search suggestions.
If search is an essential feature of the application, the search view can be integrated into navigation components such as the navigation bar, navigation rail, and navigation drawer.
Focus of search bar expands into search view
Focus of search bar opens a modal attached to the relevant pane
Tapping “Search” Icon Button
When the “Search” icon in the app bar is tapped, the search view is displayed.
Tapping “Search” icon button expands into search view in a full-screen modal.
Searching
Users can search by typing a query or choosing from an available suggestion. Suggestions may include previous searches and/or a list of possible search results based on the typed input.
Tapping “Enter” initiates a search and displays the results below the search bar.
While the results are displayed, the search text field remains visible but unfocused.
Navigating Back
To remove focus from the search, users can tap the “Back” icon or use the predictive back by swiping left or right on of the screen to close the search view and keyboard.
Scrolling
The search bar can either move with the content as users scroll and return when scrolling back, or it can stay fixed at the top of the screen.
Variations
Search Bar
The search bar is a persistent and prominent search field located at the top of the screen. It is used when the search functionality is the main emphasis of the application.
Search bar on top of a list
Search Icon Button
A “Search” icon is best used when search is not the primary focus of the app.
“Search” icon button as trailing element of the app bar
Search View
The search view appears when users either tab the search bar or the “Search” icon button.
Depending on the use case, various behaviors and variants for presenting the search view are available.
Search view in full-screen modal on compact window size (left) and as a modal sheet docked in the list pane (right)
Adaptive Design
Search Bar
The search bar should remain within its designated area, scaling its width according to different layouts. As the parent container scales, internal elements should stay anchored to the left and right.
Scaling behavior of a search bar from compact to expanded window size
Search View
Depending on the use case and window size class, the search view behaves differently.
In compact window sizes, the search view is a full-screen modal.
In medium and expanded windows, it is displayed as a modal sheet docked to the search bar.
For a global search or a heavy search with a lot of suggestions or different content structures, it is recommended to display a full-screen model for all window size classes.
Scaling behavior of a search view from compact to expanded window size
Resources
Development: FioriSearchView
SAP Fiori for iOS: Search Bar
Material Design: Search
Related Components/Patterns: List Picker