Vue 3 simple OTP input

Demo

Demo and docs

Installation

Prerequisites

• Node.js version 16 or higher.
• Text Editor.
  • VSCode is recommended, along with the official Vue extension.

To get started, you can install vue3-simple-otp-input with:

1npm i @healerlab/vue3-simple-otp-input

with pnpm:

1pnpm add @healerlab/vue3-simple-otp-input

with yarn:

1yarn add @healerlab/vue3-simple-otp-input

Usage

Import the component and register it locally in your Vue component:

1<script setup lang="ts">
2import { HOtpInput } from "@healerlab/vue3-simple-otp-input";
3
4const handleFinish = (otpCode: string) => {
5  // write logic with received code
6}
7
8const handleChange = (otpCode: string) => {
9  // write logic with changed code
10}
11
12const getCodeWithSeparator = () => {
13  // get code with separator
14  // otpInput?.value?.genResultWithSeparator()
15}
16</script>

Use the component in your template:

1<HOtpInput
2  :length="6" 
3  type="text" 
4  @on-finish="handleFinish"
5  @on-change="handleChange" 
6  wrapperClassName="otp-input"
7  :outlined="true"
8  ref="otpInput"
9  :only-number="true"
10  separator="-" // separator support
11  separatorType="middle" // middle or all
12/>

This is minimal style for your input, you can change it to match your use-case:

1<style scoped lang="scss">
2.otp-input {
3  :deep(input) {
4    outline: none;
5    width: 30px;
6    padding: 12px;
7    font-size: 22px;
8    border: none;
9    margin-left: 10px;
10    text-align: center;
11    &:first-child {
12      margin-left: 0;
13    }
14    &:focus {
15      outline: none
16    }
17  }
18
19  :deep(span) {
20    padding: 0 0px 0 10px;
21    font-size: 30px;
22  }
23}
24</style>

See the Vue3 Simple OTP Input page for more information.