🔐 OTP Angular

Otp Angular is a lightweight, highly customizable, and dependency-free OTP (One-Time Password) input component built for Angular 20+ applications. It offers seamless integration, flexible configuration, and a polished user experience for OTP or verification inputs. The component now also includes a built-in resend option, making it easy to handle OTP resubmission flows directly within the UI.

✅ Supports Angular 20+
🔧 Fully customizable
🎯 Keyboard navigation support
🧪 Easily testable & maintainable
💡 Auto-focus, password-style, number-only, and more

Demo

📦 Installation

npm install otp-angular

🚀 Latest changes in 1.0.6

• Update Theme Set the theme color as light or dark
• Update Aria Label Screen reader support with ARIA labels

🚀 Latest changes in 1.0.5

• Bug Fix Input Style & Class issue.

🚀 Latest changes in 1.0.4

• Update Readme Readme file updated

🚀 Latest changes in 1.0.3

• Support ReactiveFormsModule & FormsModule formControl and ngModel are supported
• Support types on Config types will be available
• Fixed Paste Event types will be available

🚀 latest Changes in 1.0.1

• Emits null instead of an empty string if no value is supplied
• Resend Option added if you add resend as option then it will open

Usage

For Component

import { OtpAngular, OtpAngularType } from 'otp-angular';

@Component({
  imports: [...others, OtpAngular, OtpAngularType]
})

export class <ComponentName> {
  protected config = signal<OtpAngularType>({ length: 4 });
}

For Template

@let _config = config();
<!-- With Event Binding -->
<otp-angular [config]="_config" (onInputChange)="onInputChange($event)"  (onResendAvailable)="resend($event)" />

<!-- Using Reactive FormControl -->
<otp-angular [config]="_config" formControlName="otp" />

<!-- Using Forms Module -->
<otp-angular [config]="_config" [(ngModel)]="otp" />

⚙️ Inputs/Outputs

| Option | Type |required | Description | Default| |-------------------|---------------------------|-------------|-------------------------------|---------| | disabled | boolean | No | Disables otp when set to true | false | | onInputChange | Output | No | Emits the OTP value on change, it's return string, number or null | — | | onResendAvailable| Output | No | Emits when you click resend option, as a boolean(true) | — | | setValue | function | No | Set the otp value | — | | reset | function | No | Reset the Resend | — | | config | object | Yes | Configure based on option. (see Config Options below) | { length: 4 } |

⚙️ Config Options

| Option | Type |required | Description | Default| |-------------------|---------------------------|-------------|-------------------------------|---------| | length | number | Yes | Number of OTP digits | 4 | | numbersOnly | boolean | No | Allow only numeric input | false | | autoFocus | boolean | No | Auto-focus first input | false | | isPassword | boolean | No | Mask input characters | false | | showError | boolean | No | Show red border on error | false | | showCaps | boolean | No | Transform to Capital letters | false | | containerClass | string or string[] | No | Custom CSS class for container| — | | containerStyles | object | No | Inline styles for container | {} | | inputClass | string or string[] | No | Custom class for input boxes | — | | inputStyles | object or object[] | No | Inline styles for input fields| {} | | placeholder | string | No | Placeholder for each input box| '' | | separator | string | No | Optional separator character | '' | | resend | number | No | Enable the Resend option | 0 | | resendLabel | string | No | Label for Resend | RESEND VERIFICATION CODE | | resendContainerClass | string | No | Custom class for resend container | '' | | resendLabelClass | string | No | Optional class for resend Label | '' | | resendTimerClass | string | No | Optional class for resend timer | '' | | theme | light or dark | No | Theme Color | light |

📘 Option Descriptions

• length: Sets how many input boxes are shown (e.g., 6 for a 6-digit OTP).
• numbersOnly: If true, only numeric input is allowed in each box.
• autoFocus: Automatically focuses the first input box on load.
• isPassword: Hides characters behind dots, like a password field.
• showError: Enables error styling (e.g., red border).
• showCaps: Transform to Capital letters .
• **containerClass / inputClass / resendContainerClass / resendLabelClass / resendTimerClass **: Lets you add your own CSS classes for styling.
• containerStyles / inputStyles: Set inline styles directly from your component.
• placeholder: The character shown in empty input boxes (like * or _).
• separator: Visual separator between input boxes (like - or :).
• resend: Sets the value to show the Resend option, value will be in seconds (like 60).
• resendLabel: To change the label for resend (e.g., Resend Code).
• theme: To change the theme for module (e.g., light).

🧩 Other Features

Use @ViewChild to get a reference to the component

@ViewChild(OtpAngular, { static: false }) otpRef!: OtpAngular;

🔒 Disabling Inputs

You can disable all input fields using the disabled input or programmatically:

this.otpRef.disabled.set(true);

🔁 Updating OTP Value

this.otpRef.setValue('1234');

🔁 Reset the timer of resend

this.otpRef.reset();

📛 Badges

📄 License