ngx-otp-code-input

ngx-otp-code-input

ngx-otp-code-input is an Angular component for OTP (One-Time Password) input. This component is highly customizable, allowing for various configurations such as masking, integer-only input, autofocus, and more.

If you like the library, please consider giving it a ⭐ on GitHub.

Features

• Customizable Length: Specify the number of OTP input fields.
• Masking: Hide input values, useful for password-like behavior.
• Integer Only: Restrict input to only integers.
• Autofocus: Automatically focus on the first input field.
• Read-only and Disabled States: Make the input fields read-only or disabled.
• Tab Index: Control tab navigation between input fields.
• Events: Emit events on OTP change and completion.
• Success/Error Status Feedback: Visually indicate the result of OTP verification with customizable icons and colors.
• Animated Transitions: Smooth transitions or animations when focusing between OTP input fields.

Installation

Install the package via npm:

  npm install ngx-otp-code-input

Usage

Import the Module

Add NgxOtpCodeInputModule to your Angular module:

import { NgxOtpCodeInputModule } from 'ngx-otp-code-input';

@NgModule({
  declarations: [
    // your components
  ],
  imports: [
    // other modules
    NgxOtpCodeInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use the Component in Your Template

Add the ngx-otp-code-input component to your template:

<ngx-otp-code-input
  [length]="6"
  [mask]="false"
  [integerOnly]="false"
  [disabled]="false"
  variant="outline"
  [readonly]="false"
  [autofocus]="true"
  [animationConfig]="{ type: 'slide', duration: '1.0s' }" <!-- Optional: Configure animations -->
  [status]="otpStatus" <!-- Bind this to a variable in your component -->
  [successIcon]="'check_circle'" <!-- Optional: Bind to a custom icon for success -->
  [failureIcon]="'cancel'" <!-- Optional: Bind to a custom icon for failure -->
  [tabIndex]="true"
  (otpChange)="onOtpChange($event)"
  (otpComplete)="onOtpComplete($event)"
></ngx-otp-code-input>

Handle Events in Your Component

Add event handlers in your component:

export class AppComponent {
  otpStatus: 'success' | 'failed' | null = null;

  onOtpComplete(event: string): void {
    console.log('OTP Complete:', event);
  }

  onOtpChange(event: string): void {
    console.log('OTP Change:', event);
  }
}

Configuration

Inputs

Input	Type	Default	Description
length	number	4	Number of OTP input fields.
mask	boolean	false	Hide the input values (like a password field).
integerOnly	boolean	false	Restrict input to only integer values.
disabled	boolean	false	Disable the input fields.
readonly	boolean	false	Make the input fields read-only.
autofocus	boolean	true	Automatically focus on the first input field.
tabIndex	boolean	false	Enable tab navigation between input fields.
inputClass	string	''	Custom CSS class for the input fields.
variant	MatFormFieldAppearance	'outline', 'fill'	Appearance of the Material form field.
regex	string	''	Custom regex pattern for the input fields.
status	any	null	Visual status of OTP verification.
successIcon	string	'check_circle'	Custom icon for success status.
failureIcon	string	'error'	Custom icon for failure status.
animationConfig	{ type: string, duration: string }	{ type: 'slide', duration: '1.0s' }	Configuration for animations when focusing between input fields.

Outputs

Output	Type	Description
otpChange	EventEmitter<string>	Emits the current OTP value when it changes
otpComplete	EventEmitter<string>	Emits the OTP value when all fields are filled.

Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss changes. 🚀

License

MIT