Laravel Tel Input Laravel Package

Getting Started

Start by confirming v2.0 compatibility with your Laravel/PHP versions, then install and publish:

composer require chapdel/laravel-tel-input
php artisan vendor:publish --tag=tel-input-config
php artisan vendor:publish --tag=tel-input-assets

Look first at config/tel-input.php, the package README, and src/View/Components / src/Rules to see the exact v2.0 component and rule names. The first practical use case is a single phone field in a form:

<x-tel-input name="phone" :value="old('phone')" />

Pair it with the package’s validation rule (check the v2.0 signature) and always keep a server-side rule as the source of truth. If you use Livewire, bind with wire:model and plan for re-initialization after DOM updates.

Implementation Patterns

• Blade component in standard forms: use the package component for country selector + national number input, then validate the submitted full international number server-side.
• Livewire integration: wrap the input in wire:ignore where necessary, sync the full number to a public property via an event or x-on:change, and reinitialize the widget after Livewire morphs the DOM.
• Validation workflow: use the package rule for format/possible-number checks, but combine it with your own normalized storage format (e.g. E.164) before persisting. Client-side intl-tel-input validation is UX only.
• Country restrictions: drive allowed countries from config rather than hard-coding them in Blade, especially for multi-tenant or locale-specific forms.
• Asset pipeline: decide early whether to use published package assets or import intl-tel-input through Vite/npm. v2.0 may expect a newer intl-tel-input version, so avoid mixing package-published JS with a separately bundled older copy.
• Multiple forms per page: initialize each field independently and avoid relying on global selectors; the package’s script may only auto-initialize once.

Gotchas and Tips

• v2.0 is a major release with sparse release notes. The changelog link is the only detail provided, so treat it as breaking until proven otherwise. Check the upgrade guide/README for changed publish tags, component names, config keys, and validation rule signatures.
• intl-tel-input major-version differences matter. Newer intl-tel-input releases split utilities and changed defaults around formatting/display. If v2.0 upgraded the underlying library, re-test number formatting, utils.js loading, and validation behavior.
• Clear config cache after publishing: php artisan config:clear and re-check config/tel-input.php if country lists or asset paths seem ignored.
• Livewire/DOM morphing can break the widget. If the country flag or formatting stops working after a Livewire update, use wire:ignore or reinitialize the intl-tel-input instance explicitly.
• Debug in the browser: inspect window.intlTelInput instances, check the network panel for the intl-tel-input utils/script, and confirm CSS/flag sprite paths resolve from your published assets.
• Extension points: publish views to customize markup, override config for country lists and asset paths, and wrap the package validation rule in your own rule if you need normalized E.164 output.
• Do not trust client-side validation alone. Always validate and normalize the submitted number server-side, especially if users can disable JavaScript.