Updated: January 27, 2022

Search Bar

FUISearchBar

Intro

The search bar is used to locate objects within a large collection of items. It is usually used in a list report pattern or list picker to allow the user to quickly navigate to an object. 

Search bar on iPhone (left) and on iPad (right)
Search bar on iPhone (left) and on iPad (right)

Anatomy

The search bar is composed of the following elements:

A. Prompt Text

Prompt text is included to provide context to the user about what type of objects is being searched for.

B. Icon

An icon can be included in the search bar to launch scanning functions. To learn more, see Barcode Scanner.

C. Input Field

This area allows the user to input keywords for search.

D. Clear Button

Tapping on the clear button clears all values that has been added by the user.

E. Cancel Button

The cancel button returns the search bar to its default state.

Search bar default state
Search bar default state
Search bar active state
Search bar active state

Behavior and Interaction

When the user taps on the search bar, it shifts up and takes the place of the navigation bar, which is automatically hidden. Once the user inputs a value into the search field, results are populated within the content area.

Search bar default state (left), active state (middle), search results (right)
Search bar default state (left), active state (middle), search results (right)

Variations

The search bar has two variations:

Prominent

A prominent search bar remains visible at all times below the navigation bar. It is used when the search is the primary action in the current screen.

 

 

Minimal

A minimal search bar is hidden by default and is revealed when the user pulls down on the content area. Use a minimal search bar when search is a secondary action.

Specifications

Search bar specifications
Search bar specifications

Resources

Related Pattern: Search (Pattern)

Development: FUISearchBar

SAP Fiori for Android: Search