Phone Input with Country Code Form Block for React

Each country is one entry with its two-letter code, its dial code, the national pattern and the grouping of the international form (intl), where # stands for a digit, the fewest and most digits, the trunk digit a national number starts with and an international one drops, a placeholder and the rule in a sentence. Add an entry and put it in COUNTRIES; the menu, the formatting, the checks and the stored form all read from it. The numbers shown are in ranges set aside for fiction.

The field keeps only digits, lays them into the country's pattern and shows a separator only once a digit follows it, so nothing dangles. After each change the caret goes back to the same digit, so editing in the middle works, and backspacing over a separator removes the digit before it. Pasting a number that begins with a plus and a dial code (+44 7700 900123) picks that country and fills the national digits, adding the trunk 0 where the country uses one. Changing the country keeps the digits and reformats them.

The count is checked when you leave the field or press Save, and then again as you type. The check is the country's digit count and, where there is one, the leading trunk digit. That is a first line, not a validator: it cannot know a number is in service or assigned. For a real app, normalise and validate on the server with a phone library such as libphonenumber, and confirm ownership with a code.

It shows what would be kept: the international form for people, the same number as digits with a plus (the E.164 form that dialling APIs expect, without the trunk 0) and the country. It stays blank until the count is right. Nothing is saved or verified, and no code is sent: the status line says so. Verifying a number is its own step, with its own screen.

The number has a real label and is described by its rule; the country menu is named Country code. The input is type="tel" with inputmode="tel" and autocomplete="tel-national", so phones show a dialling keypad and browsers can fill it, and it stays left-to-right inside a right-to-left page, as phone numbers do. The closed menu shows the tile and the dial code; each row in the open list also names the country.

Keep the country code and the national digits as two values, or the stored E.164 string as one. With react-hook-form, use Controller for the number and for the country, move the digit-count rule into a resolver and use mode: "onBlur" for the same timing; shouldFocusError puts focus on the number after a refused submit. With TanStack Form, validate the number with onBlur and onChange validators and read the errors for the line under the field.