AOtpInput

AOtpInput is a one-time-password / verification-code input. It splits the code into length cells (default 6), supports paste, auto-advance, a masked mode for sensitive codes, and emits complete when every cell is filled — ideal for SMS / authenticator sign-in flows.

Import

import { OtpInput } from '@any-design/anyui/vue';
// React:  import { OtpInput } from '@any-design/anyui/react';
// Svelte: import { OtpInput } from '@any-design/anyui/svelte';

Basic usage

Bind the code with v-model; the default length is 6.

<template>
  <AOtpInput v-model="code" />
  <p>Code: {{ code }}</p>
</template>

<script setup>
import { ref } from 'vue';
const code = ref('');
</script>

Examples

Masked code

Set masked to hide typed digits as dots, useful for PIN entry.

<template>
  <AOtpInput v-model="pin" :length="4" masked />
</template>

<script setup>
import { ref } from 'vue';
const pin = ref('');
</script>

Auto-focus and complete handler

autoFocus focuses the first cell on mount; complete fires once all cells are filled, perfect for auto-submitting a verification code.

<template>
  <AOtpInput v-model="code" :length="6" autoFocus @complete="onComplete" />
</template>

<script setup>
import { ref } from 'vue';
const code = ref('');
const onComplete = (val) => {
  console.log('verifying:', val);
  // call your verification API here
};
</script>

Props

Prop	Type	Default	Description
modelValue	String	‘’	Current code (v-model).
length	Number	6	Number of cells.
disabled	Boolean	false	Disabled.
masked	Boolean	false	Mask digits as dots.
autoFocus	Boolean	false	Focus the first cell on mount.

Events

Event	Payload	Description
update:modelValue	String	Code change.
complete	String	Emitted once all cells are filled.

AOtpInput

AOtpInput 是用于验证码 / 一次性密码的输入框。它将验证码拆分为 length（默认 6）个格子，支持粘贴、自动跳格，以及用于敏感场景的掩码模式，并在所有格子填满后触发 complete 事件 —— 非常适合短信 / 验证器登录流程。

引入

import { OtpInput } from '@any-design/anyui/vue';
// React:  import { OtpInput } from '@any-design/anyui/react';
// Svelte: import { OtpInput } from '@any-design/anyui/svelte';

基础用法

用 v-model 绑定验证码，默认长度为 6。

<template>
  <AOtpInput v-model="code" />
  <p>验证码：{{ code }}</p>
</template>

<script setup>
import { ref } from 'vue';
const code = ref('');
</script>

示例

掩码模式

设置 masked 可将输入的数字以圆点遮蔽，适合 PIN 输入。

<template>
  <AOtpInput v-model="pin" :length="4" masked />
</template>

<script setup>
import { ref } from 'vue';
const pin = ref('');
</script>

自动聚焦与完成回调

autoFocus 在挂载时聚焦首个格子；complete 在所有格子填满后触发，适合自动提交验证码。

<template>
  <AOtpInput v-model="code" :length="6" autoFocus @complete="onComplete" />
</template>

<script setup>
import { ref } from 'vue';
const code = ref('');
const onComplete = (val) => {
  console.log('正在校验：', val);
  // 在此调用校验接口
};
</script>

属性

属性	类型	默认值	说明
modelValue	String	‘’	当前验证码（v-model）。
length	Number	6	输入格数量。
disabled	Boolean	false	禁用。
masked	Boolean	false	将数字以圆点遮蔽。
autoFocus	Boolean	false	挂载时自动聚焦首个格子。

事件

事件	载荷	说明
update:modelValue	String	验证码变化。
complete	String	所有格子填满后触发。