UI Component Lab 日本語

← All components

Input

Search field

A text box with a search button for finding content across a site.

Also known as

How to recognize it

A text box, often with a magnifying glass icon, next to a “Search” button. Some browsers show a × button to clear the text.

Variations

With scope
A menu next to the box narrows what to search, such as news or documents only.

Behavior

  • Pressing Enter or the button runs the search.
  • This demo wraps the form in a <search> element, which marks it as a search landmark so screen reader users can jump to it.
  • It uses <input type="search">, so in Chrome, Esc clears the text.

Keyboard

KeyAction
EnterRuns the search.
EscClears the text (depends on the browser).
TabMoves to the search button.

Usage notes

  • Use it for searching across a whole site. To filter rows of a table, use table controls instead.
  • Give it a label. Placeholder text such as “Search” does not count as one.
  • Text field: A search field is a text field for search terms, usually with a search button and a search landmark.
  • Combobox: A search field sends the typed words as they are; a combobox suggests values to pick from while typing.

Sources