Filament One-Time Passcode (OTP) Input Form Component

One-Time Passcode (OTP) input for Filament

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.

Otp input

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.

Otp input number

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