PHPackages                             mountainclans/livewire-phone-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. [Utility & Helpers](/categories/utility)
4. /
5. mountainclans/livewire-phone-input

ActiveLibrary[Utility & Helpers](/categories/utility)

mountainclans/livewire-phone-input
==================================

Phone input component for Livewire 3

1.2.2(5mo ago)039MITJavaScriptPHP ^8.2CI failing

Since Jul 3Pushed 5mo agoCompare

[ Source](https://github.com/mountainclans/livewire-phone-input)[ Packagist](https://packagist.org/packages/mountainclans/livewire-phone-input)[ Docs](https://github.com/mountainclans/livewire-phone-input)[ GitHub Sponsors]()[ RSS](/packages/mountainclans-livewire-phone-input/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (10)Dependencies (8)Versions (11)Used By (0)

Phone input component for Livewire 3
====================================

[](#phone-input-component-for-livewire-3)

Доработанная под использование с Vite версия компонента телефонного ввода

Установка
---------

[](#установка)

Установите пакет при помощи Composer:

```
composer require mountainclans/livewire-phone-input
```

Поскольку функциональность пакета основана на [пакете Intl Tel Input](https://github.com/jackocnr/intl-tel-input), установите его через npm:

```
npm install intl-tel-input --save
```

Добавьте в файл проекта `resources/js/app.js` строки

```
import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
import '../../vendor/mountainclans/livewire-phone-input/resources/js/phoneInput';
window.intlTelInput = window.intlTelInputGlobals = intlTelInput;
```

Добавьте в файл проекта `resources/js/app.css` строки:

```
@import 'intl-tel-input/build/css/intlTelInput.css';
@import '../../vendor/mountainclans/livewire-phone-input/resources/css/phoneInput.css';

```

*Обратите внимание, что для корректной стилизации в вашем проекте должен использоваться TailwindCSS.*

Добавьте в `tailwind.config.js` в секцию `content`:

```
'./vendor/mountainclans/livewire-phone-input/resources/views/**/*.blade.php'
```

Добавьте переменную с параметрами конфигурации в подвал:

```

    window.laravelTelInputConfig = {
        "allowDropdown": true,
        "autoHideDialCode": true,
        "autoPlaceholder": "polite",
        "customContainer": "",
        "customPlaceholder": null,
        "dropdownContainer": null,
        "excludeCountries": [],
        "formatOnDisplay": true,
        "geoIpLookup": "ipinfo",
        "initialCountry": '{{ $phonePreferredCountry }}',
        "localizedCountries": [],
        "nationalMode": true,
        "onlyCountries": [],
        "placeholderNumberType": "MOBILE",
        "preferredCountries": ["ES", "DE", "RU", "US", "GB", "KZ"],
        "separateDialCode": false,
        "utilsScript": "./utils.js"
    }

```

**Обязательно переопределите** `$phonePreferredCountry`!

Пример функции для получения этой переменной:

```
public function preferredPhoneInputLocale(): string
{
   return match(app()->currentLocale()) {
       'ru' => 'RU',
       'kk' => 'KZ',
       default => 'GB',
   };
}
```

---

Использование
-------------

[](#использование)

```

```

**Обратите внимание**, что для записи кода страны в родительском компоненте должно присутствовать поле `phoneCountry` (или любое другое, которые вы передадите в prop `phone-country-input`).

Используйте `prop` `:default-classes="false"`, если Вы хотите полностью переопределить внешний вид `input`.

---

Если Вам необходимо обновить рендеринг компонента `phone-input` при действиях на бекэнде, воспользуйтесь трейтом `RefreshPhoneInputs`:

```
class YourLivewireComponent extends Component
{
    use MountainClans\LivewirePhoneInput\Traits\RefreshPhoneInputs;

    // к примеру, после динамического появления телефонного поля в форме
    public function updatedAddPhone(): void
    {
        $this->refreshPhoneInputs();
    }
}
```

Авторы
------

[](#авторы)

- [Vladimir Bazhenov](https://github.com/mountainclans)
- [Victory Osayi](https://github.com/victorybiz/laravel-tel-input)
- [Jack O'Connor](https://github.com/jackocnr/intl-tel-input)
- [All Contributors](../../contributors)

Лицензия
--------

[](#лицензия)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance71

Regular maintenance activity

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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

Every ~21 days

Recently: every ~6 days

Total

10

Last Release

163d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d363ad351540061c6f38586e772159863da3cfde29cfbd03c9ff5ba8b6b906aa?d=identicon)[VladimirBazhenov](/maintainers/VladimirBazhenov)

---

Top Contributors

[![VladimirBazhenov](https://avatars.githubusercontent.com/u/44696748?v=4)](https://github.com/VladimirBazhenov "VladimirBazhenov (1 commits)")

---

Tags

laravelMountain Clanslivewire-phone-input

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/mountainclans-livewire-phone-input/health.svg)

```
[![Health](https://phpackages.com/badges/mountainclans-livewire-phone-input/health.svg)](https://phpackages.com/packages/mountainclans-livewire-phone-input)
```

###  Alternatives

[spatie/laravel-data

Create unified resources and data transfer objects

1.8k33.0M880](/packages/spatie-laravel-data)[spatie/laravel-pdf

Create PDFs in Laravel apps

1.0k4.3M42](/packages/spatie-laravel-pdf)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

328482.0k25](/packages/codewithdennis-filament-select-tree)[nativephp/desktop

NativePHP for Desktop

38133.6k8](/packages/nativephp-desktop)[worksome/exchange

Check Exchange Rates for any currency in Laravel.

124581.3k](/packages/worksome-exchange)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3913.7k](/packages/rawilk-profile-filament-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)