A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

Overview

vue-otp-input

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

Gifphy

Installation

To install the latest stable version:

npm i vue3-otp-input

OR

yarn add vue3-otp-input

Code example:

">
<script>
import OtpInput from 'vue3-otp-input';

export default defineComponent({
  name: 'App',
  components: {
    'v-otp-input': OtpInput,
  },
  setup() {
    const otpInput = ref(null)

    const handleOnComplete = (value: string) => {
      console.log('OTP completed: ', value);
    };

    const handleOnChange = (value: string) => {
      console.log('OTP changed: ', value);
    };

     const clearInput = () => {
      otpInput.value.clearInput()
    }

    return { handleOnComplete, handleOnChange, clearInput, otpInput };
  },
});
</script>

<template>
  <div style="display: flex; flex-direction: row;">
    <OtpInput
      ref="otpInput"
      input-classes="otp-input"
      separator="-"
      :num-inputs="4"
      :should-auto-focus="true"
      :is-input-num="true"
      @on-change="handleOnChange"
      @on-complete="handleOnComplete"
    />
  </div>
  <button @click="clearInput()">Clear Input</button>
</template>


<style>
.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}
</style>

Props

Name
Type Required Default Description
num-inputs number true 4 Number of OTP inputs to be rendered.
separator component
false Provide a custom separator between inputs by passing a component. For instance, - would add - between each input
input-classes className (string) false none Style applied or class passed to each input.
input-type string false "tel" Input type. Optional value: "password", "number", "tel".
should-auto-focus boolean false false Auto focuses input on inital page load.

Methods

Name
Description
clearInput() Use with $refs for clearing all otp inputs, see code example section.

Events

Name
Description
on-change Return OTP code was changing when we made a change in inputs.
on-complete Return OTP code typed in inputs.

License

MIT

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Appendix

This component is a rewite of the original vue-otp-input component to support Vue 3.x and Vue Composition API. Feel free to use it in your project, report bugs and make PR 👏🏽.

