Overview

Overview

Search boxes enhance user experience by offering a simple text input field for users to enter search terms, allowing them to quickly find and navigate to relevant content or items.

Default

The default search box is the style that can be used for elements that enable users to enter keywords or phrases to find specific information or items within a website or application.

Vanilla example
Palette

CODE HERE

Figma Bootstrap
<p>CODE HERE</P>

Responsive

The responsive variation replaces the button text with a search icon on smaller devices. This allows more space for text to be written in the text input. This is the default pattern used with the header pattern.

Vanilla example
Palette

CODE HERE

<p>CODE HERE</P>

Usage guidelines

When deciding whether or not to use a search box, it's important to consider the context, user needs, and the complexity of your website or application.

General guidelines

  • Search text should be set in sentence case, with only the first letter of the first word capitalised.
  • Put search box on every page including 404 (babich)
  • Search boxes should be at least 27 Characters in width

When to use

  • Large websites or applications: When your website or application has a significant amount of content, a search box can help users quickly locate the information they're looking for (Nielsen Norman Group: Search: Visible and Simple )
  • Complex content or data: If your website or application deals with complex content or data, a search box can help users find specific information more efficiently

When not to use

  • Small websites or applications: If your website or application has limited content and a simple navigation structure, a search box might be unnecessary
  • Clear and straightforward navigation: If your website or application has a clear and straightforward navigation system, users may not require a search box to find the information they need
  • Single-page websites: In cases where your website consists of a single page or is primarily a landing page, a search box is usually not required, as users can easily scroll through the content to find the information they need

Last updated: April 2026

Back to top