IPinInput ​

One cell per character, for a short code — two-factor, an email confirmation, a door PIN. For anything longer or free-form, use a plain IInput.

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

<template>
  <IPinInput v-model="code" otp />
</template>

The model is a string ​

The cells are joined for you, so the model holds the code as it appears everywhere else in the app.

const code = ref('') // → '123456', not ['1','2','3','4','5','6']

Completion ​

complete fires the moment the last cell is filled — the natural point to submit.

<IPinInput v-model="code" :length="4" @complete="verify" />

Grouping ​

group-size breaks a long code into chunks, which makes it easier to check against the one the reader is copying.

<IPinInput v-model="code" :length="6" :group-size="3" />

The separator defaults to an en dash. Pass separator for something else, or use the separator slot for a custom element.

Masked ​

mask renders each entry as a dot, for a PIN the reader is expected to keep.

<IPinInput v-model="pin" :length="4" mask type="number" />

Autofill ​

Set otp and the cells advertise themselves as a one-time code, so a phone can offer the code straight from the SMS that carried it.

<IPinInput v-model="code" otp />

Sizes ​

<IPinInput v-model="code" :length="4" size="sm" />
<IPinInput v-model="code" :length="4" size="md" />
<IPinInput v-model="code" :length="4" size="lg" />

Invalid ​

<IPinInput v-model="code" :length="4" invalid />
<p class="text-red-500">That code has expired.</p>

Props ​

Events ​

Slots ​

Accessibility ​

Each cell names its own position — "pin input 3 of 6". Typing advances to the next cell, Backspace steps back, arrow keys move between cells, and pasting a whole code fills the row in one go. The separators are hidden from assistive technology.