asanovr / filament-otp-input

One-Time Passcode (OTP) input field component for Filament

Filament One-Time Passcode (OTP) Input Form Component

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:

• Customize the number of inputs
• Perform an action after filling the code
• Move to the next input after filling
• Move to the previous input with backspaces

Installation

You can install the package via composer:

composer require hasan-ahani/filament-otp-input

Usage

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.

Number inputs

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.

Get 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'),
        ]);
}

Input type

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'),
        ]);
}

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Hasan Ahani
• All Contributors

License

The MIT License (MIT). Please see License File for more information.