Search

Other names: searchbox, search field

A search input provides visitors an input field to search for specific content within a site or database.

With search, visitors can filter content using different keywords or phrases.

The search component includes:

• A concise label
• Some placeholder text
• A magnifying glass icon

Search is an optional element. For search to work, you'll need to have a Google Search ID for your domain and include a search results page for your website.

Active search

This search bar appears on the right side of the header. This is the default search bar in the template.

Featured search

The featured search is a standalone component, placed near the top of the page to emphasize search functionality. For more information, see the Featured search component page.

Usage

When and how to use it

Always use a clear and concise label for your search bar. Visitors should readily understand what the search is for.

Try to use just one search per page. If you need multiple searches, clearly label them to indicate their purpose.

For the best search optimization, evolve your content with search results. If visitors frequently use terms that are not in your content, consider working those search terms into the page content.

Place search into the navigation-search container, which is after Mobile Controls.

On mobile, the search box becomes a search icon button. When selected, it opens a full-width search box under the header.

How not to use it

Search field input should fit into one line. Do not use multiline search inputs.

Do not default to an advanced search. The majority of visitors will want to do a simple keyword search.

Accessibility

Standard accessibility review

Each time a new component version is published:

• Test with the Axe accessibility tool
• Review with the VoiceOver or NVDA screen reader
• Ensure all actionable elements are accessible by keyboard command and tab in a logical order
• Check the component layout on a variety of screen sizes