Search

input[type="search"] has fully rounded ends and a magnifier icon at the inline start.

<input type="search" name="search" placeholder="Search" aria-label="Search" />

Search with a button#

Use role="search" on a form to join the field and its button. The group has pill ends on the first and last child. See Groups for the shared behavior.

<form role="search">
  <input name="search" type="search" placeholder="Search" aria-label="Search" />
  <input type="submit" value="Search" />
</form>

Validation#

With aria-invalid, the search icon stays and the valid or invalid icon is added on the other side. See Validation states.

Accessibility#

search is a landmark role, so use it for the main search of a site or section and label the input. Browsers add a clear button inside type="search" once text is entered.

Customization#

The pill radius is 5rem, set through --pico-border-radius on the input. The icon is --pico-icon-search.