Components

PinInput 验证码

分段验证码 / OTP 输入，自动跳格与退格回退。

OTP 与掩码

otp 模式 6 位，mask 隐藏输入。

短信验证码 (OTP)

密钥掩码

OTP 值：—

<div class="flex flex-wrap items-end gap-8">
  <div class="space-y-2">
    <Label>短信验证码 (OTP)</Label>
    <PinInput v-model="otp" otp />
  </div>
  <div class="space-y-2">
    <Label>密钥掩码</Label>
    <PinInput v-model="masked" :length="4" mask />
  </div>
</div>
<p class="mt-3 text-xs text-slate-500 dark:text-slate-400">OTP 值：{{ otp.join('') || '—' }}</p>

API 参考

属性	类型	默认值	说明
`model-value`	`string[]`	`[]`	v-model 分段字符数组。
`length`	`number`	`otp ? 6 : 4`	段数。
`otp`	`boolean`	`false`	OTP 模式（自动跳格、粘贴填充）。
`mask`	`boolean`	`false`	掩码显示。
`type`	`'text' \| 'number'`	`number`	输入字符集。