Our users use search to find items on a tool’s landing page or, in forms, users use a search typeahead to find information to associate with the form.
Demo and Developer GuidelinesFigma Component


Search is designed as a standard input with the addition of the search icon. Once the user starts typing, an icon to allow the user to clear the input appears.

Placeholder Text

Placeholder text is sentence case without punctuation. It only expresses what tool-level items the user can search.

Character count limit: 30



The default search input is typically found on tool landing pages to help the user find items in the tool that match keywords. Once a user clicks the search icon, the page will update to display the search results.

Typeahead Select

The typeahead search pattern is typically used on forms as a part of a typeahead select to find information or items to associate with the form.


If search is used and there are no results an empty state should be used. Our standard empty state pattern should not be used within a menu.