Phone Number Input
Advanced international phone number input with country selection, automatic country-based formatting, and real-time validation
Pro features
What the Pro version adds to this component.
International Support
Built-in country list with dial codes and per-country format masks
Keyboard Typeahead
Radix Select typeahead lets users jump to a country by typing
Format-Based Validation
Validates the number length against the selected country's format
Auto Formatting
Automatically formats the number as you type using the country mask
Flag Integration
Country flag emojis in the selector trigger and dropdown
Highly Configurable
Toggle flags, dial codes, validation, formatting and the international preview
Installation
Install via CLI
npx @moontra/moonui-cli add phone-number-inputUsage
Examples
Label, Required and Error
Let the component own the label and the message surface: label renders a bound <label htmlFor>, required adds native required + aria-required + an asterisk, and error links a role='alert' message through aria-invalid + aria-describedby
International Phone Input
Uncontrolled usage: the component keeps the selected country and number itself, and defaultCountry decides where it starts. Pass value only when you need to own that state
Custom Validation
Disable built-in validation, run your own rules, and feed the result back through the component's error surface
Form Integration
Complete form integration with the phone number input object value
Simple Variant
MoonUIPhoneNumberInputSimple is a single-country field with no country selector: the value is a plain formatted string and the type base is <input>, so ref and rest props land on the real input