OTP 输入框

版本：^2.8.0

双重身份验证、邮箱验证码、PIN 码输入——OTP 输入框已经无处不在。我们认为 Flux 也应该把它们处理得足够优雅。

这就是 OTP Input：一个用于通过多个独立输入框采集一次性密码（One-Time Password, OTP）的组件。下面一起来看看。

<flux:otp wire:model="code" length="6" />

自动提交

添加 submit="auto" 后，当所有输入框都被填写完成时，表单会自动提交——完全不需要提交按钮。非常适合对体验流畅度和速度要求很高的验证流程。

<flux:otp wire:model="code" length="6" submit="auto" />

不仅仅是数字

需要字母数字混合的验证码或 PIN 吗？mode 属性可以满足你的需求。将其设置为 alphanumeric 可用于序列号或许可证密钥；使用 private 则可以遮盖像 PIN 码这样的敏感值。

<!-- 许可证密钥 -->
<flux:otp wire:model="licenseKey" length="10" mode="alphanumeric" />
<!-- PIN 码 -->
<flux:otp wire:model="pin" length="4" private />

自定义布局

使用 separators 和 groups 来匹配你的设计需求。非常适合电话号码、信用卡号或任何需要分组显示的格式：

<flux:otp wire:model="code">
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
    <flux:otp.separator />
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
</flux:otp>

智能输入行为

一如既往，我们投入了大量精力，确保这个组件是世界一流的。

• 智能粘贴：粘贴完整验证码后，组件会自动将字符分配到所有输入框中——无需逐个输入。

• 智能导航：方向键可在输入框之间移动，退格键会回跳并清除前一个输入框内容，输入字符后自动跳到下一个输入框。

• 自动填充支持：第一个输入框默认带有 autocomplete="one-time-code"，因此浏览器和密码管理器可以自动从短信或验证器应用中建议填入验证码。

可访问性

当然，我们也确保该组件在键盘导航、焦点管理和合适的 ARIA 标签方面都符合预期，这样依赖屏幕阅读器的用户也能顺畅使用。每个输入框都会告知自己在序列中的位置以及期望的总位数。

查看 OTP Input 文档以获取更多示例和完整的 API 参考。