Search field component

A search field allows users to search for specific information

When to use it?

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

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