A search field allows users to search for specific information

Structure

The default search field is similar to a text field with a search icon on the left.

The searchable indexes field has a select field right above a default search field. 

If needed, a placeholder should be used to indicate what type of items can be searched.

It should follow this format: “Search {content name}…”

Behavior

When users click on a text field, the field should become active. 

Once users start typing, a clear icon should appear on the right side and the search icon disappears.

If users leave the field with an input, the field becomes inactive and only the input is visible (no icons). 

Active searchable indexes field with input

Related pages

A select field allows users to select one option from a list of more than 10 items. 
A text area allows users to enter, read and edit text.
A text field allows users to enter, read and edit text.
A timepicker allows users to pick a time from a popup.