FormOtp

A one-time code with one box per digit, paste support and automatic advance.

import { FormOtp } from '@zairakai/vue-components/Form'

Usage

<FormOtp />

Example

Code: …

<script setup>
  import { ref } from 'vue'

  const code = ref('')
</script>

<template>
  <FormOtp
    v-model="code"
    :length="6"
  />
  <p>Code: {{ code || '…' }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string	undefined
length	number	6
pattern	RegExp	() => /\d/	The characters that are accepted: digits by default.
label	string	'Verification code'
digitLabel	string	'Digit {n} of {total}'
name	string
form	string
disabled	boolean	false
mask	boolean	false

Events

Name	Description
update:modelValue
complete

See Theming for the class hooks and the data-* state of the components.