nitro-otp

@nitro/otp (OTP / PIN Input)

One Time Password (OTP) Input Angular Library Component for the web built with Angular 17.1.3 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 Control Change 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 Input Toggle autoFocus to OTP input Eg.: <nitro-otp [autoFocus]="true"></nitro-otp>
message	String	""	Message to show Custom message to show when an Error occurs Eg.: <nitro-otp [message]="'Invalid OTP'"></nitro-otp>
passwordChar	String	•	passwordChar to show Custom Character to mask the OTP Eg.: <nitro-otp [passwordChar]="*"></nitro-otp>
revealChar	Boolean	true	Set the Characters Reveal or Not Set Character to mask or show for OTP Eg.: <nitro-otp [revealChar]="true"></nitro-otp>
size	Number	4	Max. Size of Input Defines 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 17.1.3.