Pin Input

一系列单字符字母数字输入框。

View code

Pin Input

功能特性

完整的键盘导航支持。
支持受控与非受控模式。
支持从剪贴板粘贴内容
输入完成时触发事件

安装

通过命令行安装该组件。

$ npm add reka-ui

结构构成

导入所有部件并组合使用。

vue

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

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

API 参考

Root

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`string[][]` The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`		`boolean` When `true`, prevents the user from interacting with the pin input
`id`		`string` Id of the element
`mask`		`boolean` When `true`, pin inputs will be treated as password.
`modelValue`		`string[] \| null` The controlled checked state of the pin input. Can be binded as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`otp`		`boolean` When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.
`placeholder`	`''`	`string` The placeholder character to use for empty pin-inputs.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`type`	`'text' as any`	`'number' \| 'text'` Input type for the inputs.

Emit	Payload
`complete`	`[value: string[]]`
`update:modelValue`	`[value: string[]]` Event handler called when the value changes.

Slots (default)	Payload
`modelValue`	`string[]` Current input values

Data Attribute	Value
`[data-complete]`	完成状态时存在
`[data-disabled]`	禁用状态时存在

Input

Pin Input 的输入字段。您可以添加任意数量的输入框。

Prop	Default	Type
`as`	`'input'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the pin input
`index*`		`number` Position of the value this input binds to.

Data Attribute	Value
`[data-complete]`	完成状态时存在
`[data-disabled]`	禁用状态时存在

示例

OTP 模式

通过将 otp 设置为 true 可将 pin input 设为 otp 模式。

vue

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

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

数字模式

通过将 type 设置为 number 可使 pin input 仅接受数字类型输入。

vue

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

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

无障碍访问

键盘交互

Key	Description
`ArrowLeft`	聚焦到上一个输入框
`ArrowRight`	聚焦到下一个输入框
`Home`	聚焦到第一个输入框
`End`	聚焦到最后一个输入框
`Backspace`	删除当前输入框的值。如果当前输入框为空，则移动到前一个输入框并同时删除该值
`Delete`	删除当前输入框的值
`Ctrl + V`	将剪贴板内容粘贴到 pin input 中。如果剪贴板中的字符数超过输入框数量，则从第一个输入框开始粘贴。否则，从当前输入框开始向后粘贴

Pin Input ​

功能特性 ​

安装 ​

结构构成 ​

API 参考 ​

Root ​

Input ​

示例 ​

OTP 模式 ​

数字模式 ​

无障碍访问 ​

键盘交互 ​

Pin Input

功能特性

安装

结构构成

API 参考

Root

Input

示例

OTP 模式

数字模式

无障碍访问

键盘交互