Downloads
Stars
Version
filament-otp-input
is a package built for Filament that provides a One-Time Passcode (OTP) input form component that offers you the ability to add the following features:
You can install the package via composer:
composer require hasan-ahani/filament-otp-input
Inside a form schema, you can use the Otp input like this:
use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;
public function form(Form $form): Form
{
return $form
->schema([
// ...
OtpInput::make('otp')
->label('Otp'),
]);
}
The code above will render a otp input inside the form.
If the number of entries you want is less or more than the default 4 numbers, you can change it according to the example below
use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;
public function form(Form $form): Form
{
return $form
->schema([
// ...
OtpInput::make('otp')
->numberInput(6)
->label('Otp'),
]);
}
The above code creates 6 inputs for entering the OTP code.
If you need to receive the code after entering it completely, proceed as in the example below
use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;
public function form(Form $form): Form
{
return $form
->schema([
// ...
OtpInput::make('otp')
->numberInput(8)
->afterStateUpdated(function (string $state){
dd($state);
// submit form or save record
})
->label('Otp'),
]);
}
By default, the input type is set to "number". If you need to change it to "password" or "text", you can use the following methods:
use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;
public function form(Form $form): Form
{
return $form
->schema([
// ...
OtpInput::make('otp')
->password()
// or
->text()
->label('Otp'),
]);
}
composer test
Please see CHANGELOG for more information on what has changed recently.
The MIT License (MIT). Please see License File for more information.