vue3-verification-code-input

🎉A verification code input for vue 3

Usage no npm install needed!

<script type="module">
  import vue3VerificationCodeInput from 'https://cdn.skypack.dev/vue3-verification-code-input';
</script>

README

vue3-verification-code-input

🎉A verification code input for vue 3

NPM JavaScript Style Guide

NPM

Demo

Install

npm install --save vue3-verification-code-input

Usage

<template>
  <code-input
    @complete="completed = true"
    :fields="3"
    :fieldWidth="56"
    :fieldHeight="56"
    :required="true"
  />
  <button class="btn" :disabled="!completed">
        Continue
    </button>
</template>

<script setup>
import CodeInput from "./components/CodeInput.vue";
import { ref } from "vue";

const completed = ref(false);
</script>

PropTypes

Key Type Desc
fields number The count of characters
disabled bool Disable the inputs
required bool require the inputs
fieldWidth number input width
fieldHeight number input height
title string code input title
className string class name

EmitTypes

Key Type Desc
change func Trigger on character change
complete func Trigger on all character inputs

License

MIT © zlayine