Phone Number Input
Advanced international phone number input with country selection, automatic country-based formatting, and real-time validation
Pro Features
Unlock advanced capabilities with the Pro version
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
We only use this number to confirm your order.
International Phone Input
Phone input with a built-in list of international countries and dial codes
- • 20 built-in countries (extendable via the countries prop)
- • Automatic country-based formatting
- • Real-time validation with visual feedback
- • International format display (+dial code)
Custom Validation
Disable built-in validation, run your own rules, and feed the result back through the component's error surface
Between 7 and 15 digits.
Form Integration
Complete form integration with the phone number input object value
Contact Information
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
Single-country field — no country selector, string value.