Skip to content
search icon
clear
Component Status

Search allows users to locate or refine content based on simple words or phrases.

Guidelines

Users can type a term and press Enter to see the results. Auto-complete, recent searches, suggested searches and pre/post-scoping are available via the Menu component.

Global Search

Global search can be used a a primary way of discovering content. The global search placeholder text should always say "Search". The global search should replace the Center custom content, placeholder of the Top bar. The global search can be a button icon that is expanded into the Search field if search is less common in the application.

In-context Search

In-context search allows users to search within a section of content---such as a table. The placeholder text should give users a hint at what type of results they can expect.

Variations

Field

FigmaExternal linkFigma design of search field

Scope

Scoping allows users to narrow their search before they start. The Scope can be changed by opening the menu. The default choice for the scope should always be "All".

FigmaExternal linkFigma design of search scope design

Demo

search icon
clear
search icon
clear
search icon
clear
✏️ Edit this page on GitHub