v-pin-input

Vue Pin Input (Vue 3)

Vue Pin Input is a Vue 3 input component for pins, otp etc.

Here is a live demo

Installation

yarn add v-pin-input
# or
npm i v-pin-input

Plugin installation

import { createApp } from 'vue'
import App from './App.vue'

import PinInput from 'v-pin-input'

const app = createApp(App)

app.use(PinInput)
app.mount('#app')

Usage

<script setup lang="ts">
import { ref } from 'vue'

const model = ref('')

const handleCompleted = (val: string) => {
  console.log('Completed', val)
}
</script>

<template>
  <pin-input
    class="wrapper"
    v-model="model"
    :length="6"
    autofocus
    input-class="pinInput"
    @completed="handleCompleted"
  />
</template>

<style>
.wrapper {
  display: flex;
  gap: 4px;
}

.pinInput {
  width: 20px;
  padding: 4px;
  border: none;
  border-bottom: 2px solid black;
  font-size: 1.5rem;
  color: black;
  margin-right: 4px;
  text-align: center;
}

.pinInput:focus {
  outline: none;
}
</style>

Props

Property	Type	Default	Description
length	number	4	The amount of the inputs
autofocus	boolean	true	Autofocus on first input on component load.
secure	boolean	false	Display * instead of character
characterPreview	boolean	true	Display character before switch to * in secure mode
charPreviewDuration	number	300	Ms to show the character before switch back to *
blurOnComplete	boolean	false	true if you want to blur the input when completed

Events

Name	Payload	Description
completed	string	Called once the user completes the input (fills the last empty input)

References

This is pretty much a combination of vue-split-input and vue-pincode-input