Recipe

The right input for email addresses

An email address, typed without autocorrect surprises or filled from the browser's own suggestion.

<form action="#">
  <input type="email" autocomplete="email" />
</form>

{/* React needs camelCase — a lowercase inputmode/autocomplete is silently ignored */}
<form action="#">
  <input type="email" autoComplete="email" />
</form>

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

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

iPhone · iOS

Create account

Full name

Alex Morgan

Emailsample

you@example.com

Password

••••••••

✦ you@example.com

qwertyuiop

asdfghjkl

⇧zxcvbnm⌫

123@.spacereturn

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

Pixel · Gboard

Create account

Full name

Alex Morgan

Emailsample

you@example.com

Password

••••••••

✦ you@example.com

qwertyuiop

asdfghjkl

⇧zxcvbnm⌫

123,spacereturn

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

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

type="email" retunes the QWERTY keyboard for addresses: iOS promotes @ and . onto the primary layer, and both platforms drop the autocorrect and auto-capitalization behavior that mangles addresses in a plain text field.

autocomplete="email" is the bigger win: the user’s own address offered in the bar above the keyboard — the difference between typing twenty characters and tapping once.

Browsers validate type="email" natively but permissively (a@b passes), so server-side validation still owns correctness. What the type buys you is the keyboard and the autofill, not the guarantee.

Try it in the playground →