Search

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

Anatomy

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

Types

Default

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.
Template
Example

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.
Example

Specifications

Padding


Styling