Phone field with intl-tel-input

[mortenthogersen]

Implement the intl-tel-input package (https://github.com/jackocnr/intl-tel-input) to create a full-featured phone input component that would:

• Add a country code dropdown with flags
• Auto-format numbers based on selected country
• Provide built-in validation
• Support for different phone number formats

[amitsamtani]

Would love to upvote this multiple times.

[kyranb]

Has anyone had a crack at implementing their own telephone number component?

[joffreypersia]

Hi guys,

I created this as a start. I am now deporting all the array as config files, I'll work on the validation after.
It is needed : https://alpinejs.dev/plugins/mask

It might interests you @kyranb , @amitsamtani , @mortenthogersen

<flux:input.group
    x-data="{
        countryCode: '+33',
        masks: {
            '+33': '99 99 99 99 99',
            '+1': '(999) 999-9999',
            '+44': '99 9999 9999',
            '+49': '9999 9999999'
        },
        placeholders: {
            '+33': '01 23 45 67 89',
            '+1': '(555) 123-4567',
            '+44': '20 1234 5678',
            '+49': '1234 5678901'
        },
        getPhoneMask(input) {
            return this.masks[this.countryCode] || '999999999999';
        }
    }"
    class="flex items-center"
>
    <flux:select
        x-model="countryCode"
        class="mr-0 max-w-fit w-fit"
        wire:model="form.country_code"
    >
        <flux:select.option value="+33">+33 (FR)</flux:select.option>
        <flux:select.option value="+1">+1 (US)</flux:select.option>
        <flux:select.option value="+44">+44 (UK)</flux:select.option>
        <flux:select.option value="+49">+49 (DE)</flux:select.option>
    </flux:select>

    <flux:input
        wire:model="form.phone"
        name="form.phone"
        type="tel"
        required
        x-mask:dynamic="getPhoneMask($input)"
        x-bind:placeholder="placeholders[countryCode] || 'Enter number'"
        class="w-full"
    />
</flux:input.group>

Maybe @joshhanley can be interested for docs..?

Best

[kyranb]

Thanks for sharing!

[Uhasith]

Any News about this feature request ?

[jdc1898]

I've put something together. There is a CSS dependency in the code for the flags.

phone-input-demo.webm

[tom-rassaerts]

Looks very good! Any chance that you'll create a pull request for this?

[jdc1898]

I have it ready to go. I'll just don't know which version it would go in.

  {{-- Basic usage --}}                                                                                                                                                                              
  <flux:input.phone wire:model="phone" />
                                                                                                                                                                                                     
  {{-- With specific default country --}}                                                                                                                                                          
  <flux:input.phone wire:model="phone" country="gb" />

  {{-- With preferred countries shown at top of dropdown --}}
  <flux:input.phone wire:model="phone" preferred="us,gb,ca" />

  {{-- Restrict to specific countries only --}}
  <flux:input.phone wire:model="phone" countries="us,ca,mx" />

  {{-- With placeholder, size, and variant --}}
  <flux:input.phone
      wire:model="phone"
      placeholder="(555) 123-4567"
      size="sm"
      variant="filled"
  />

[kyranb]

@joshhanley or @ganyicz Would you be able to help @jdc1898 with getting this merged in?

[Uhasith]

Awesome Work ❤️

[kresnasatya]

Hey! I love this! In my company, we heavily use the Flux UI (we purchased the Flux Pro too. 😉). Would love to have this (flux input phone field with country code) and use it in Flux way instead of custom hack. Cc @calebporzio 🙏🏻

[ibalat]

Hi, when it will be merged? I'm waiting to use it

[tom-rassaerts]

Caleb stated in his update e-mail that this is probably the next feature they're going to be working on, so I guess there will be an official release in a few weeks :)

[tomhorvat]

I hope this gets the love, now the flags are here @calebporzio 🤔