🕵️‍♀️

Search

Component

Features

Each visible item to be shown on this page.

High level visibility

The search function should be easily accessible on any page

⭐️ Display search on a a menu, header or top level navigation

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

States

The way a component can change based on interaction.

Default

Search has not been interacted with and is visible

Search

Hover

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

Search

Filled

Container has input text entered

Search

Focused

Container has been selected or text is being entered

Search

Disabled

Container cannot be clicked and text input cannot be entered

Search