Vue Pin Input (Vue 3)

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

Here is a live demo

Installation

1yarn add v-pin-input
2# or
3npm i v-pin-input

Plugin installation

1import { createApp } from 'vue'
2import App from './App.vue'
3
4import PinInput from 'v-pin-input'
5
6const app = createApp(App)
7
8app.use(PinInput)
9app.mount('#app')

Usage

1<script setup lang="ts">
2import { ref } from 'vue'
3
4const model = ref('')
5
6const handleCompleted = (val: string) => {
7  console.log('Completed', val)
8}
9</script>
10
11<template>
12  <pin-input
13    class="wrapper"
14    v-model="model"
15    :length="6"
16    autofocus
17    input-class="pinInput"
18    @completed="handleCompleted"
19  />
20</template>
21
22<style>
23.wrapper {
24  display: flex;
25  gap: 4px;
26}
27
28.pinInput {
29  width: 20px;
30  padding: 4px;
31  border: none;
32  border-bottom: 2px solid black;
33  font-size: 1.5rem;
34  color: black;
35  margin-right: 4px;
36  text-align: center;
37}
38
39.pinInput:focus {
40  outline: none;
41}
42</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