Neumorphism UI
表单与选择@neumorphism-ui/input-otp

Input OTP

使用 input-otp 处理焦点、粘贴和自动前进，仅用新拟态样式呈现视觉槽位。虽然界面显示多个方格，但无障碍树和表单值仍是一个输入。

@neumorphism-ui/input-otp
Registry JSON

预览

安装

安装: input-otpnpx shadcn@latest add @neumorphism-ui/input-otp

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Input OTP import 代码
"use client";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp";

Example

Input OTP 用法代码
export default function Example() {
  return <InputOTP maxLength={6} defaultValue="123456" aria-label="验证码">
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>;
}

API 参考

组件属性类型默认值说明
InputOTPmaxLength必填number—设置允许的验证码长度。
InputOTPvalue / defaultValuestring—设置受控值或初始非受控值。
InputOTPonChange(value: string) => void—完整验证码值变化时调用。
InputOTPcontainerClassNamestring—扩展包裹槽位组的外层容器。
InputOTPSlotindex必填number—指定此视觉槽位显示完整验证码中的哪个位置。

无障碍

  • 01

    为 InputOTP 提供说明验证码用途的 aria-label 或关联 label。

  • 02

    即使显示多个槽位，也应保持一个真实输入，不要为每个字符暴露 textbox。

  • 03

    不要阻止粘贴或键盘输入；将验证错误通过独立说明文本关联。