Skip to content

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

License

Notifications You must be signed in to change notification settings

hasan-ahani/filament-otp-input

Repository files navigation

Filament One-Time Passcode (OTP) Input Form Component

Latest Version on Packagist Total Downloads PHP from Packagist Tests License

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

Changelog

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

Credits

License

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