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
When to avoid
Specifications
State
Default
Focused
Valued
Behavior
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.