@ug666/react 文档演示

OTPInput 验证码输入

OTPInput 将验证码拆分为独立小格，支持键盘方向键切换焦点、Backspace 回退、粘贴自动填充，适合手机号验证、邮箱验证等场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { OTPInput } from '@ug666/react'

默认 6 位

标准短信验证码输入，支持数字键盘与粘贴。

当前值：（空）

自定义 4 位

设置 length=4，适合图形验证码或短码场景。

当前值：（空）

完成回调

输入满位后自动触发 onComplete，通过 toast 演示回调效果。

填满 6 位后将弹出成功提示

禁用状态

disabled=true 时所有输入框被锁定，视觉上呈现半透明。

代码示例

完整的验证码提交页面用法。

import { useState } from 'react'
import { OTPInput, Toaster, toast } from '@ug666/react'

export function VerifyPage() {
  const [code, setCode] = useState('')

  return (
    <div className="space-y-4">
      <p className="text-sm text-text-secondary">请输入发送至手机的 6 位验证码</p>
      <OTPInput
        value={code}
        onValueChange={setCode}
        length={6}
        onComplete={(val) => toast.success(`验证码 ${val} 已提交`)}
      />
      <Toaster />
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
value	string	必填	当前验证码字符串（受控）。
onValueChange	(value: string) => void	必填	值变化时触发的回调。
length	number	6	验证码位数，决定渲染的输入框数量。
disabled	boolean	false	禁用所有输入框。
onComplete	(value: string) => void	—	所有位都填满时触发，适合自动提交或验证。
className	string	—	作用于容器根节点的额外类名。