Recipe

The right input for passwords

A password field that surfaces the saved credential — or generates a strong new one.

<form action="#">
  <input type="password" autocomplete="current-password" />
</form>

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

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

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

iPhone · iOS

Create account

Full name

Alex Morgan

Passwordsample

••••••••

Password

••••••••

✦ Saved password

qwertyuiop

asdfghjkl

⇧zxcvbnm⌫

123spacereturn

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

Pixel · Gboard

Create account

Full name

Alex Morgan

Passwordsample

••••••••

Password

••••••••

✦ Saved password

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="password" switches the keyboard to secure entry: autocorrect and the suggestion bar are disabled, and the keyboard does not learn from what you type.

The autocomplete token does the heavy lifting, and it differs by context. On a login form, current-password (this page’s configuration) surfaces the saved credential for the site, gated by Face ID or fingerprint. On a signup form, use new-password instead — the system offers to generate and store a strong password in the bar above the keyboard.

Both offers need a secure context (HTTPS) and a <form> around the field — the assist bar is form-shaped.

Try it in the playground →