PhoneField

Features

• Country Selection: Dropdown with all countries and their dial codes
• Flag Icons: Visual country identification with flag avatars
• Search: Quick search through countries by name or dial code
• Priority Countries: Pin frequently used countries to the top
• Keyboard Navigation: Full keyboard support with arrow keys
• Infinite Scroll: Efficient loading of large country lists
• Auto-focus: Phone input focuses after country selection

Usage Example

The component binds three values: the phone number, country code, and dial code:

<script>
  let value = $state('');        // Phone number: "5551234567"
  let countryCode = $state('');  // ISO code: "us"
  let dialCode = $state('');     // Dial code: "1"
</script>

<PhoneField
  name="phone"
  bind:value
  bind:countryCode
  bind:dialCode
/>

Priority Countries

You can pin specific countries to the top of the list for easier access:

<PhoneField
  name="phone"
  priorityCountries={['us', 'gb', 'ca', 'au']}
  bind:value
  bind:countryCode
  bind:dialCode
/>

Form Integration

The component creates two form inputs:

• name - Contains the phone number value
• dialCodeName - Contains the dial code (default: "dialCode")