Brazilian CPF CNPJ fields

Trick Forms Alpine.js
Leandro Ferreira avatar Author: Leandro Ferreira
Published: Mar 01, 2023

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