Usage

Use hero search for sites with large volumes of content where the primary navigation of users is via search. It can also be used when research has shown that users prefer to search rather than browse by navigation.

Use the suggested search links to provide access to popular searches. This may update dynamically based on popular search queries if the business logic is in place, or manually managed through a content management system.

When to avoid

Do not use on very small sites or sites with minimal content, consider hero banner.

How this component works

Placement

The hero search is placed in a prominent position at the top of a page, predominately on the homepage. However it can also be placed at the top of directories, libraries, or lists.

Search results

By default, search results should be sorted by relevance. If there is a user need, offer a sort function to allow users to order the results based on supplementary criteria.

When displaying results, consider what information is important to the user and display what they require to make an informed decision.

Do:

• keep the original text in the input field. This facilitates the user's action if they want to make a new search with some modifications in the input
• show the number of results returned
• where possible, bold the matching keyword or term in the result description
• use pagination when more than 10 results are returned
• categorise the search results if they come from different areas (eg. docs, services, apps, tutorials, blogs)
• display a clear message when no results are found and offer other search suggestions whenever possible
• have smart algorithms that can search for similar terms or can search even with misspelled words

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.