Gathering detailed insights and metrics for ng-otp-input
Gathering detailed insights and metrics for ng-otp-input
Gathering detailed insights and metrics for ng-otp-input
Gathering detailed insights and metrics for ng-otp-input
nitro-otp
One Time Password (OTP) / PIN Input Angular Library Component for the web
ng-otp-input2
A fully customizable, one-time password input component for the web built with Angular.
ng-pass-otp
A fully customizable, one-time password input component for the web built with Angular.
@weijen/ng-otp-input
A fully customizable, one-time password input component for the web built with Angular.
A fully customizable, one-time password input component for the web built with Angular.
npm install ng-otp-input
Typescript
Module System
Node Version
NPM Version
TypeScript (67.63%)
HTML (14.09%)
SCSS (9.39%)
JavaScript (8.88%)
Total Downloads
5,500,786
Last Day
1,522
Last Week
43,036
Last Month
177,733
Last Year
1,984,382
MIT License
115 Stars
107 Commits
56 Forks
4 Watchers
2 Branches
2 Contributors
Updated on May 22, 2025
Minified
Minified + Gzipped
Latest Version
2.0.8
Package Id
ng-otp-input@2.0.8
Unpacked Size
73.01 kB
Size
30.24 kB
File Count
12
NPM Version
10.8.2
Node Version
22.8.0
Published on
May 21, 2025
Cumulative downloads
Total Downloads
Last Day
14.3%
1,522
Compared to previous day
Last Week
-0.9%
43,036
Compared to previous week
Last Month
3.1%
177,733
Compared to previous month
Last Year
38.1%
1,984,382
Compared to previous year
1
2
A fully customizable, one-time password (OTP) input component for the web built with Angular.
1npm install --save ng-otp-input
1npm install --save ng-otp-input@1.9.3
1npm install --save ng-otp-input@1.8.1
null
instead of an empty string if no value is supplied.formControl
and ngModel
are supported from v2.0.5 onwards).formCtrl
input property. Use formControl
instead.For Modules:
1import { NgOtpInputModule } from 'ng-otp-input'; 2 3@NgModule({ 4 imports: [ 5 ...otherModules, 6 NgOtpInputModule, 7 ], 8}) 9export class AppModule {}
For Standalone Components:
1import { NgOtpInputComponent } from 'ng-otp-input'; 2 3@Component({ 4 standalone: true, 5 imports: [NgOtpInputComponent], 6}) 7export class YourComponent {}
1<!-- With Event Binding --> 2<ng-otp-input (onInputChange)="onOtpChange($event)" [config]="{ length: 5 }"></ng-otp-input> 3 4<!-- Using Reactive FormControl (v2.0.5 and above) --> 5<ng-otp-input [formControl]="yourFormControl" [config]="{ length: 5 }"></ng-otp-input>
Name | Type | Required | Default | Description |
---|---|---|---|---|
disabled | boolean | No | false | Disables all inputs when set to true . |
onOtpChange | Output | No | -- | Emits the OTP value on change. Not required if using formControl . |
onBlur | Output | No | -- | Triggered when focus is lost from the component. |
setValue | function | No | -- | Allows programmatic setting of the component value. |
config | object | Yes | { length: 4 } | Configuration object for customization (see Config Options below). |
Name | Type | Required | Default | Description |
---|---|---|---|---|
allowNumbersOnly | boolean | No | false | Restricts input to numeric values only. |
disableAutoFocus | boolean | No | false | Prevents automatic focus on load or when setting the value. |
containerClass | string | No | -- | Adds a custom CSS class to the container element. |
containerStyles | object | No | -- | Customizes the container styles. Check NgStyle. |
inputStyles | object | No | -- | Customizes the styles of individual inputs. |
inputClass | string | No | -- | Adds a custom CSS class to each input box. |
isPasswordInput | boolean | No | false | Masks input as password fields. |
length | number | Yes | 4 | Sets the number of OTP inputs to render. |
letterCase | string | No | -- | Converts input to Upper or Lower case. |
placeholder | string | No | -- | Sets a placeholder for each input box. |
separator | char | No | -- | Inserts a separator character between input boxes. |
showError | boolean | No | false | Highlights inputs with red borders if formControl is invalid, dirty, or touched. |
formControl
or ngModel
(v2.0.5 and above) for updates.setValue
:1@ViewChild(NgOtpInputComponent, { static: false }) ngOtpInput: NgOtpInputComponent; 2 3updateOtpValue() { 4 this.ngOtpInput.setValue('12345'); // Replace with your OTP value. 5}
disabled
property or set the FormControl
to a disabled state (v2.0.5+).disable
method:1this.ngOtpInput.otpForm.disable();
1const eleId = this.ngOtpInput.getBoxId(0); 2this.ngOtpInput.focusTo(eleId);
Show your support by starring the repo! Feel free to open issues or contribute via pull requests.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
5 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 6
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More