Search
FUISearchBar
Intro
The search pattern is used to locate information or objects within a large collection of values. There are two types of search: global and local. A global search is used to search universally through the contents of an app. A local search is a subset of global search and is used to find information within a specific list.
Global search on iPhone (left), local search on iPad (right)
Global search is used when the user has a need to search for different types of objects within the app. It is also useful when there are multiple object types.
Navigation Style
Global search can be included in the navigation bar for apps with hierarchical navigation style. In apps with flat navigation style, global search can be accessed from the tab bar with its own dedicated tab.
Hierarchical navigation (left), flat navigation (right)
Regular Width
In regular width, global search can either be displayed as a search icon or a search bar, each of which has a different behavior. In compact width, global search is only displayed as a search icon due to space limitation.
Global search in a search icon
Global search in a search bar
Trending Searches
Trending searches can be displayed when global search is active to provide the users with quick links to search results.
Trending searches
Local Search
Local search limits the search within a specific list or type of object.
It is presented through the search bar component under the navigation bar within a list. There are two variants of the search bar: prominent and minimal. A prominent search bar remains visible at all times while the minimal search bar appears when the user pulls down on the content area. Use the minimal search bar only when search is considered as a secondary action in the current screen. To learn more, see Search Bar.
Local search example
Search to Select
The search to select component is used to select multiple values while searching in a large collection of items. Its functionality is similar to a multi-select list picker but the selected values are located within the search field instead. To learn more, see List Picker and Search to Select.
Search to select example
Barcode Scanner
The barcode scanner can be added to allow the user to quickly search for an object without typing. A barcode icon can be included in the search bar to launch the scanner. To read more about scanning, see Barcode Scanner.
Barcode scanner example
Your feedback has been sent to the SAP Fiori design team.