Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/novaday-co/otp-input-vue
Fully customizable OTP input for web apps, compatible with Vue 2.x
https://github.com/novaday-co/otp-input-vue
input otp-input vue vuejs
Last synced: 10 days ago
JSON representation
Fully customizable OTP input for web apps, compatible with Vue 2.x
- Host: GitHub
- URL: https://github.com/novaday-co/otp-input-vue
- Owner: novaday-co
- License: mit
- Created: 2022-06-22T12:26:48.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-27T13:51:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T05:21:31.721Z (21 days ago)
- Topics: input, otp-input, vue, vuejs
- Language: Vue
- Homepage: https://www.npmjs.com/package/otp-input-vue2
- Size: 888 KB
- Stars: 18
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
OTP-INPUT
Fully customizable OTP input for web apps, compatible with Vue 2.x
Key Features •
Installation •
Props •
Events •
Styling •
Contribute •
License
## Key Features
- [x] Dynamic display modes - **Group** and **Separate**
- [x] Fully customizable style - **Input** , **wrapper** , **Active Input**, **Errors**
- [x] Direction of inputs - **RTL** / **LTR**
- [x] Dynamic Type - **Number** and **Text**
- [x] Dynamic **Number of inputs**
- [x] Your desired character as input **placeholder**
- [x] Controllable **gap** between inputs
- [x] **Disabled** inputs
- [x] **Error handling** - with customizable text
- [x] **Auto Focus** on inputs
- [x] **Password** input type
- [ ] **web-otp** - auto fill input from sms *(Coming soon ... )*
- [ ] **Vue 3.x** - compatible with vue 3.x *(Coming soon ... )*
## Installation
To install the latest stable version:
```bash
npm i otp-input-vue2
```
Basic Example :
just import to your component :
``` html
There is an error
import OtpInput from "otp-input-vue2";
export default {
name:"yourComponent",
components:{
OtpInput,
},
data(){
return {
isCodeValid: true,
};
},
methods: {
onCompleteHandler(code){
console.log("code completed", code);
this.isCodeValid = false;
},
onChangedHandler(lastEnteredCode){
console.log("code changed", lastEnteredCode);
this.isCodeValid = true;
},
onPasteHandler(code){
console.log("code pasted", code);
},
},
};
```
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](#styling).
## 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
```
css :
``` CSS
.vue-otp-input >>> .separate-input-class {
text-align: center;
font-weight: bold;
font-size: 20px;
background-color: aquamarine;
color: blue;
border: solid 2px red;
width: 48px;
height: 48px;
}
.vue-otp-input >>> .separate-wrapper-class {
border: solid 3px green;
}
```
output:
Group Mode :
template :
``` html
```
css :
``` CSS
.vue-otp-input >>> .group-wrapper-class {
border: solid 3px green;
background-color: blue;
}
.vue-otp-input >>> .group-input-class {
background-color: blue;
border: none;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #fff;
width: 48px;
height: 48px;
}
```
output :
---
Error Message :
template :
``` html
There is an error
```
css :
``` CSS
.vue-otp-input >>> .error-class {
color: #66ff00;
line-height: 1.5em;
font-weight: bold;
}
```
output :
Active input (focus) :
template :
``` html
```
css :
``` CSS
.vue-otp-input >>> .active-input-class {
text-align: center;
border-color: red !important;
transform: scale(1.2);
}
```
output :
or in group mode with `activeWrapperClass` prop :
## Contribute
You can help me and contribute for :
- New options
- Bug Fix
- Better exceptions
## License
MIT