密码输入

由单字符字母数字输入框组成的序列。

查看代码

PIN 输入

特性

完整的键盘导航。
可受控或非受控。
支持从剪贴板粘贴
当输入框被填满时触发事件。

安装

从命令行安装此组件。

$ npm add reka-ui

结构

导入所有部分并将其组合。

vue

<script setup>
import { PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot>
    <PinInputInput />
  </PinInputRoot>
</template>

API 参考

根组件

包含密码输入的所有部分。当在 form 中使用时，也会渲染一个 input 以确保事件正确传播。

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`defaultValue`		`(string[] \| number[])[]` 密码输入框首次渲染时的默认值。当您不需要控制其受控状态时使用。
`dir`		`'ltr' \| 'rtl'` 适用时，组合框的阅读方向。如果省略，则全局继承自 `ConfigProvider` 或假定为 LTR（从左到右）阅读模式。
`disabled`		`布尔值` 当 `true` 时，阻止用户与密码输入框交互
`id`		`string` 元素的 ID
`mask`		`布尔值` 当 `true` 时，密码输入框将被视为密码类型。
`modelValue`		`string[] \| number[] \| null` 密码输入框的受控状态。可作为 `v-model` 绑定。
`name`		`string` 字段的名称。随其所属的表单一起作为名称/值对提交。
`otp`		`布尔值` 当 `true` 时，移动设备将自动从消息或剪贴板检测 OTP，并启用自动填充字段。
`placeholder`	`''`	`string` 用于空密码输入框的占位符字符。
`required`		`布尔值` 当为 `true` 时，表示用户必须在所属表单提交前设置值。
`type`	`'text' as any`	`'number' \| 'text'` 输入框的类型。

事件触发	载荷
`complete`	`[value: string[] \| number[]]`
`update:modelValue`	`[value: string[] \| number[]]` 值改变时调用的事件处理程序。

插槽（默认）	载荷
`modelValue`	`string[] \| number[]` 当前输入值

数据属性	值
`[data-complete]`	完成时存在
`[data-disabled]`	禁用时存在

输入框

密码输入的输入字段。您可以根据需要添加任意数量的输入框。

属性	默认	类型
`as`	`'input'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`disabled`		`布尔值` 当 `true` 时，阻止用户与密码输入框交互
`index*`		`数字` 此输入框绑定值的序号。

数据属性	值
`[data-complete]`	完成时存在
`[data-disabled]`	禁用时存在

示例

OTP 模式

您可以将密码输入框设置为 otp 模式，方法是将 otp 设置为 true。

vue

<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" otp>
    …
  </PinInputRoot>
</template>

数字模式

您可以通过将 type 设置为 number 来使密码输入框仅接受数字类型。

vue

<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" type="number">
    …
  </PinInputRoot>
</template>

无障碍性

键盘交互

键	描述
`向左箭头`	聚焦到上一个输入框。
`向右箭头`	聚焦到下一个输入框。
`Home`	聚焦到第一个输入框。
`End`	聚焦到最后一个输入框。
`Backspace`	删除当前输入框的值。如果输入框为空，则移动到上一个输入框并删除其值。
`Delete`	删除当前输入框的值。
`Ctrl + V`	将剪贴板内容粘贴到密码输入框中。如果剪贴板中的字符数等于或超过输入框的数量，则从第一个输入框开始粘贴内容。否则，内容将从当前输入框开始粘贴。

密码输入 ​

特性 ​

安装 ​

结构 ​

API 参考 ​

根组件 ​

输入框 ​

示例 ​

OTP 模式 ​

数字模式 ​

无障碍性 ​

键盘交互 ​