Neumorphism UI

Input OTP

用于以逐字符槽位展示和输入固定长度的验证码。

预览

六位验证码

将六个槽位分成两组三位，中间放置视觉分隔符。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/input-otp

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

设置 maxLength 与名称，并为每个索引渲染对应的 InputOTPSlot。分组和分隔符只组织视觉布局，整体值仍是一个输入。

"use client";

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

export default function Example() {
  return (
    <InputOTP maxLength={4} aria-label="Verification code" autoComplete="one-time-code">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  );
}

API 参考

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

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

无障碍

  • 01

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

  • 02

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

  • 03

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