Phone Input

v1.0.0·Added in 1.0.0

A phone number field with a searchable country picker, formatting as you type, validation and one clean E.164 value out.

Type the number and it formats itself the way the country writes it (712 345 678 for Romania, 69 123 456 for Moldova, 201 555 0123 for the US), with the caret kept after the digit you typed; Backspace on a space deletes the digit before it. A leading trunk 0 is dropped (0712 345 678 becomes 712 345 678), and digits beyond the country's longest number are refused. Type or paste a number that starts with + or 00 and the calling code picks the country: +373 69… switches the flag to Moldova, 0040 712… to Romania; browser autofill of a full number works the same way. The flag button (flag, +40 and a chevron) opens the country list: search by the localized name, the English name, the ISO code or the calling code, suggested countries first. With the keyboard: Tab reaches the flag button, then the number. On the flag button Enter, Space or ArrowDown opens the list and a letter jumps to the next country starting with it without opening; in the list the search is focused, arrows, Home / End and PageUp / PageDown move, Enter picks and puts focus back in the number, Escape closes and returns to the flag button. With showValidity a green check pops in once the number is valid. On a phone the list is a bottom sheet with search and 48px rows, the field raises the phone keypad, and the flag button keeps a 44px hit area.