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