Recipe

The right input for search fields

A search box whose keyboard says Search on the return key.

<form action="#">
  <input type="search" />
</form>

<form action="#">
  <input type="search" />
</form>

<!-- Vue templates take these attributes as-is -->
<form action="#">
  <input type="search" />
</form>

<!-- Svelte takes these attributes as-is -->
<form action="#">
  <input type="search" />
</form>

iPhone · iOS

Create account

Full name

Alex Morgan

Searchsample

keyboards

Password

••••••••

qwertyuiop

asdfghjkl

⇧zxcvbnm⌫

123spacesearch

iOS: simulated · not yet device-verified · scope iOS 26, Safari, en-US

Pixel · Gboard

Create account

Full name

Alex Morgan

Searchsample

keyboards

Password

••••••••

qwertyuiop

asdfghjkl

⇧zxcvbnm⌫

123,spacesearch

Android · Gboard: simulated · not yet device-verified · scope Android 16, Chrome, en-US

Recipe updated 2026-07-25 · dataset 2026-07-24

type="search" restyles the return key as Search and, on iOS, adds a clear (×) button inside the field once there is text to clear.

The <form> is not decoration: the Search return key only renders when the input sits inside one — outside a form it silently falls back to plain Return, and the point of the type evaporates. The form submission is also what makes the key do something.

If you need the Search key on a field that isn’t semantically a search box, enterkeyhint="search" relabels the return key on any input — the label without the clear button.

Try it in the playground →