InputOTP

InputOTP 用于输入固定长度的一次性密码、短信验证码、邮箱验证码或短码。组件基于 input-otp 封装，默认渲染 6 个输入槽，并提供分隔符、掩码、受控值和完成回调。

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
  InputOtpRoot
} from '@skyroc/web-ui';

何时使用

• 需要输入固定长度验证码、一次性密码或短码。
• 输入内容需要按位展示，并在填满后触发完成逻辑。
• 需要支持粘贴完整验证码、自动补全或密码管理器兼容策略。
• 普通单行文本输入使用 Input；数字步进输入使用 NumberInput。

基础用法

默认渲染 6 个输入槽。通过 onComplete 可以在输入填满后触发业务逻辑。

自定义长度

通过 inputCount 控制输入槽数量。组件会把该值作为底层 maxLength。

受控值

通过 value 和 onChange 控制输入值，可以在回调中对输入内容做转换。

分隔符

通过 separator 开启分隔展示。传入 true 时使用默认 Minus 图标；如果需要自定义分隔符，请传入 React element。

密码模式

通过 mask 将已输入字符显示为圆点，适合验证码或一次性密码等敏感输入。

禁用

通过 disabled 禁用底层输入能力。

尺寸

通过 size 调整每个输入槽的宽高、字号和分隔符字号，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 控制不同 slot：root、group、input 和 separator。也可以通过 groupProps、slotProps、separatorProps 分别向内部结构组件传入额外属性。

API

InputOTP

通用属性参考：封装 InputOtpRoot、InputOTPGroup、InputOTPSlot 和 InputOTPSeparator 的便捷组件。

结构组件

当需要完全自定义 OTP 结构时，可以直接组合底层结构组件。

类型