nitro-otp
TypeScript icon, indicating that this package has built-in type declarations

1.0.15 • Public • Published

@nitro/otp (OTP / PIN Input)

Angular Library - Nitro OTP

Angular Library - Nitro OTP

One Time Password (OTP) Input Angular Library Component for the web built with Angular 15.2.1 and tested from all versions >= 10.0.0.

This can be used as OTP inputs or Personal Identification Number (PIN) inputs or for all each character specific inputs.

If you are facing any issues with lower versions of angular, Please use the previous versions.

Features:

  1. Light weight
  2. Fully customizable
  3. CSS vars for theming
  4. In-Built Boxed & Dashed appearance

Usage

app.module.ts

import { OtpModule } from 'nitro-otp';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OtpModule
  ]
})

some.component.ts

import { OtpComponent } from 'nitro-otp';

some.component.html

<nitro-otp #otp [size]="4" message="Incorrect OTP" [autoFocus]="true" (otpChange)="afterOtpChanged($event)"></nitro-otp>

Error Management Example:

some.component.ts

// Below code are OPTIONAL for error display
export class SomeComponent {
  @ViewChild('otp')
  private otp!: OtpComponent;

  afterOtpChanged(otpVal: [string, boolean]): void {
    const [value, length] = otpVal;
    // value: Value of OTP Input
    // length: TRUE, if length matches and vice-versa
    
    // Write your validation code here `this.otp.isError.next(true);` will set Error
    this.otp.isError.next(!length);
  }
}

API:

Name Type Default Description
appearance String legacy
Change Appearance of ControlChange appearance of OTP input (legacy / dashed)

Eg.:
<nitro-otp [appearance]="dashed"></nitro-otp>

Accepted Values:
legacy / dashed / <any_string>

Custom String will be added as a class prefixed by an underscores (like _customTheme)
autoFocus Boolean true
Autofocus to InputToggle autoFocus to OTP input
Eg.:
<nitro-otp [autoFocus]="true"></nitro-otp>
message String ""
Message to showCustom message to show when an Error occurs
Eg.:
<nitro-otp [message]="'Invalid OTP'"></nitro-otp>
passwordChar String
passwordChar to showCustom Character to mask the OTP
Eg.:
<nitro-otp [passwordChar]="*"></nitro-otp>
revealChar Boolean true
Set the Characters Reveal or NotSet Character to mask or show for OTP
Eg.:
<nitro-otp [revealChar]="true"></nitro-otp>
size Number 4
Max. Size of InputDefines the maximum size of OTP / Pin Input Control
Eg.:
<nitro-otp [size]="4"></nitro-otp>

CSS Variables:

:root {
  --nitro-otp_border-color: goldenrod;
  --nitro-otp_border-color_focus: blue;
  --nitro-otp_border-color_error: red;
}

This library was generated with Angular CLI version 15.2.1.

Install

npm i nitro-otp

DownloadsWeekly Downloads

14

Version

1.0.15

License

MIT

Unpacked Size

72.6 kB

Total Files

16

Last publish

Collaborators

  • asphub