Filament Phone Input

This package provides a phone input component for Laravel Filament. It uses International Telephone Input to provide a dropdown of countries and flags.

Installation

You can install the package via composer:

composer require ysfkaya/filament-phone-input

Usage

use Filament\Forms;
use Ysfkaya\FilamentPhoneInput\PhoneInput;

  //...
  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'),
            ]);
    }

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;

PhoneInputNumberFormat::E164
PhoneInputNumberFormat::INTERNATIONAL
PhoneInputNumberFormat::NATIONAL
PhoneInputNumberFormat::RFC3966

use Ysfkaya\FilamentPhoneInput\PhoneInputNumberType;

PhoneInput::make('phone')
    ->displayNumberFormat(PhoneInputNumberFormat::E164),

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.

use Ysfkaya\FilamentPhoneInput\PhoneInputNumberType;

PhoneInput::make('phone')
    ->inputNumberFormat(PhoneInputNumberType::NATIONAL),

You may set the focus input type by passing a type string to the focusInputType method. The default value is false.

use Ysfkaya\FilamentPhoneInput\PhoneInputFocusInputType;

PhoneInput::make('phone')
    ->focusInputType(PhoneInputFocusInputType::E164),

You may disable the dropdown by using the disallowDropdown method:

PhoneInput::make('phone')
    ->disallowDropdown(),

You may set the auto placeholder type by using the autoPlaceholder method:

PhoneInput::make('phone')
    ->autoPlaceholder('polite'), // default is 'aggressive'

You may set the additional classes to add to the parent div by using the customContainer method:

PhoneInput::make('phone')
    ->customContainer('w-full'),

You may set the custom placeholder by using the customPlaceholder method:

PhoneInput::make('phone')
    ->customPlaceholder('jsMethodName'),

And you should add a js method to your blade file like this:

window.jsMethodName = function(selectedCountryPlaceholder, selectedCountryData) {
    return 'Custom Placeholder';
}

You may set the exclude countries by using the excludeCountries method:

PhoneInput::make('phone')
    ->excludeCountries(['us', 'gb']),

You may set the initial country by using the initialCountry method:

PhoneInput::make('phone')
    ->initialCountry('us'),

You may set the only countries by using the onlyCountries method:

PhoneInput::make('phone')
    ->onlyCountries(['tr','us', 'gb']),

You may set the format on display by using the formatOnDisplay method:

PhoneInput::make('phone')
    ->formatOnDisplay(false),

You may set the geoIp lookup by using the geoIpLookup method:

PhoneInput::make('phone')
    ->geoIpLookup('jsMethodName'),

And you should add a js method to your blade file like this:

window.jsMethodName = function(callback) {
    $.get('http://ipinfo.io', function() {}, "jsonp").always(function(resp) {
        var countryCode = (resp && resp.country) ? resp.country : "";
        callback(countryCode);
    });
}

You may set the placeholder number type by using the placeholderNumberType method:

PhoneInput::make('phone')
    ->placeholderNumberType('FIXED_LINE'),

You may set the preferred countries by using the preferredCountries method:

PhoneInput::make('phone')
    ->preferredCountries(['tr','us', 'gb']),

You may set the separate dial code by using the separateDialCode method:

PhoneInput::make('phone')
    ->separateDialCode(true),

You can find the more documentation for the package here

Testing

composer test

barclaymichael/filament-phone-input

Filament Phone Input

Installation

Usage

Testing

Changelog

Credits

License