Components
Search
Search is a specialized input field that allows users to enter a query to find relevant content within a website, application, or specific dataset. It's a fundamental tool for information discovery and navigation.
When to use
Site-wide search
To provide a global search function, typically placed in the main header or navigation bar.
Site-wide search
To provide a global search function, typically placed in the main header or navigation bar.
Site-wide search
To provide a global search function, typically placed in the main header or navigation bar.
Search filtering collections
To find or filter a specific set of content on a page, such as a data table, a list of users, or a product grid.
Search filtering collections
To find or filter a specific set of content on a page, such as a data table, a list of users, or a product grid.
Search filtering collections
To find or filter a specific set of content on a page, such as a data table, a list of users, or a product grid.
Knowledge bases
As the primary interaction for users to find articles or answers in a help center or documentation site.
Knowledge bases
As the primary interaction for users to find articles or answers in a help center or documentation site.
Knowledge bases
As the primary interaction for users to find articles or answers in a help center or documentation site.
When to avoid
For data entry
For standard form fields like name, email, or password, use a text input component.
For data entry
For standard form fields like name, email, or password, use a text input component.
For data entry
For standard form fields like name, email, or password, use a text input component.
With predefined options
When users need to filter by a small, known set of categories (e.g., status, type), use selects, chips, or checkboxes instead of a free-text search.
With predefined options
When users need to filter by a small, known set of categories (e.g., status, type), use selects, chips, or checkboxes instead of a free-text search.
With predefined options
When users need to filter by a small, known set of categories (e.g., status, type), use selects, chips, or checkboxes instead of a free-text search.
Specifications
State
Default
Focused
Valued
Default
Focused
Valued
Default
Focused
Valued
Behavior
Autocomplete (Optional)
As the user types, the search can be enhanced to show a dropdown menu of suggested queries.
Autocomplete (Optional)
As the user types, the search can be enhanced to show a dropdown menu of suggested queries.
Autocomplete (Optional)
As the user types, the search can be enhanced to show a dropdown menu of suggested queries.
Anatomy
1
Content
The leading search icon provides a visual cue, while the input area accepts a text query or displays a helpful placeholder.
2
Clear icon
Appears once text is entered and allows the user to instantly reset the search query.
Value
Search
Search