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 GuidelinesAnatomy
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.
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.
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
Behavior
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.
Specifications
Padding
