Searchbar
Components
A search bar is an interactive input field that allows users to find specific content by entering keywords or phrases. It typically includes a text input area and a search icon/button, often enhanced with features like autocomplete suggestions to help users find information quickly.
Checklist
Reset
Input field
A clear container for a user to start typing in
Label or placeholder text
Identify the purpose of the field is for them to search
Use your placeholder text to suggest examples of what to search for
Quick links, autocomplete and suggestions
As the user is typing, offer available links and phrases based on what they have entered so far
With enough data from the user, you can collect quick links and suggestions based on their previous searches to streamline their search
Submit search button
A visible link to submit search and view results
Include a loading icon or feature once search has been submitted incase there is a connection issue
Previous searches
Showing what a user has searched before can speed up their experience if they frequently search the same queries
Previous searches
Search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area