Brazilian Phone Number field

Trick Forms Alpine.js
Leandro Ferreira avatar Author: Leandro Ferreira
Published: Dec 05, 2022

#Filament 3.x

#PhoneNumber Field

use Filament\Support\RawJs;

TextInput::make('phone_number')
    ->mask(RawJs::make(<<<'JS'
        $input.length >= 14 ? '(99)99999-9999' : '(99)9999-9999'
    JS))

#Filament 2.x

Go to AppServiceProvider at app\Providers\AppServiceProvider.php and add the following:

use Filament\Facades\Filament;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Filament::registerScripts([
        'https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js',
    ], true);
}

#PhoneNumber Field

TextInput::make('phone_number')
    ->extraAlpineAttributes(['x-mask:dynamic' => '$input.length >=14 ? \'(99)99999-9999\' : \'(99)9999-9999\''])