The search bar is a navigation system that allows the user to quickly access content by launching a search on a keyword or phrase.


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.



Accordion anatomy diagram
  1. Field: The place where a user enters their search query.
  2. Field text: Inputted search text by the user. Optional placeholder text may be visible before the user types into the field.
  3. Search Icon Button: Signifies a search field and functions as a button. The magnifying glass icon is a universal way to indicate search.



There are two default input height sizes, Large and Small. The width varies in size based on content, layout, and design.

Search input sizes


Height (px/rem)

Use Case


40 / 2.5

This is the default size and the most commonly used size. It appears in the global header.


64 / 4

Use when there is a lot of space to work with, such as when the user is searching content within a page view.


Main Elements

Placeholder text (Optional)

Useful and short text hinting at what the user can search for. For example, “Search for benefits and services.”



The search component has three states: enabled, hover, and focus.

Accordion anatomy diagram



Click on the search field input to start typing. Once a user starts typing, a close icon (‘x’) will appear and provides a way to clear the input field by clicking on the Close icon. User may submit a query by clicking the search icon button or pressing Enter.


Press Enter to submit text as a search term, or press Esc to clear the search field. Once a user starts typing, a Close icon (‘x’) will appear and provides a way to clear the input field by pressing the Space or Enter keys.

Type-Ahead Suggestions

Type-ahead suggestions are generated from ongoing analyses of use search patterns, and place minimal load on servers. Without committing to a search, the user can see a preview of results, suggestions of additional search terms, or zero in on what they were looking for.

Type-ahead suggestions appear as soon as the user begins typing in the search field. Use type styling to differentiate between typed query text and the suggested terms, as shown in the example below.

Open search bar with an example of type-ahead suggestions