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
Search is used to find and access content globally within an app or locally within any given screen. There are two variations of search, persistent and expandable search. The variation used is determined by its prominence within the app.
Search in portrait orientation (left) and landscape orientation (right)
Anatomy
A. Icon Area
In the non-active state, the icon area can be interactive or non-interactive, depending on the app team’s needs. During the active state, the icon area becomes the primary form of navigation.
B. Placeholder Text
The placeholder text should state the type of content that can be searched. Wording such as “Search for Tools” and “Search for Products” are good examples that help the user more confidently perform a search.
C. Scan
If the user taps on the “scan” icon, this triggers a full-screen dialog that displays the scan view. Users may scan a barcode or a QR code to search for an object quickly.
D. Voice
If the user taps on the “voice” icon, this triggers a modal dialog displaying the voice input. Users can use the device’s built-in microphone to pronounce their search.
Anatomy of the search
Variations
The type of search is determined by how prominent search is within the app.
Persistent Search
Persistent search on map
Expandable Search
Expandable search on app bar
Resources
Development: FioriSearchView
SAP Fiori for iOS: Search Bar
Material Design: Search
Related Components/Patterns: Search (Pattern), List Picker