README

filament-otp-input 是一个为 Filament 构建的包，它提供了一个一次性密码（OTP）输入表单组件，允许您添加以下功能

• 自定义输入数量
• 在填写代码后执行操作
• 填写后跳转到下一个输入
• 使用退格键跳转到上一个输入

安装

您可以通过 composer 安装此包

composer require hasan-ahani/filament-otp-input

用法

在表单模式内部，您可以使用 Otp 输入如下

use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            OtpInput::make('otp')
                ->label('Otp'),
        ]);
}

上面的代码将在表单中渲染一个 otp 输入。

数字输入

如果您想要的条目数量少于或多于默认的 4 个数字，您可以根据以下示例进行更改

use HasanAhani\FilamentOtpInput\Components;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            OtpInput::make('otp')
                ->numberInput(6)
                ->label('Otp'),
        ]);
}

上面的代码创建了 6 个用于输入 OTP 代码的输入。

获取代码

如果您需要完全输入代码后接收代码，请按照以下示例操作

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

输入类型

默认情况下，输入类型设置为 "number"。如果您需要将其更改为 "password" 或 "text"，可以使用以下方法

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

更新日志

请参阅 CHANGELOG 了解最近更改的更多信息。

致谢

• Hasan Ahani
• 所有贡献者

许可证

MIT 许可证（MIT）。有关更多信息，请参阅 许可证文件。