Search Input

Search allows users to search the content of a site or subset of a site. Users enter a query and then see related results.

Search can be used for an entire site, at the page level, or within an element (such as a data table).

It is a form submit and requires the user to select submit to reload the page with search results.

We also use search boxes that show filtered results in a container immediately without the user submitting. These are more complex. Contact us if you’d like to use one and need support.

Do not use search for small amounts of content or simple information.

See input fields for a broader overview of input controls.

Place search where users expect to find it and where it is most appropriate relative to the context.

We built a number of usability and accessibility best practices in and it:

  • Displays hinted search text (“Search this site” by default) that is replaced with the input text.
  • Features a magnifying glass icon, which is recognizable as associated with search functionality.
  • Employs the search button as a submit button, which reduces the number of keystrokes required. Form submit version only.

Relevant WCAG guidelines

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.