🔐 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

OTP Input Demo

Demo

📦 Installation

npm install otp-angular

🚀 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

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	`''`

📘 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).

🧩 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();

Package detail

otp-angular

readme