Recipe
The right input for phone numbers
A phone number, typed on the dial pad or filled from the user's own contact card.
<form action="#">
<input type="tel" autocomplete="tel" />
</form>iOS: simulated · not yet device-verified · scope iOS 26, Safari, en-US
Android · Gboard: simulated · not yet device-verified · scope Android 16, Chrome, en-US
Recipe updated 2026-07-25 · dataset 2026-07-24
type="tel" summons the classic dial pad: big digits plus +, *, and # —
everything an international number needs, and nothing autocorrect can mangle.
Unlike email or url, a tel input imposes no format validation of its own,
and that is the right default: real-world phone formats are far too varied for
the browser to police.
autocomplete="tel" adds the highest-leverage part: the user’s own number
offered above the keyboard, which turns the whole field into a single tap.
Keep the field permissive while typing — accept spaces, dashes, parentheses,
and a leading + — and normalize/validate with a real phone library
(libphonenumber and its ports) rather than a regex. The dial pad happily
accepts three digits or thirty; the keyboard was never the validation layer.
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.