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

Optional additions

Not always necessary, but they can have their perks!

Previous searches

Showing what a user has searched before can speed up their experience if they frequently search the same queries

Appropriate visibility

The search function 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)


The way a component can change based on interaction.


Search has not been interacted with and is visible



Mouse pointer is on top of search's input field or container



Container has input text entered



Container has been selected or text is being entered



Container cannot be clicked and text input cannot be entered