Community
Trick
Brazilian Phone Number field
Dec 5, 2022
Form Builder
Alpine.js

#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\''])