Search field component

A search field allows users to search for specific information

The Search field is an ingredient of the Search & sort recipe and should only be used in this context.

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}…”

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).