UI components

Search bar

A box that allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation

Search big
Search medium
Search small
<h6>Search big</h6>

<div class="usa-grid">
  <div class="usa-width-one-half">
    <div role="search">
      <form class="usa-search usa-search-big">
        <label class="usa-sr-only" for="search-field-big">Search big</label>
        <input id="search-field-big" type="search" name="search">
        <button type="submit">
          <span class="usa-search-submit-text">Search</span>
        </button>
      </form>
    </div>
  </div>
</div>

<h6>Search medium</h6>

<div class="usa-grid">
  <div class="usa-width-one-half">
    <div role="search">
      <form class="usa-search">
        <label class="usa-sr-only" for="search-field">Search medium</label>
        <input id="search-field" type="search" name="search">
        <button type="submit">
          <span class="usa-search-submit-text">Search</span>
        </button>
      </form>
    </div>
  </div>
</div>

<h6>Search small</h6>

<div class="usa-grid">
  <div class="usa-width-one-half">
    <div role="search">
      <form class="usa-search usa-search-small">
        <label class="usa-sr-only" for="search-field-small">Search small</label>
        <input id="search-field-small" type="search" name="search">
        <button type="submit">
          <span class="usa-sr-only">Search</span>
        </button>
      </form>
    </div>
  </div>
</div>

Accessibility

  • Always include the word "search" inside the <button> element for screen readers. You can visually hide this text using the CSS class usa-sr-only or Sass mixin @include sr-only;.

Usability

When to use
  • There will always be users who are confused by your navigation system and who would benefit from being able to search your site.
When to consider something else
  • On single-page or very small sites, you may be able to get away without a search bar.
Guidance
  • Allow the search bar to be as wide as possible, but a minimum of 27 characters wide. This allows users to enter multiple search terms and still be able to see all of them. The more users can see their search terms, the easier it is to review, verify, and submit their search query.
  • The magnifying glass has been shown to be almost universally recognized by users as an indicator of search, and doesn’t need to be visually paired with the word "Search" as long as it remains for screen readers.
  • Maintain this search bar when displaying the search results with the original search terms.
  • On a site's home page the search function should appear as a search box instead of a link so users can locate it easily.
  • Don't offer advanced search as the default option. The majority of people will do a simple search with one or two search terms. If advanced search is offered, it increases the likelihood of a person making a mistake in their query.
  • Even if the search bar isn't visually displaying a label, the form field should include a label for screen reader users.
  • The search button itself should be a submit button for the form to reduce the number of keystrokes required to use the form.