Community
Trick
Brazilian CPF CNPJ fields
Mar 1, 2023
Form Builder
Alpine.js

#Installation

Install the laravellegends/pt-br-validator package:

composer require laravellegends/pt-br-validator

#Filament 3.x

#CPF_CNPJ Field

use Filament\Support\RawJs;
 
TextInput::make('cpf_cnpj')
->mask(RawJs::make(<<<'JS'
$input.length > 14 ? '99.999.999/9999-99' : '999.999.999-99'
JS))
->rule('cpf_ou_cnpj')

#CPF Field

TextInput::make('cpf')
->mask('999.999.999-99')
->rule('cpf')

#CNPJ Field

TextInput::make('cnpj')
->mask('99.999.999/9999-99')
->rule('cnpj')

#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);
}

#CPF_CNPJ Field

TextInput::make('cpf_cnpj')
->extraAlpineAttributes(['x-mask:dynamic' => '$input.length >14 ? \'99.999.999/9999-99\' : \'999.999.999-99\''])
->rule('cpf_ou_cnpj')

#CPF Field

TextInput::make('cpf')
->extraAlpineAttributes(['x-mask' => '999.999.999-99'])
->rule('cpf')

#CNPJ Field

TextInput::make('cnpj')
->extraAlpineAttributes(['x-mask' => '99.999.999/9999-99'])
->rule('cnpj')