Filament Phone Input

Filament Phone Input is a phone input component for Laravel Filament. It leverages intl-tel-input to provide a country dropdown with flags and integrates with the propaganistas/laravel-phone package, allowing you to use all its validation methods.

Note: If you are using Filament 3.x, ensure you use the 3.x branch of this package.

You can use the PhoneInput component in standard Livewire components by implementing HasForms and using InteractsWithForms. Ensure your Blade layout includes the required async-alpine and alpine-lazy-load-assets scripts in the <head>.

// Livewire Component
class Component extends Livewire implements HasForms
{
    use InteractsWithForms;

    public array $data = [];

    public function mount()
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([PhoneInput::make('phone')])
            ->statePath('data');
    }
}

If your database schema stores the country code and the phone number in different columns, use the following methods to map them:

• Forms: Use countryStatePath('column_name') on the PhoneInput component.
• Tables: Use countryColumn('column_name') on the PhoneColumn component.
• Infolists: Use countryColumn('column_name') on the PhoneEntry component.

// Form
PhoneInput::make('phone')->countryStatePath('phone_country');

// Table
PhoneColumn::make('phone')->countryColumn('phone_country');

// Infolist
PhoneEntry::make('phone')->countryColumn('phone_country');

To use this package in your Laravel Filament project, install it via Composer and then publish the necessary assets using Artisan commands.

composer require ysfkaya/filament-phone-input

php artisan filament:assets
php artisan filament-phone-input:install

Set a default country using defaultCountry('ISO_CODE'). This is highly recommended to prevent Number requires a country to be specified errors, especially when parsing previously recorded numbers that might lack area codes.

PhoneInput::make('phone')
    ->defaultCountry('US'),

The package includes an installation command that publishes necessary assets to your project. You can run the installation command to set up the package automatically.

php artisan filament-phone-input:install

The package allows fine-grained control over how phone numbers are formatted at different stages:

• displayNumberFormat(format): Sets how the number is shown to the user. Default is PhoneInputNumberType::NATIONAL. Available formats: E164, INTERNATIONAL, NATIONAL, RFC3966.
• inputNumberFormat(format): Sets the format used when saving the value to the database. Default is E164.
• focusNumberFormat(format): Sets the format used when the input field is focused. Default is false.
• formatOnDisplay(bool): Toggles whether the number is formatted when displayed. Default is true.

PhoneInput::make('phone')
    ->displayNumberFormat(PhoneInputNumberType::E164)
    ->inputNumberFormat(PhoneInputNumberType::NATIONAL)
    ->focusNumberFormat(PhoneInputNumberType::E164)
    ->formatOnDisplay(false),

You can perform validation using the validateFor method. This allows you to specify the country (or a list of allowed countries), the expected type (e.g., mobile or fixed line), and whether to use lenient parsing.

Note: You must add extra translations to your validation.php file to support these error messages. This feature relies on the Propaganistas/Laravel-Phone package.

PhoneInput::make('phone')
    ->validateFor(
        country: 'TR' | ['US', 'GB'], // default: 'AUTO'
        type: libPhoneNumberType::MOBILE | libPhoneNumberType::FIXED_LINE, // default: null
        lenient: true, // default: false
    ),

Customize which countries are available and how they are searched:

• onlyCountries(['US', 'GB']): Restricts selection to specific countries.
• excludeCountries(['US', 'GB']): Removes specific countries from the list.
• countryOrder(['us', 'gb', 'tr']): Defines a custom order for the country list.
• countrySearch(bool): Enables or disables the country search mode (default is true).
• disallowDropdown(): Disables the country dropdown entirely.

PhoneInput::make('phone')
    ->onlyCountries(['tr','us', 'gb'])
    ->countryOrder(['us', 'gb', 'tr'])
    ->countrySearch(false)
    ->disallowDropdown();

By default, the package performs a GeoIP lookup to set the initial country.

• disableLookup(): Disables the automatic GeoIP lookup.
• ipLookup(callable): Allows you to provide a custom logic for looking up the country via IP.
• cookieName('name'): Changes the name of the cookie used to store the selected country (default: intlTelInputSelectedCountry).

PhoneInput::make('phone')
    ->ipLookup(function () {
        return rescue(fn () => Http::get('https://ipinfo.io/json')->json('country'), app()->getLocale(), report: false);
    })
    ->cookieName('myCookieName');