Search field

Definition: A search field is a text input element that allows users to enter keywords or queries to search for specific information within the application.

When to use

Use a search field to facilitate the process of finding and retrieving relevant content or data. It's accompanied by a "Search" button or icon that users can click or tap to initiate the search. Users can enter search terms, such as keywords, phrases, or even complex queries, into the search field, and the system responds by presenting relevant results.


  1. Icon
  2. Inputs
  3. Search field







Small & large format

  1. Default search field
  2. Primary search field
  3. Search field with the default button
  4. Search field with primary button






Action types




1. Default


Use as a secondary action.

3. Primary


If users need to locate specific information from a larger dataset quickly.

Using a larger variant is optional to enhance the visibility.







  1. Enabled
  2. Hover
  3. Focused
  4. Disabled