Comments
  • Cannot find module 'vue3-otp-input' or its corresponding type declarations.Vetur(2307)

    Cannot find module 'vue3-otp-input' or its corresponding type declarations.Vetur(2307)

    after i install vue3-otp-input and declare i in my vue page, i have found this bug ! Cannot find module 'vue3-otp-input' or its corresponding type declarations.Vetur(2307)

    any suggestion ?

    opened by hathemi 6
  • Vue 3 and  Vite Build Resolve Error

    Vue 3 and Vite Build Resolve Error

    Versions:

        "vue": "^3.2.24",
        "vite": "^2.7.6",
        "vite-plugin-environment": "^1.1.0",
        "vite-plugin-eslint": "^1.3.0",
        "vite-svg-loader": "^3.1.1"
    

    When I import otp component in vue file, my development is giving this error

    $ vite --host --https
     > node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json.
        30629 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
              ╵           ^
        at packageEntryFailure (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:11)
        at resolvePackageEntry (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30625:9)
        at tryNodeResolve (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30440:20)
        at Context.resolveId (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30257:28)
        at Object.resolveId (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42784:55)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async resolve (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42987:26)
        at async /home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:43125:34
        at async callback (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:832:28)
        at async handleRequest (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:664:30)
    
       node_modules/vite/dist/node/chunks/dep-fcec4469.js:43115:18: note: This error came from the "onResolve" callback registered here
        43115 │             build.onResolve({
              ╵                   ~~~~~~~~~
        at setup (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:43115:19)
        at handlePlugins (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:756:23)
        at Object.buildOrServe (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1044:7)
        at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1895:17
        at new Promise (<anonymous>)
        at Object.build (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1894:14)
        at Object.build (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1749:51)
        at /home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42945:54
        at Array.map (<anonymous>)
    
       local-script:/home/bixos/Projects/royal/royal-front/src/components/account/wallet/WithdrawItem.vue:3:22: note: The plugin "vite:dep-scan" was triggered by this import
            3 │ import VOtpInput from 'vue3-otp-input';
              ╵                       ~~~~~~~~~~~~~~~~
    
    error when starting dev server:
    Error: Build failed with 1 error:
    node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json.
        at failureErrorWithLog (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1493:15)
        at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1151:28
        at runOnEndCallbacks (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:941:63)
        at buildResponseToResult (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1149:7)
        at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1258:14
        at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:629:9
        at handleIncomingPacket (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:726:9)
        at Socket.readFromStdout (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:596:7)
        at Socket.emit (events.js:314:20)
        at addChunk (_stream_readable.js:297:12)
    
    opened by YusufcanY 5
  • [Help] Styling issue

    [Help] Styling issue

    Hi, thanks for maintaining this component.

    I just import this component inside my vue file, but the page display as follow:

    Untitled

    I following the code example that you wrote in the readme, beside that, I purposely set the height and width to 1px, the component don't have any effect. Can you please guide me how to resolve the box sizing issue?

    FYI, I imported your component in myquasar framework project. Is that possible your component styling will crash with the framework? Any advice will be appreciated, thank you again 😄

    opened by arnoldtkl 4
  • Added inputmode=

    Added inputmode="numeric" attribute

    This will prompt the browser to show a keyboard with numeric key buttons.

    The inputmode attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode

    opened by victorybiz 3
  • Set optional value to handleOnBlur

    Set optional value to handleOnBlur

    Hi there

    I'm trying to implement this nice component on a project. The problem I'm facing is that my inputs are coming from a virtual component keyboard, so when I click on one of my buttons on the virtual keyboard this function is triggered. const handleOnBlur = () => { activeInput.value = -1; }; So the otp input is never filled. I'm wondering if this onblur behavior can be optional for cases like this?

    Also I'm facing that I have to call method pin.value.handleOnChange(value); to fill the inputs from this virtual keyboard. Maybe we can expose this method as a prop in the component like the @on-complete.

    enhancement 
    opened by rodrigoUriarte 2
  • Methods for inserting values programmatically

    Methods for inserting values programmatically

    Hello Ejiro, Thank you for making this component.

    In my application I would like to be able to use a virtual keyboard with which the OTP is entered. But this would require methods to update the OTP programmatically, like updateCurrentFocusValue(3) or maybe updateValueAt(0, 3).

    Edit: Closing this for now because I've taken a different route in my project

    opened by 0ip 2
  • Cannot be imported

    Cannot be imported

    got the following error ` App • ERROR • UI in ./src/pages/Index.vue?vue&type=script&lang=js

    Module not found: Can't resolve imported dependency "vue3-otp-input" Did you forget to install it? You can run: yarn add vue3-otp-input

    App • COMPILATION FAILED • Please check the log above for details.`

    opened by CurryAyam 2
  • Added inputmode attribute

    Added inputmode attribute

    Improvement to PR #10

    This adds inputmode attribute to the top inputs and allows a browser to display an appropriate virtual keyboard.

    The inputmode attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

    opened by victorybiz 1
  • Fix two bugs

    Fix two bugs

    I fix two bugs:

    • separator prop does not work
    • last input accept more than one character when input-type='number':

    https://user-images.githubusercontent.com/78249749/147917404-79dfe213-5af8-4f68-9537-c55c9017154e.mov

    opened by nimaebra 1
  • otpInput.value.clearInput() does not clear the very last num input field

    otpInput.value.clearInput() does not clear the very last num input field

    I am using the otpInput as below:

    <v-otp-input ref="otpInput" inputmode="numeric" separator="" :num-inputs="6" :should-auto-focus="false" :is-input-num="true" :placeholder="['', '', '', '', '', '']" @on-complete="handleOnComplete" />

    But when I call otpInput.value.clearInput() in the handleOnComplete() it clears only the first 5 inputs but not the last one.

    Not sure if I am doing something wrong or if this a something that happens:

    image

    Just want to be able to clear it in case the user needs a new code resent.

    Also I am not finding how to programmatically focus the first input when required, tried otpInput.value.focus() but it didn't work. Say when the OTP code has been sent to the user.

    otpInput.value.focusInput(0) goes to the 2nd input:

    image

    Is this an issue or working as expected? Any help appreciated.

    bug 
    opened by AguilarTech 1
Releases(v0.3.6)
Owner
Ejiro Asiuwhu
Frontend Engineer | Javascript Developer | Technical Author
Ejiro Asiuwhu
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 16 Aug 31, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Anjorin Damilare 6 Aug 8, 2022
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
A tags input component for VueJS

A tags input component for VueJS

Vojtěch Laňka 0 Apr 20, 2021
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 139 Sep 14, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 34 Sep 24, 2022