@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 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 inputEg.:<nitro-otp [autoFocus]="true"></nitro-otp>| |message|String| "" | Message to showCustom message to show when an Error occursEg.:<nitro-otp [message]="'Invalid OTP'"></nitro-otp>| |passwordChar|String| • | passwordChar to showCustom Character to mask the OTPEg.:<nitro-otp [passwordChar]="*"></nitro-otp>| |revealChar|Boolean| true | Set the Characters Reveal or NotSet Character to mask or show for OTPEg.:<nitro-otp [revealChar]="true"></nitro-otp>| |size|Number| 4 | Max. Size of InputDefines the maximum size of OTP / Pin Input ControlEg.:<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.