Phone Input React component

Phone Input is a phone number field with a country picker in front of it. Picking a country shows its flag and calling code, the number formats itself with that country's spacing as you type, and a leading trunk 0 typed out of habit is dropped. Pasting a full international number starting with + switches to the matching country, and the field checks the length once you leave it.

The value is always in E.164 format, such as "+14155550123", through value or defaultValue, and onValueChange also passes the country, the national digits and isValid. country or defaultCountry (US by default) set the country, countries limits the list and preferredCountries pins some to the top. label, placeholder and helperText set the texts, errorText forces an error, invalidText sets the length message, and name adds a hidden input for plain form posts. The country list is exported as PHONE_COUNTRIES.

Use Phone Input in sign-up, checkout, booking and contact forms. The value is always E.164 (for example "+905321234567"), the format SMS, WhatsApp and calling APIs expect, so you can store and send it without reformatting.

The built-in check only looks at the number's length for the chosen country. It catches typos and missing digits while typing; if you need to know that a number really exists or is a mobile line, verify it on your server with a library such as libphonenumber or with an SMS code.