PHPackages stojankukrika/laravel-tel-input - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. stojankukrika/laravel-tel-input ActiveLibrary[Templating & Views](/categories/templating) stojankukrika/laravel-tel-input =============================== Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin. 1.0.0(3mo ago)01MITJavaScriptPHP ^7.4|^8.0|^8.1|^8.2|^8.3|^8.4|^8.5 Since Jan 28Pushed 3mo agoCompare [ Source](https://github.com/stojankukrika/laravel-tel-input)[ Packagist](https://packagist.org/packages/stojankukrika/laravel-tel-input)[ Docs](https://github.com/stojankukrika/laravel-tel-input)[ RSS](/packages/stojankukrika-laravel-tel-input/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (3)Versions (2)Used By (0) Laravel Telephone Input ======================= [](#laravel-telephone-input) Laravel Telephone Input component for Blade and Livewire based on the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. [![Latest Version on Packagist](https://camo.githubusercontent.com/75c0ea4edfdd39146875b2d1d962295198d2730a093e0588485f792d8e404e2e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73746f6a616e6b756b72696b612f6c61726176656c2d74656c2d696e7075742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/stojankukrika/laravel-tel-input)[![Total Downloads](https://camo.githubusercontent.com/e97ee8b28aed86d7d478c525c9f72fbd82078c54d8f0fdcc9d83bc42bba7eb9f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f73746f6a616e6b756b72696b612f6c61726176656c2d74656c2d696e7075742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/stojankukrika/laravel-tel-input)[![GitHub Actions](https://github.com/stojankukrika/laravel-tel-input/actions/workflows/main.yml/badge.svg)](https://github.com/stojankukrika/laravel-tel-input/actions/workflows/main.yml/badge.svg) ### DEMO PREVIEW [](#demo-preview) 1. Simple Usage Demo [![preview](https://github.com/stojankukrika/laravel-tel-input/raw/main/demo.gif)](https://github.com/stojankukrika/laravel-tel-input/raw/main/demo.gif) 2. Country Sync Demo [![preview](https://github.com/stojankukrika/laravel-tel-input/raw/main/demo2.gif)](https://github.com/stojankukrika/laravel-tel-input/raw/main/demo2.gif) Table of Contents ----------------- [](#table-of-contents) - [Laravel Telephone Input](#laravel-telephone-input) - [DEMO PREVIEW](#demo-preview) - [Table of Contents](#table-of-contents) - [Installation](#installation) - [Directives](#directives) - [Requirements](#requirements) - [Core Dependencies](#core-dependencies) - [Utilities Script](#utilities-script) - [Configuration](#configuration) - [Usage](#usage)- [Basic usage](#basic-usage)- [Add hidden phone-country-input](#add-hidden-phone-country-input)- [Usage with Livewire 2](#usage-with-livewire-2)- [Usage with Livewire 3](#usage-with-livewire-3)- [Sync tel-input wih a country dropdown](#sync-tel-input-wih-a-country-dropdown)- [Event Listener](#event-listener) - [Props / Attributes](#props--attributes) - [Events](#events) - [Troubleshooting](#troubleshooting) - [Testing](#testing) - [Changelog](#changelog) - [Contributing](#contributing) - [Security](#security) - [Credits](#credits) - [License](#license) - [Laravel Package Boilerplate](#laravel-package-boilerplate) Installation ------------ [](#installation) You can install the package via composer: ``` composer require stojankukrika/laravel-tel-input ``` Directives ---------- [](#directives) Place the `@laravelTelInputStyles` in the `` section of your template before any of your other styles. Place the `@laravelTelInputScripts` directive in your template right before your closing ` ``` ##### Add hidden phone-country-input [](#add-hidden-phone-country-input) ``` ``` ##### Usage with Livewire 2 [](#usage-with-livewire-2) ``` ``` ##### Usage with Livewire 3 [](#usage-with-livewire-3) ``` ``` ##### Sync tel-input wih a country dropdown [](#sync-tel-input-wih-a-country-dropdown) ``` Phone number Address China India Nigeria United Kingdom United States ``` ##### Event Listener [](#event-listener) ``` input.addEventListener('telchange', function(e) { console.log(e.detail.valid); // Boolean: Validation status of the number console.log(e.detail.validNumber); // Returns internationally formatted number if number is valid and empty string if invalid console.log(e.detail.number); // Returns the user entered number, maybe auto-formatted internationally console.log(e.detail.country); // Returns the phone country iso2 console.log(e.detail.countryName); // Returns the phone country name console.log(e.detail.dialCode); // Returns the dial code }); ``` Props / Attributes ------------------ [](#props--attributes) NameTypeDefaultRequiredDescription**id**`String`YesUsed to identify the component in events.**name**`String``phone`YesSpecifies a name for component.**phone-country-input**`String`NoUsed to model or sync the selected phone country to another `` or `` input.**value**`String||Integer``null`NoPresets the input value. Equivalent to the `value` attribute on ``.**placeholder**`String``'Phone number'`NoEquivalent to the `placeholder` attribute on ``.**class**`String`NoEquivalent to the `class` attribute on `` input.**required**`Boolean``false`NoEquivalent to the `required` attribute on `` input.**disabled**`Boolean``false`NoEquivalent to the `disabled` attribute on `` input. Events ------ [](#events) NameListen toDescription**telchange**`telchange`Emitted when tel input value change. See [example](#event-listener) above. Troubleshooting --------------- [](#troubleshooting) - ### tel-input not rendering in Livewire after component update, refresh or change in DOM content. [](#tel-input-not-rendering-in-livewire-after-component-update-refresh-or-change-in-dom-content) The most common issues encountered by Livewire users has to do with Livewire's DOM diffing/patching system. This is the system that selectively updates elements that have been changed, added, or removed after every component update. For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide. If a tel-input fails to render after component update like opening popup/modal with a `tel-input` or switch to tab section with a form containing a `tel-input`, to fix this, dispatch a `telDOMChanged` browser event in the action that triggers/opens the popup or form tab. ``` class ContactPage extends Component { public $showQuickContactForm = false; public function toggleQuickContactForm() { $this->showQuickContactForm = !$this->showQuickContactForm; if ($this->showQuickContactForm) { $this->dispatchBrowserEvent('telDOMChanged'); // in Livewire 2 $this->dispatch('telDOMChanged'); // in Livewire 3 } } //... } ``` In some cases where the popup form contains a tel-input with pre-filled values/phone numbers from the component `mount()` and dispatching browser event is not possible from the component. Add the following javascript codes to the end of of the component blade view. ``` document.dispatchEvent(new Event('telDOMChanged')); ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Victory Osayi Airuoyuwa](https://github.com/stojankukrika) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. Laravel Package Boilerplate --------------------------- [](#laravel-package-boilerplate) This package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com). ### Health Score 37 — LowBetter than 83% of packages Maintenance80 Actively maintained with recent releases Popularity1 Limited adoption so far Community11 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 81.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 104d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/79d2b7ee98d72f99645b3c270bcffe40e8176ec39e449127de18075c8fb173bf?d=identicon)[stojankukrika](/maintainers/stojankukrika) --- Top Contributors [![victorybiz](https://avatars.githubusercontent.com/u/8276466?v=4)](https://github.com/victorybiz "victorybiz (40 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (4 commits)")[![jbajou](https://avatars.githubusercontent.com/u/9249644?v=4)](https://github.com/jbajou "jbajou (3 commits)")[![jeffwray](https://avatars.githubusercontent.com/u/164155?v=4)](https://github.com/jeffwray "jeffwray (1 commits)")[![stojankukrika](https://avatars.githubusercontent.com/u/10199584?v=4)](https://github.com/stojankukrika "stojankukrika (1 commits)") --- Tags laravelbladelivewireintl-tel-inputlaravel-livewirelaravel-bladelaravel-tel-inputtel-inputtelephone-inputinternational-telephone-inputlivewire-tel-inputstojankukrika ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/stojankukrika-laravel-tel-input/health.svg) ``` [![Health](https://phpackages.com/badges/stojankukrika-laravel-tel-input/health.svg)](https://phpackages.com/packages/stojankukrika-laravel-tel-input) ``` ### Alternatives [victorybiz/laravel-tel-input Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin. 54127.8k1](/packages/victorybiz-laravel-tel-input)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[victorybiz/laravel-simple-select Laravel Simple Select inputs component for Blade and Livewire. 13721.1k](/packages/victorybiz-laravel-simple-select)[mati365/ckeditor5-livewire CKEditor 5 integration for Laravel Livewire 413.9k](/packages/mati365-ckeditor5-livewire) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)