LayoutsRight ChevronSearch
Search - Image
Search
The search box allows users to enter keywords or phrases to filter and display relevant results from a list. Based on the input, the system dynamically narrows down the options. If no matches are found, a "no records found" message is shown. This enhances the efficiency of finding specific information quickly.
Search with Category HighlightFigma LogoGet FigmaGo to Figma
In this demo, the search box features a prominent search bar at the top for easy access. Based on the entered keyword, results are organized by category, allowing users to quickly navigate through categories and select the most relevant results.
Figma LogoGet FigmaGo to Figma
Desktop View
Tablet View
Mobile View
Toggle between Light and Dark Mode
Loading Indicator
Search with "No Result Found" Status TemplateFigma LogoGet FigmaGo to Figma
In this demo, the search features a prominent search bar at the top for easy access. Based on the entered keyword, the results are displayed in a simple list format. If no matches are found, a specially designed "No Results Found" status template is shown, giving users a clear indication that their search yielded no results.
Figma LogoGet FigmaGo to Figma
Desktop View
Tablet View
Mobile View
Toggle between Light and Dark Mode
Loading Indicator
Search with Recent HistoryFigma LogoGet FigmaGo to Figma
In this demo, the search feature with recent history is designed to enhance the user experience by displaying a list of recently entered keywords or phrases, allowing users to quickly revisit and refine their previous searches. This functionality saves time and helps users easily navigate through past queries, making the search process more efficient.
Figma LogoGet FigmaGo to Figma
Desktop View
Tablet View
Mobile View
Toggle between Light and Dark Mode
Loading Indicator
Search ContactsFigma LogoGet FigmaGo to Figma
In this demo, the search feature allows users to quickly search contacts by entering contact names. The results are displayed in a simple list format, making it easy for users to view and select the desired contact.
Figma LogoGet FigmaGo to Figma
Desktop View
Tablet View
Mobile View
Toggle between Light and Dark Mode
Loading Indicator
Search with Chip as FilterFigma LogoGet FigmaGo to Figma
In this demo, the search feature includes a set of chips as filter options, enabling users to instantly refine their results by selecting relevant chips. This streamlined approach allows users to quickly narrow down their search and find the most relevant information.
Figma LogoGet FigmaGo to Figma
Desktop View
Tablet View
Mobile View
Toggle between Light and Dark Mode
Loading Indicator