Filament•12mo ago

How to use mask in TextInput

I've tried to follow the docs by using mask() and also inserting alpine mask script, but it doesnt work. Whats the correct way to set it up?

12 Replies

fikurimax•12mo ago

I've used this but still doesnt work, its even accepting alphabet

TextInput::make('phone_number')
      ->label("Phone number")
      ->tel()
      ->mask('(+9) 999-9999-9999')
      ->placeholder('(+1) 999-9999-9999')
      ->required(),

TextInput::make('phone_number')
      ->label("Phone number")
      ->tel()
      ->mask('(+9) 999-9999-9999')
      ->placeholder('(+1) 999-9999-9999')
      ->required(),

Shaung Bhone•12mo ago

remove tel(); https://alpinejs.dev/plugins/mask#x-mask

fikurimax•12mo ago

still doesn work I think there's something wrong with the installation because even using regex() or minValue for numeric text input is doesnt work

Yuut4•12mo ago

try to remove the tel() and use only the mask

Dennis Koch•12mo ago

That’s what Shaung just suggested

Yuut4•12mo ago

LOL I just read the link my bad I don't see anything wrong and in V3 it should work that way, the only thing that comes to mind that could have happened is having given the correct import or something like that

use Filament\Forms\Components\TextInput;

use Filament\Forms\Components\TextInput;

Shaung Bhone•12mo ago

It's working for me.

Yuut4•12mo ago

sometimes it can be the Textcolumn do no of the table already happened to me xD

Shaung Bhone•12mo ago

Need the details of

doesn't work

fikurimax•12mo ago

Thanks guys for responding. I've tried to removing the tel(), using mask() or even use regex(numbers only) but still accepting all characters, no masking. I also try to apply min/maxValue(10) paired with ->numeric(). but still can reach more than 10. Iam suspecting there's wrong with the installation because I also have used V3 mask before and work perfectly I'll try to delete the vendor and composer.lock

fikurimax•12mo ago

Still occurs. Idk why, even when I use maxLength(13) it still accepts characters more than that For the context, Im using Wizard in a modal action https://filamentphp.com/docs/3.x/actions/modals#using-a-wizard-as-a-modal-form

Modals - Actions - Filament

Yuut4•12mo ago

i don't know if it will help but this is what i do in v2

Forms\Components\TextInput::make('phone_number')
                                            ->required()
                                            ->dehydrated(true)
                                            ->label(__('Contact'))
                                            ->columnSpan(3)
                                            ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+351 000000000'))
                                            ->disableAutocomplete()
                                            ->placeholder(__('+000 000000000')),

Forms\Components\TextInput::make('phone_number')
                                            ->required()
                                            ->dehydrated(true)
                                            ->label(__('Contact'))
                                            ->columnSpan(3)
                                            ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+351 000000000'))
                                            ->disableAutocomplete()
                                            ->placeholder(__('+000 000000000')),

in the code I don't know what could be causing this

Gaming

Programming

How to use mask in TextInput