Searchbar

Usage

A searchbar is an input field that enables users to quickly search for content within a site or app to find specific items. The user can enter text to search for information. The searchbar component is particularly useful when the user is looking for a specific item within a large quantity of information.

States

A regular FAB can have one of the following states: resting, focused, typing, typing + loading, activated and disabled.

Resting

Focused

Typing . When in Typing state, the autocomplete dropdown can be show, either displaying a list or empty.

Typing + Loading

Activated

Disabled

Anatomy and content

This description is for searchbar components on white background:

1 - Border: The searchbar has a border that separates it from its background. On the “Focused” and “Typing” states, this border is not displayed. A subtle elevation is used as a separator between the searchbar and its background.

2 - Background: The background gives the user feedback on the state of the searchbar as it is lighter on the “Active” and “Typing” states.

3 – Search icon: As it is a universal cues for searchbars, the search icon enables the user to identify quickly the search area.

4 – Text : The searchbar should always have a place holder that states the aim of the research (ex: “Rechercher un collaborateur”). When the user is typing text inside the searchfield the text color changes to differenciate it from the place holder.

5 – Delete button : The delete button can be used to erase all the informations entered inside the searchbar

6 – Dropdown arrow : The dropdown arrow can be used if displaying a list is necessary.

On dark/primary background: The searchbar component has always a white background, no elevation and no border. The content and behaviour is the same as listed above.

Behaviour and interaction

The user has two different ways to make a research :

1 – Manual search : by typing text in the search field and pressing the “Enter” Key

2 – Live search : the research is triggered by each character thet the user enters or deletes within the searchbar

Responsiveness and density