Skip to main content

​
Overview

The PinInput component provides a set of input fields for entering PIN codes, OTP (one-time password) values, or verification codes.

​
Basic usage

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

<script setup lang="ts">
const pin = ref('')
</script>

​
OTP mode

<template>
  <UPinInput v-model="otp" :length="6" otp />
</template>

<script setup lang="ts">
const otp = ref('')
</script>

​
With placeholder

<template>
  <UPinInput v-model="pin" :length="4" placeholder="0" />
</template>

​
Props

​
modelValue
string
The value of the PIN input.
​
length
number
default:"4"
Number of input fields.
​
otp
boolean
default:"false"
Enable OTP mode with auto-submit on completion.
​
type
'text' | 'number'
default:"'text'"
Input type for each field.
​
placeholder
string
Placeholder for each input field.
​
mask
boolean
Mask the input values.
​
disabled
boolean
Disable all inputs.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the PIN value changes.
​
complete
(value: string) => void
Emitted when all fields are filled.

Build docs developers (and LLMs) love

Get started for freeTalk to us