Basic Search Bar
The basic search bar provides a simple search field with a leading search icon and clear button.
Search View (Full Screen Mode)
The search view provides a full-screen search experience with suggestions and results. It can be used as the primary focus for search-oriented interfaces.
Search Bar with Multiple Icons
Search Bar with Avatar
Search bars can include an avatar to indicate the current user context for the search.
With avatar only
With avatar and trailing icon
Search with Suggestions
Search view can display suggestions that update as the user types. Try typing to see the suggestions filter in real-time.
Try it: Click on the search field and type to see the suggestions filter in real-time.
Disabled Search
Search component can be disabled to prevent user interaction.
Permanently Disabled
Toggle Disabled State
Using Events and API
The search component provides a rich API and events system to integrate with your application.