R
交互控件OtpInput滚动字符光标滑动状态反馈

验证码输入

一次性验证码输入框：字符会滚动就位，光标从一个格子滑向下一个，并带成功 / 失败状态。

直接输入数字试试，填满后进入成功状态。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/otp-input.tsx。

npx shadcn@latest add swamimalode07/rare-ui/otp-input

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

otp-input.tsx
import { useState } from "react"
import { OtpInput } from "@/components/ui/otp-input"


export function Demo() {
  const [code, setCode] = useState("")


  return (
    <OtpInput
      length={6}
      value={code}
      onChange={setCode}
      onComplete={(value) => console.log("完成", value)}
      status={code.length === 6 ? "success" : "idle"}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
lengthnumber6验证码位数。
valuestring—受控值。
onChange(value: string) => void—值变化回调。
onComplete(value: string) => void—填满时的回调。
typestring—允许的字符类型。
sizestring"md"格子尺寸。
status"idle" | "success" | "error""idle"校验状态。
maskboolean—以圆点遮蔽输入。