Hero search

Hero search provides the user with easy access to targeted search.

View variants & code Figma

NSW Government

Find information and access services.

Show code Hide code

Usage

Guidance

use hero search for sites with large volumes of content where the primary navigation of users is via search
use hero search 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. These may update dynamically based on popular search queries if the business logic is in place, or be manually managed through a content management system
where possible, bold the matching keyword or term in the result description
have smart algorithms that can search for similar terms or can search even with misspelled words

Don't

clear the original text from the input field; retaining it helps users make a new search with modifications
hide the number of results returned
leave users without pagination when more than 10 results are returned
combine search results from different areas (eg. docs, services, apps, tutorials, blogs) without categorising them
leave users without a clear message or other search suggestions when no results are found
use hero search 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.

Background image options

This component supports two methods for adding a background image:

CSS background image: The background image can be applied via CSS using background-image. This method is useful for decorative images that do not need to be indexed or optimized separately.
HTML image element: The image can be added as an img element in the HTML. This method is beneficial for performance, as it allows the image to be processed by external compression tools, ensuring optimized page load size and improved performance.

Search form variations

The hero search form supports multiple configuration options to enhance usability:

CTA customisation: The call-to-action (CTA) button can be customised to display either an icon (e.g., a magnifying glass) or text (e.g., “Search”), depending on user needs and design preferences.
Form labels: A label can be added to the search form for increased clarity, ensuring accessibility and guiding users on what to input.

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.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Ensuring compliance through usage

Redundant entry

To ensure WCAG 2.2 AA compliance for a hero site search input component, proper usage and configuration are key. While the component provides an accessible structure, it's essential to retain previously entered search terms or suggestions if a user returns to the page or refines their search. Ensure the input field maintains a clear label, along with guidance on how to effectively use the search function, such as placeholder text or assistive instructions. Users should be able to modify or correct their search query without needing to start over.

Adhering to these practices provides a seamless, accessible experience that aligns with WCAG standards.