输入 OTP

InputOtp 组件允许用户输入一次性密码 (OTP)。它基于 input-otp 库，由 @guilherme_rodz 开发。

安装

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

导入

使用

禁用

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

只读

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

必填

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

尺寸

InputOtp 的大小可以使用 size 属性进行自定义。默认值为 md。

颜色

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

变体

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

圆角

可以通过 radius 属性更改 InputOtp 的圆角。默认情况下，radius 属性设置为 md。

密码

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

描述

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

错误消息

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

允许的键

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

受控

React Hook Form

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

不同长度 & 验证

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

自定义样式

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

插槽

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

数据属性

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

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

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 属性

InputOtp 事件