fully customizable opt input for web apps, compatible with Vue 2.x
npm install otp-input-vue2
Key Features •
Installation •
Props •
Events •
Styling •
Contribute •
License
alt="otp-input.gif">
bash
npm i otp-input-vue2
`
Basic Example :
just import to your component :
` html
:isValid="isCodeValid"
@on-complete="onCompleteHandler"
@on-changed="onChangedHandler"
@on-paste="onPasteHandler">
There is an error
`
Expected output :
Props
Name
Type
Default
Description
id
String
"otp"
Id of opt input when you have multiple otp-inputs in a page.
digits
Number
5
Number of OTP inputs to be rendered.
mode
String
"separate"
Way of showing opt input, options: separate , group
type
String
"number"
Type of input data , options : number, text, password
placeholder
String
"-"
Placeholder of inputs where data places
radius
Number
5
Border radius of inputs (in both modes)
gap
Number
10
Gap between inputs (in both modes)
isDisabled
Boolean
false
Whether the input are Disabled or not
isValid
Boolean
true
Whether the entered value is valid or not
rtl
Boolean
false
Whether the input is RTL or not
autoFocus
Boolean
true
The input should be focused-on when page rendered or not
separateInputClass
String
-
Single input class in separate mode
separateWrapperClass
String
-
Inputs wrapper class in separate mode
groupInputClass
String
-
Single input class in group mode
groupWrapperClass
String
-
Inputs wrapper class in group mode
activeInputClass
String
-
Style of single input when its focused
activeWrapperClass
String
-
Style of inputs wrapper when its focused on one input
> Note
> Don't Panic! 😁 There is a guide to how use class props and style inputs as you wish, see this guide.
Events
Name
Description
on-complete
Return OTP value typed in inputs when all digits are completed
on-changed
Return Last single OTP value in inputs after typing
on-paste
its triggered when paste value in inputs
Styling
To customize the appearance of the inputs, we can pass our classes to the component as props:
First we should know how to pass class to otp component and use it . there is several approach, we focus on scoped CSS with deep selector (you can do yours😉) :
Separate Mode :
template :
` html
separateWrapperClass="separate-wrapper-class"
separateInputClass="separate-input-class"
/>
`
css :
` CSS
`
output:
Group Mode :
template :
` html
mode="group"
groupWrapperClass="group-wrapper-class"
groupInputClass="group-input-class"
/>
`
css :
` CSS
`
output :
---
Error Message :
template :
` html
:isValid="false" errorClass="error-class">
There is an error
`
css :
` CSS
`
output :
Active input (focus) :
template :
` html
activeInputClass="active-input-class">
`
css :
` CSS
`
output :
or in group mode with activeWrapperClass` prop :