Phone Input
International phone number input with country selector, auto-formatting, and validation for 70+ countries
Basic Usage
Phone Number
No countries found
International format with country code
<neura::field>
<neura::label>Phone Number</neura::label>
<neura::phone-input name="phone" />
</neura::field>Livewire Integration
Your Phone
No countries found
Value:
null
<neura::phone-input wire:model.live="phone" />
// Component
public string $phone = '';Default Country
France
No countries found
Germany
No countries found
Japan
No countries found
<neura::phone-input defaultCountry="FR" />
<neura::phone-input defaultCountry="DE" />
<neura::phone-input defaultCountry="JP" />Preferred Countries
Show frequently used countries at the top of the dropdown
European Countries
No countries found
<neura::phone-input
defaultCountry="FR"
:preferredCountries="['FR', 'DE', 'IT', 'ES', 'BE']"
/>Filter Countries
Restrict available countries with
onlyCountries or excludeCountries
Only EU Countries
No countries found
Exclude Countries
No countries found
<neura::phone-input :onlyCountries="['FR', 'DE', 'IT']" />
<neura::phone-input :excludeCountries="['RU', 'CN']" />Display Options
Flag + Dial Code
No countries found
Flag Only
No countries found
Dial Code Only
No countries found
<neura::phone-input />
<neura::phone-input :showDialCode="false" />
<neura::phone-input :showFlags="false" />Sizes
Small
No countries found
Medium (Default)
No countries found
Large
No countries found
<neura::phone-input size="sm" />
<neura::phone-input size="md" />
<neura::phone-input size="lg" />Validation
Built-in validation with country-specific patterns
Phone with Validation
No countries found
Enter a number and blur to see validation
<neura::phone-input :validateOnBlur="true" />
<neura::phone-input :autoFormat="false" />States
Disabled
No countries found
Invalid
No countries found
<neura::phone-input :disabled="true" />
<neura::phone-input :invalid="true" />Supported Countries
Validation patterns and formatting for 70+ countries
🇺🇸 US
🇨🇦 CA
🇲🇽 MX
🇬🇧 GB
🇫🇷 FR
🇩🇪 DE
🇮🇹 IT
🇪🇸 ES
🇵🇹 PT
🇳🇱 NL
🇧🇪 BE
🇨🇭 CH
🇦🇹 AT
🇵🇱 PL
🇸🇪 SE
🇳🇴 NO
🇩🇰 DK
🇫🇮 FI
🇮🇪 IE
🇬🇷 GR
🇨🇿 CZ
🇷🇴 RO
🇭🇺 HU
🇺🇦 UA
🇷🇺 RU
🇨🇳 CN
🇯🇵 JP
🇰🇷 KR
🇮🇳 IN
🇵🇰 PK
🇧🇩 BD
🇮🇩 ID
🇲🇾 MY
🇸🇬 SG
🇹🇭 TH
🇻🇳 VN
🇵🇭 PH
🇭🇰 HK
🇹🇼 TW
🇦🇪 AE
🇸🇦 SA
🇮🇱 IL
🇹🇷 TR
🇶🇦 QA
🇰🇼 KW
🇴🇲 OM
🇧🇭 BH
🇯🇴 JO
🇱🇧 LB
🇪🇬 EG
🇿🇦 ZA
🇳🇬 NG
🇰🇪 KE
🇲🇦 MA
🇹🇳 TN
🇩🇿 DZ
🇬🇭 GH
🇦🇺 AU
🇳🇿 NZ
🇧🇷 BR
🇦🇷 AR
🇨🇱 CL
🇨🇴 CO
🇵🇪 PE
🇻🇪 VE
🇪🇨 EC
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | null | Form field name |
| defaultCountry | string | 'US' | ISO 3166-1 alpha-2 code |
| preferredCountries | array | ['US', 'GB', 'FR', 'DE', 'CA'] | Countries at top of dropdown |
| onlyCountries | array | null | Whitelist of country codes |
| excludeCountries | array | null | Blacklist of country codes |
| showFlags | boolean | true | Show country flags |
| showDialCode | boolean | true | Show dial code |
| searchable | boolean | true | Enable country search |
| autoFormat | boolean | true | Auto-format as user types |
| validateOnBlur | boolean | true | Validate on blur |
| size | string | 'md' | sm, md, lg |
| rounded | string | 'lg' | none, sm, md, lg, xl, full |
| disabled | boolean | false | Disable input |
| invalid | boolean | false | Show invalid state |
JavaScript API
Access methods programmatically through Alpine.js
// Get full international number
phoneInput.getFullNumber(); // "+33612345678"
// Validate number
phoneInput.isValidNumber(); // true/false
// Get country code
phoneInput.getCountryCode(); // "FR"
// Get dial code
phoneInput.getDialCode(); // "33"
// Get national number (digits only)
phoneInput.getNationalNumber(); // "612345678"