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:

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

with pnpm:

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

with yarn:

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

Usage

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

<script setup lang="ts">
import { HOtpInput } from "@healerlab/vue3-simple-otp-input";

const handleFinish = (otpCode: string) => {
  // write logic with received code
}

const handleChange = (otpCode: string) => {
  // write logic with changed code
}

const getCodeWithSeparator = () => {
  // get code with separator
  // otpInput?.value?.genResultWithSeparator()
}
</script>

Use the component in your template:

<HOtpInput
  :length="6" 
  type="text" 
  @on-finish="handleFinish"
  @on-change="handleChange" 
  wrapperClassName="otp-input"
  :outlined="true"
  ref="otpInput"
  :only-number="true"
  separator="-" // separator support
  separatorType="middle" // middle or all
/>

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

<style scoped lang="scss">
.otp-input {
  :deep(input) {
    outline: none;
    width: 30px;
    padding: 12px;
    font-size: 22px;
    border: none;
    margin-left: 10px;
    text-align: center;
    &:first-child {
      margin-left: 0;
    }
    &:focus {
      outline: none
    }
  }

  :deep(span) {
    padding: 0 0px 0 10px;
    font-size: 30px;
  }
}
</style>

See the Vue3 Simple OTP Input page for more information.