Search

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

Appropriate visibility

Search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area

⭐️ For global search, the component is most visible on top level navigation (menu or header)