OTP Input

验证码输入

字符滚入、光标跟随，并带有成功描边和错误轻晃的验证码输入框。

输入 123456 通过验证，其他组合会提示错误。

交互方式

逐格输入或粘贴验证码，焦点会自动前进。方向键切换位置，退格先清空当前格，再次退格回到上一格。演示中输入 123456 显示绿色描边，其他组合显示红框并轻晃。

使用示例

import { useState } from "react"
import { OtpInput, type OtpStatus } from "@/components/ui/otp-input"

export function Demo() {
  const [status, setStatus] = useState<OtpStatus>("idle")
  return (
    <OtpInput
      status={status}
      onChange={() => setStatus("idle")}
      onComplete={code => setStatus(code === "123456" ? "success" : "error")}
    />
  )
}

参数

参数	类型 / 默认值	说明
`length`	`number`6	输入格数。
`size`	`"sm" \| "md" \| "lg"`"md"	格子基准尺寸分别为 40、48、56px；窄容器中按可用宽度收缩。
`value`	`string`	受控模式的当前验证码。
`defaultValue`	`string`""	非受控模式的初始验证码。
`onChange`	`(value: string) => void`	每次编辑后返回当前验证码。
`onComplete`	`(value: string) => void`	所有格子填满时触发。验证结果由使用者设置 status。
`type`	`"numbers" \| "letters" \| "both"`"numbers"	接受数字、字母或两者；输入与粘贴都会过滤其他字符。
`status`	`"idle" \| "success" \| "error"`"idle"	成功时依次描绘绿色边框，错误时显示红框并轻晃。
`mask`	`boolean`false	用圆点遮挡输入字符。
`disabled`	`boolean`false	禁用全部输入格。
`autoFocus`	`boolean`false	挂载后聚焦第一个输入格。
`slotClassName`	`string`	附加到每个原生输入框的样式类。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxmotiontailwind-merge

components/ui/otp-input.css
components/ui/otp-input.tsx
lib/utils.ts

来源

https://www.rareui.com/components/otpinput

https://github.com/swamimalode07/rare-ui/blob/main/components/ui/otp-input.tsx

https://github.com/swamimalode07/rare-ui/blob/main/LICENSE