Phone Number

Tu peux utiliser la librairie int tel input. J'ai deja eu a mettre ca en place avec AlpineJS. Après avoir installé la lib dans ton projet tu peux faire quelque chose comme ceci

Code AlpineJs.

// internationalNumber.js
import intlTelInput from 'intl-tel-input'
 
export default (element) => ({
  input: element,
 
  init() {
    const phoneNumber = document.querySelector(this.input);
    let iti = intlTelInput(phoneNumber, {
      nationalMode: true,
      geoIpLookup: function(success, failure) {
        fetch('https://ipinfo.io').then(response => {
          let countryCode = (response && response.country) ? response.country : 'CM'
          success(countryCode)
        })
      },
      utilsScript: 'https://unpkg.com/[email protected]/build/js/utils.js'
    })
    let handleChange = () => {
      if (iti.isValidNumber()) {
        phoneNumber.value = iti.getNumber()
      }
    };
    phoneNumber.addEventListener('change', handleChange)
    phoneNumber.addEventListener('keyup', handleChange)
  }
})

Et dans ton fichier javascript principal ou tu charges AlpineJS tu peux faire ceci

import internationalNumber from './internationalNumber'
 
Alpine.data('internationalNumber', internationalNumber)
 
Alpine.start()

Et puis n'importe ou dans un fichier blade.php tu peux juste faire ceci

<div wire:ignore x-data="internationalNumber('#phone_number')" class="col-span-6 sm:col-span-3">
    <x-forms.group for="phone_number" :label="__('Phone Number')">
        <x-forms.input wire:model.defer="phone_number" id="phone_number" type="tel" class="pr-10" autocomplete="off" />
        @error('shop_phone_number')
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                <svg class="w-5 h-5 text-danger-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </div>
        @enderror
    </x-forms.group>
</div>

Biensur tu adaptes les composants ou tu les remplaces par tes inputs