Search
Search allows users to locate or refine content based on simple words or phrases.
When to use
Search can be used as a primary way of discovering content.
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 component.
Note: Search components as dark theme are only available in Figma.
Global search
Global search can be used as 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.
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".
Accessibility
Use either a label or aria-label for description of whats being searched, Search should be used inside a form.
Implementation in Figma
- In Figma go to the Assets Panel and search for search.
- Drag and drop the component in your frame.
- Rename and resize the component if needed.
- Choose the variant from the Design Panel.