Recipe

The right input for card numbers

A card number, filled from the browser's saved cards — or scanned with the camera on iOS.

<form action="#">
  <input type="text" inputmode="numeric" autocomplete="cc-number" />
</form>

{/* React needs camelCase — a lowercase inputmode/autocomplete is silently ignored */}
<form action="#">
  <input type="text" inputMode="numeric" autoComplete="cc-number" />
</form>

<!-- Vue templates take these attributes as-is -->
<form action="#">
  <input type="text" inputmode="numeric" autocomplete="cc-number" />
</form>

<!-- Svelte takes these attributes as-is -->
<form action="#">
  <input type="text" inputmode="numeric" autocomplete="cc-number" />
</form>

iPhone · iOS

Create account

Full name

Alex Morgan

Sample fieldsample

Sample text

Password

••••••••

1234567890⌫

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

Pixel · Gboard

Create account

Full name

Alex Morgan

Sample fieldsample

Sample text

Password

••••••••

1234567890⌫

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

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

inputmode="numeric" on a plain text input summons the digit pad while keeping the value a digit string — which is what a card number is. Leading digits survive intact and nothing tries to parse the value as a quantity.

autocomplete="cc-number" is where the conversion win lives: saved cards offered above the keyboard, and on iOS the camera card-scanning flow. It needs a secure context (HTTPS) and a card saved in the browser or Wallet.

Accept spaces and dashes while typing — people copy numbers formatted in groups of four — and strip them before validating. The companion tokens finish the form: cc-exp, cc-csc, and cc-name on their own fields keep the whole autofill flow intact.

Gotchas

The keyboard is not validation
Keyboard choice only shapes convenience. Paste, dictation, hardware keyboards, and autofill all bypass the layout, so the value still needs JS and server-side validation.

Try it in the playground →