OtpInput

EOtpInput (a one-time password) is a number or alphanumeric string of characters produced automatically to authenticate a user for a single transaction or login.Demo Here

Usage

<template>
  <EInput v-model="value" label="Enter the code"/>
</template>

<script setup>
  const value = ref("");
</script>

Props

For EOtpInput component, the following props are available:

Prop	Type	Default	Note
label	String	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the EOtpInput.
variant	String	"fill"	The EOtpInput element can be represented in four ways: fill and border.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
square	Boolean	false	Removes rounded corners of the element.
message	String	-	Adds a message below the input.
digitsLength	Number	6	Specify the length of the OTP Input.
paste	Boolean	false	Enables the user to paste one output to multiple OTP.
name	String	-	HTML name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
readOnly	Boolean	false	Same as readonly in native OTP makes the element not mutable.
size	String	"md"	The EOtpInput element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Emits

The EOtpInput component contains following emits.

Emit	Description
update:modelValue	Controls the input.
blur	It binds to the component's onblur event.
focus	It binds to the component's onfocus event.