Search

A free-text entry component for finding or filtering content.

Considerations

The search component is wrapped in a <search> element which defines a search landmark for assistive tech. Search inputs should also be wrapped in a <form>, even if submitted via JavaScript.

Give the <search> commponent a label with aria-label or aria-labelledby to distinguish different types of search components (like full-site search vs filtering a table). If the same search appears in multiple spots on the page (like the header and footer) it's OK to repeat the label. Your label shouldn't include the word "search" because it will often be announced redundantly by assistive tech ("Site search search").

As tempting as it may be, don't omit the button or label, and don't use placeholder text as the label. It's important to provide clear labels and controls for all users, but especially for assistive tech users.

An input with type="search" allows browsers to provide search UI or change keyboard behavior on mobile devices. The input should usually have a required attribute to prevent empty searches.

Since most searches are freeform, autocomplete, autocorrect, and spellcheck should be turned off to avoid trying to "fix" the query. (autocapitalize="off" autocorrect="off" spellcheck="false")

Examples

Basic Search

This example includes a basic search form with a label, input, and submit button. Since the button contains both an icon and text, the icon is hidden from assistive technology using aria-hidden="true" so that it is not announced.

<search aria-label="Site-wide">
  <form>
    <label>
      <span>Search this site</span>
      <input
        id="search"
        type="search"
        autocapitalize="off"
        autocorrect="off"
        spellcheck="false"
        required
      />
    </label>
    <button type="submit" class="button button--primary">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        width="22"
        height="22"
        fill="currentColor"
        aria-hidden="true"
      >
        <title>Search</title>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M10 .875a9.5 9.5 0 0 1 7.692 15.071l3.369 3.368.103.115a1.5 1.5 0 0 1-2.11 2.11l-.114-.104-3.369-3.368A9.5 9.5 0 1 1 10 .875Zm0 3a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"
        ></path>
      </svg>
      Search
    </button>
  </form>
</search>