Form

Search input

Published on

Description

The search input provides a text field optimized for search queries. It uses type="search" which provides a clear button and search-specific keyboard behavior on mobile devices.

Example

Open in new tab
View HTML markup 
  <search>
  <form method="GET" novalidate="" role="group">
    <div>
      <div><label for="q">
          <hgroup>
            <h1>Search</h1>
          </hgroup>
        </label> <input value="" id="q" name="q" dir="auto" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" enterkeyhint="search" type="search" /> </div> <button type="button"><svg class="icon" aria-hidden="true">
          <use href="/img/icons.svg#search"></use>
        </svg><span>Search</span></button>
    </div>
    <p>Need help? <a href="/form/input-search" target="_top">View our guidance </a></p>
  </form>
</search>

Accessibility

  • Wrap in a <search> landmark or use role="search" on the form.
  • Use explicit <label for="id"> association.
  • Inherit typography for WCAG 1.4.12 compliance.
  • Ensure the clear button is keyboard accessible.

References

Variables

None for input