PHPackages hanyfreestyle/filament-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. hanyfreestyle/filament-phone-input ActiveLibrary[Utility & Helpers](/categories/utility) hanyfreestyle/filament-phone-input ================================== A phone input component for Laravel Filament v1.0.4(11mo ago)348MITPHPPHP ^8.1 Since Jun 8Pushed 11mo agoCompare [ Source](https://github.com/hanyfreestyle/filament-phone-input)[ Packagist](https://packagist.org/packages/hanyfreestyle/filament-phone-input)[ Docs](https://github.com/hanyfreestyle/filament-phone-input)[ RSS](/packages/hanyfreestyle-filament-phone-input/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (14)Versions (6)Used By (0) Filament Phone Input ==================== [](#filament-phone-input) [![Filament Phone Input](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/input.png)](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/input.png) [![](https://camo.githubusercontent.com/4a98123f3416c1e91b1616838d42e4bd5231f0a31c00b024a4d56168f22c1603/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c61726176656c2d2532334646324432302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/ysfkaya/filament-phone-input)[![GitHub Tests Action Status](https://camo.githubusercontent.com/d7840354e3efdd9333ae3b300cce08e70c435158ed44c7444706d741b3f525da/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7973666b6179612f66696c616d656e742d70686f6e652d696e7075742f72756e2d74657374732e796d6c3f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6162656c3d5445535453)](https://github.com/ysfkaya/filament-phone-input/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/966416a19f3e03af0f474a4264859ea9d1269d00eb73e0a0e11b0bd23c6aa09e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7973666b6179612f66696c616d656e742d70686f6e652d696e7075742e7376673f636f6c6f723d72676228323439253230313135253230323229267374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/ysfkaya/filament-phone-input/stats)[![](https://camo.githubusercontent.com/859a926bcc7d5445ed58c16f9beec86506608f302a959fe6cbe852b34651e546/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7973666b6179612f66696c616d656e742d70686f6e652d696e7075743f7374796c653d666f722d7468652d6261646765266c6f676f3d7061636b6167697374266c6162656c3d56657273696f6e)](https://packagist.org/packages/ysfkaya/filament-phone-input)[![Filament Version](https://camo.githubusercontent.com/691f184aa3f1f10857e451b22acc81e75f90895fbd4e0862478977f84e15f675/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f66696c616d656e742d332d7267622832333525323036382532303530293f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c)](https://filamentphp.com/)[![PHP Version](https://camo.githubusercontent.com/b5f4a2267503c85777cc0ceac9a653bcd68b835036852ee633a553906b86b1ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d5e382e312d726762283234392532303131352532303232293f7374796c653d666f722d7468652d6261646765266c6f676f3d706870)](#) Table of Contents ----------------- [](#table-of-contents) - [Introduction](#introduction) - [Installation](#installation) - [Quick Preview](#quick-preview) - [Usage](#usage) - [Separate Country Code](#separate-country-code) - [Default Country](#default-country) - [Validation](#validation) - [Display Number Format](#display-number-format) - [Input Number Format](#input-number-format) - [Focus Input Type](#focus-input-type) - [Disallow Dropdown](#disallow-dropdown) - [Hide Flags](#hide-flags) - [Show Fullscreen Popup](#show-fullscreen-popup) - [Auto Placeholder](#auto-placeholder) - [Custom Container](#custom-container) - [Exclude Countries](#exclude-countries) - [Initial Country](#initial-country) - [Only Countries](#only-countries) - [Format On Display](#format-on-display) - [Geo Ip Lookup](#geo-ip-lookup) - [Placeholder Number Type](#placeholder-number-type) - [Country Order](#country-order) - [Country Search](#country-search) - [Strict Mode](#strict-mode) - [Cookie Name](#cookie-name) - [Locale](#locale) - [i18n](#i18n) - [Format as You Type](#format-as-you-type) - [Using the PhoneInput outside of Filament](#using-the-phoneinput-outside-of-filament) - [More](#more) - [Troubleshooting](#troubleshooting) - [Propaganistas\\LaravelPhone\\Exceptions\\NumberParseException error](#propaganistaslaravelphoneexceptionsnumberparseexception-error) - [Upgrade From 2.x](#upgrade-from-2x) - [Deprecated](#deprecated) - [Testing](#testing) - [Changelog](#changelog) - [Credits](#credits) - [License](#license) Introduction ------------ [](#introduction) This package provides a phone input component for [Laravel Filament](https://filamentphp.com/). It uses [International Telephone Input](https://github.com/jackocnr/intl-tel-input) to provide a dropdown of countries and flags. This package also includes with [Laravel Phone](https://github.com/propaganistas/laravel-phone) package. You can use all the methods of the Laravel Phone package. Note For **Filament 2.x** use **[1.x](https://github.com/ysfkaya/filament-phone-input/tree/1.x)** branch Installation ------------ [](#installation) You can install the package via composer: ``` composer require hanyfreestyle/filament-phone-input ``` Publish the assets: ``` php artisan filament:assets php artisan filament-phone-input:install ``` Quick Preview ------------- [](#quick-preview) ``` PhoneInput::make(string $name) ->countryStatePath(string | Closure $statePath, bool $isStatePathAbsolute) ->validateFor(string | array $country = 'AUTO', int | array | null $type = null, bool $lenient = false) ->defaultCountry(string $value) ->ipLookup(Closure $callback) ->disableLookup() ->enableIpLookup(bool | Closure $value = true) ->inputNumberFormat(PhoneInputNumberType | Closure $format) ->displayNumberFormat(PhoneInputNumberType | Closure $format) ->focusNumberFormat(PhoneInputNumberType | Closure $format) ->placeholderNumberType(PhoneInputNumberType | Closure $format) ->disallowDropdown() ->allowDropdown(bool | Closure $value = true) ->autoPlaceholder(string $value = 'polite') ->containerClass(string | Closure $value) ->countryOrder(array | Closure | null $value) ->countrySearch(bool | Closure $value = true) ->customPlaceholder(string | RawJs | Closure | null $value) ->dropdownContainer(string | null | Closure $value) ->excludeCountries(array | Closure $value) ->fixDropdownWidth(bool | Closure $value = true) ->formatAsYouType(bool | Closure $value = true) ->formatOnDisplay(bool | Closure $value = true) ->i18n(array | Closure $value) ->initialCountry(string | Closure $value) ->nationalMode(bool | Closure $value = true) ->onlyCountries(array | Closure $value) ->showFlags(bool | Closure $value = true) ->separateDialCode(bool | Closure $value = true) ->useFullscreenPopup(bool | Closure $value = true) ->strictMode(bool | Closure $value = true) ->cookieName(string | Closure $value) ->locale(string | Closure $value) ->customOptions(array | Closure $value) ``` Usage ----- [](#usage) ``` use Filament\Forms; use Filament\Forms\Form; use Filament\Tables; use Filament\Tables\Table; use Filament\Infolists; use Filament\Infolists\Infolist; use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput; use Ysfkaya\FilamentPhoneInput\Tables\PhoneColumn; use Ysfkaya\FilamentPhoneInput\Infolists\PhoneEntry; use Ysfkaya\FilamentPhoneInput\PhoneInputNumberType; public static function infolists(Infolist $infolist): Infolist { return $infolist ->columns([ Infolists\Components\TextEntry::make('name'), Tables\Columns\TextColumn::make('email'), PhoneEntry::make('phone')->displayFormat(PhoneInputNumberType::NATIONAL), ]); } public static function form(Form $form): Form { return $form ->schema([ Forms\Components\TextInput::make('name') ->required(), Forms\Components\TextInput::make('email') ->required() ->email() ->unique(ignoreRecord: true), PhoneInput::make('phone'), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\Columns\TextColumn::make('name') ->sortable() ->searchable(), Tables\Columns\TextColumn::make('email') ->sortable() ->searchable(), PhoneColumn::make('phone')->displayFormat(PhoneInputNumberType::NATIONAL) ]); } ``` #### Separate Country Code [](#separate-country-code) --- Sometimes you may want to save the country code and the phone number in different columns. You can use the `countryStatePath` method to do that. ``` PhoneInput::make('phone') ->countryStatePath('phone_country') ``` Table column: ``` PhoneColumn::make('phone') ->countryColumn('phone_country') ``` Infolist entry: ``` PhoneEntry::make('phone') ->countryColumn('phone_country') ``` When you use the `countryStatePath` method, the country code will be saved to the `phone_country` column and the phone number will be saved to the `phone` column. #### Default Country [](#default-country) --- The default country value is will be used while parsing the phone number. If you can getting the `Number requires a country to be specified.` or `Number does not match the provided country` error, you should set the default country. ``` PhoneInput::make('phone') ->defaultCountry('US'), ``` Note I think the main source of this problem is that there is no area code in the phone number previously recorded in your database. To fix this, `libphonenumber` expects a default phone number from us. Unfortunately, there is no ability to guess the country by phone number yet. #### Validation [](#validation) --- You may validate the phone number by using the `validateFor` method: ``` PhoneInput::make('phone') ->validateFor( country: 'TR' | ['US', 'GB'], // default: 'AUTO' type: libPhoneNumberType::MOBILE | libPhoneNumberType::FIXED_LINE, // default: null lenient: true, // default: false ), ``` Warning Add an extra translation to your `validation.php` file. You can find more information about the validation [here](https://github.com/Propaganistas/Laravel-Phone#validation) #### Display Number Format [](#display-number-format) --- You may set the display format of the phone number by passing a format string to the `displayNumberFormat` method. The default format is `NATIONAL`. That means the phone number will be displayed in the format of the selected country. > Available formats are; - PhoneInputNumberType::E164 - PhoneInputNumberType::INTERNATIONAL - PhoneInputNumberType::NATIONAL - PhoneInputNumberType::RFC3966 ``` PhoneInput::make('phone') ->displayNumberFormat(PhoneInputNumberType::E164), ``` [![Filament Phone Input](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/display-number-format.png)](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/display-number-format.png) #### Input Number Format [](#input-number-format) --- You may set the input value type by passing a type string to the `inputNumberFormat` method. The default type is `E164`. That means the phone number will be saved in the format of the selected country to the **database**. ``` PhoneInput::make('phone') ->inputNumberFormat(PhoneInputNumberType::NATIONAL), ``` #### Focus Input Type [](#focus-input-type) --- You may set the focus input type by passing a type string to the `focusNumberFormat` method. The default value is `false`. ``` PhoneInput::make('phone') ->focusNumberFormat(PhoneInputNumberType::E164), ``` [![Filament Phone Input](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/focus-input-type.gif)](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/focus-input-type.gif) #### Disallow Dropdown [](#disallow-dropdown) --- You may disable the dropdown by using the `disallowDropdown` method: ``` PhoneInput::make('phone') ->disallowDropdown(), ``` [![Filament Phone Input](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/disallowed-dropdown.png)](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/disallowed-dropdown.png) #### Hide Flags [](#hide-flags) --- If you want to hide the flags, you may use the `showFlags` method: ``` PhoneInput::make('phone') ->showFlags(false), ``` Warning Must be used in combination with `separateDialCode` option, or with `disallowDropdown` #### Show Fullscreen Popup [](#show-fullscreen-popup) --- If you want to show the fullscreen popup on mobile devices, you may use the `useFullscreenPopup` method: ``` PhoneInput::make('phone') ->useFullscreenPopup(), ``` #### Auto Placeholder [](#auto-placeholder) --- You may set the auto placeholder type by using the `autoPlaceholder` method: ``` PhoneInput::make('phone') ->autoPlaceholder('aggressive'), // default is 'polite' ``` #### Custom Container [](#custom-container) --- You may set the additional classes to add to the parent div by using the `customContainer` method: ``` PhoneInput::make('phone') ->customContainer('w-full'), ``` #### Exclude Countries [](#exclude-countries) --- You may set the exclude countries by using the `excludeCountries` method: ``` PhoneInput::make('phone') ->excludeCountries(['us', 'gb']), ``` #### Initial Country [](#initial-country) --- You may set the initial country by using the `initialCountry` method: ``` PhoneInput::make('phone') ->initialCountry('us'), ``` #### Only Countries [](#only-countries) --- You may set the only countries by using the `onlyCountries` method: ``` PhoneInput::make('phone') ->onlyCountries(['tr','us', 'gb']), ``` [![Filament Phone Input](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/only-countries.png)](https://raw.githubusercontent.com/ysfkaya/filament-phone-input/main/screenshots/only-countries.png) #### Format On Display [](#format-on-display) You may set the format on display by using the `formatOnDisplay` method: ``` PhoneInput::make('phone') ->formatOnDisplay(false), ``` #### Geo Ip Lookup [](#geo-ip-lookup) --- In default, the package performs a geoIp lookup to set the initial country while mounting the component. To disable this feature, you may use the `disableLookup` method: ``` PhoneInput::make('phone') ->disableLookup(), ``` You may set the geoIp lookup by using the `geoIpLookup` method: ``` PhoneInput::make('phone') ->ipLookup(function () { return rescue(fn () => Http::get('https://ipinfo.io/json')->json('country'), app()->getLocale(), report: false); }) ``` #### Placeholder Number Type [](#placeholder-number-type) --- You may set the placeholder number type by using the `placeholderNumberType` method: ``` PhoneInput::make('phone') ->placeholderNumberType('FIXED_LINE'), ``` #### Country Order [](#country-order) --- You may set the country order by using the `countryOrder` method: ``` PhoneInput::make('phone') ->countryOrder(['us', 'gb', 'tr']), ``` #### Country Search [](#country-search) --- By default, the country search mode is set to active. You can disable it by using the `countrySearch` method: ``` PhoneInput::make('phone') ->countrySearch(false), ``` #### Strict Mode [](#strict-mode) --- As the user types in the input, ignore any irrelevant characters. You can find more information about the strict mode in the [intl-tel-input](https://github.com/jackocnr/intl-tel-input#strictmode) documentation. ``` PhoneInput::make('phone') ->strictMode(), ``` #### Cookie Name [](#cookie-name) --- When use the ip lookup feature, the package stores the country code in the cookie. The default cookie name is `intlTelInputSelectedCountry`. You can change it by using the `cookieName` method: ``` PhoneInput::make('phone') ->cookieName('myCookieName'), ``` #### Locale [](#locale) --- Default locale is coming from the `app()->getLocale()`. You can change it by using the `locale` method: ``` PhoneInput::make('phone') ->locale('en'), ``` #### i18n [](#i18n) --- You can configure the localization of the component by using the `i18n` method. See the [intl-tel-input](https://github.com/jackocnr/intl-tel-input#i18n) for more information: ``` PhoneInput::make('phone') ->i18n([ // Country names 'fr' => "Frankreich", 'de' => "Deutschland", 'es' => "Spanien", 'it' => "Italien", 'ch' => "Schweiz", 'nl' => "Niederlande", 'at' => "Österreich", 'dk' => "Dänemark", // Other plugin text "selectedCountryAriaLabel" =>'Ausgewähltes Land', "countryListAriaLabel" =>'Liste der Länder', "searchPlaceholder" =>'Suchen', ]), ``` #### Format as You Type [](#format-as-you-type) --- Automatically format the number as the user types. You can disable it by using the `formatAsYouType` method: ``` PhoneInput::make('phone') ->formatAsYouType(false), ``` #### Using the `PhoneInput` outside of Filament [](#using-the-phoneinput-outside-of-filament) A livewire component: ```