Back to components

Search Field

The Search Field enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.

Table of Contents

Edit this section, Opens in new window


Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.

Edit this section, Opens in new window


Type Purpose
Default The default search field.
Search in global header The search field component adjuste to fit into the Global Header component.
Edit this section, Opens in new window



The Search Field follows the same basic design principles as the Input Fields.


On a landing or home page, it is recommended that the search box be placed in the top right area of the screen. This is where users expect to find the search.

On a search results page, the natural position of the searchbox is closer to the search results. This helps indicate a relationship between the results and the search query.

Edit this section, Opens in new window



When searching

When searching

When the user is typing in a search query, a button appears to the right, enabling the user to reset the search query.


If autocomplete is used, the user will get matches appearing as suggestions. See Autocomplete documentation.


Default and fallback keyboard focus style for input

2px border with color BL 1, BLUE.



You can also use a larger version of the search field.

Large search field
Edit this section, Opens in new window


  1. Search icon
  2. Placeholder
  1. Reset query
Edit this section, Opens in new window
Contact us, Opens in new window