Input OTP

InputOtp 组件允许用户输入一次性密码 (OTP)。它构建于 input-otp 库之上，作者是 @guilherme_rodz。

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

用法

禁用

isDisabled 属性禁用用户与 InputOtp 组件的交互。

只读

isReadOnly 属性使 InputOtp 组件变为只读，同时保持其视觉外观。

必填

isRequired 属性将 InputOtp 标记为必填字段。

尺寸

可以使用 size 属性自定义 InputOtp 的尺寸。默认值为 md。

颜色

可以通过 color 属性更改 InputOtp 的颜色。

变体

可以通过 variant 属性更改 InputOtp 的样式/变体。 默认情况下，variant 属性设置为 flat。

圆角

InputOtp 的半径可以通过 radius 属性进行更改。默认情况下，radius 属性设置为 md。

密码

通过将 type 设置为 password，InputOtp 可以用作密码/安全 PIN 输入框。

描述

InputOtp 的描述可以通过 description 属性进行设置。

错误消息

InputOtp 的自定义错误消息可以通过 errorMessage 属性进行设置。

允许的键

• InputOtp 组件仅接受指定的输入键。任何其他输入都将被忽略。
• 您可以使用 allowedKeys prop 自定义允许的键，它接受正则表达式模式。
• 默认情况下，allowedKeys 设置为 ^[0-9]*$ (仅限数字)。

受控

React Hook Form

您可以将 InputOtp 与 React Hook Form 一起使用，以进行表单验证和提交处理。

不同长度和验证

InputOtp 组件通过 length 属性支持不同的长度。您可以通过将数字值传递给 length prop 来设置输入段的数量。常见的用例包括 4 位 PIN 码和 6 位身份验证码。

自定义样式

您可以使用 classNames prop 自定义 InputOtp 组件的样式。

插槽

• base: InputOtp 包装器，它处理对齐、放置和整体外观。
• wrapper: 包装底层 input-otp 组件。作为 containerClassName prop 发送到底层 input-otp 组件。
• input: 输入元素。
• segmentWrapper: 包装所有段元素。
• segment: 段元素。
• caret: 光标代表 input-otp 组件的输入指示器。
• passwordChar: passwordChar 代表输入类型为密码时的文本样式。
• helperWrapper: 包装 description 和 errorMessage。
• description: input-otp 的描述。
• errorMessage: input-otp 的错误消息。

数据属性

InputOtp 在 base 元素上具有以下属性

• data-invalid: 当 input-otp 无效时。基于 isInvalid prop。
• data-required: 当 input-otp 为必填项时。基于 isRequired prop。
• data-readonly: 当 input-otp 为只读时。基于 isReadOnly prop。
• data-filled: 当 input-otp 完全填写时。
• data-disabled: 当 input-otp 被禁用时。基于 isDisabled prop。

InputOtp 还在 segment 元素上具有以下属性

• data-active: 当段处于活动状态时。
• data-focus: 当段获得焦点时。
• data-focus-visible: 当段焦点可见时。
• data-has-value: 当段有值时。

可访问性

• 基于 input-otp 构建。
• 必填和无效状态通过 ARIA 暴露给辅助技术。
• 支持通过 ARIA 链接到 input-otp 的描述和错误消息帮助文本。
• 键盘导航
  • Tab 键：在输入段之间移动焦点
  • 方向键：在段之间导航
  • 退格键：清除当前段并将焦点移动到上一段
• ARIA 属性
  • aria-invalid: 指示验证状态
  • aria-required: 指示输入是否为必填项

API

InputOtp Props

InputOtp Events