🔐 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

``bash
npm install otp-angular
`
---

🚀 Latest changes in 1.1.0

- Update Auto Submit Improved autoSubmit functionality
- Bug Fix Fixed form control value update issue on Backspace delete

Usage


For Component

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

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

export class {
protected config = signal({ length: 4 });
}

`

For Template
`bash
@let _config = config();









`

---




⚙️ Inputs/Outputs

| Option | Type | Required | Description | Default |
|---------------------|------------|----------|----------------------------------------------------------------------------------|----------------|
| disabled | boolean | No | Disables the OTP input when set to true | false |
| onInputChange | Output | No | Emits the OTP value on change. Returns string, number, or null | — |
| onAutoSubmit | Output | No | Emits the OTP value when all input fields are filled and autoSubmit is enabled | — |
| onResendAvailable | Output | No | Emits true when the resend option is clicked | — |
| setValue | function | No | Programmatically sets the OTP value | — |
| reset | function | No | Resets the resend timer | — |
| config | object | Yes | Configuration object for the OTP component (see Config Options below) | { length: 4 }|

---

⚙️ Config Options

| Option | Type | Required | Description | Default |
|--------------------------|--------------------------|----------|-------------------------------------------------------------------------|---------------------------------|
| length | number | Yes | Number of OTP digits | 4 |
| numbersOnly | boolean | No | Allows only numeric input | false |
| autoFocus | boolean | No | Automatically focuses the first input | false |
| autoSubmit | boolean | No | Automatically emits the OTP value when all inputs are filled | false |
| isPassword | boolean | No | Masks input characters | false |
| showError | boolean | No | Shows a red border on empty inputs when blurred | false |
| showCaps | boolean | No | Transforms input characters to uppercase | false |
| containerClass | string \| string[] | No | Custom CSS class(es) for the container | — |
| containerStyles | object | No | Inline styles for the container | {} |
| inputClass | string \| string[] | No | Custom CSS class(es) for OTP input fields | — |
| inputStyles | object \| object[] | No | Inline styles for OTP input fields | {} |
| placeholder | string | No | Placeholder text for each input field | '' |
| separator | string | No | Optional separator character between inputs | '' |
| resend | number | No | Enables the resend option with countdown (in seconds) | 0 |
| resendLabel | string | No | Text label for the resend option | RESEND VERIFICATION CODE |
| resendContainerClass | string | No | Custom CSS class for the resend container | '' |
| resendLabelClass | string | No | Custom CSS class for the resend label | '' |
| resendTimerClass | string | No | Custom CSS class for the resend timer | '' |
| theme | 'light' \| 'dark' | No | Theme color mode | 'light' |


---

🧩 Other Features


Use @ViewChild to get a reference to the component
`bash
@ViewChild(OtpAngular, { static: false }) otpRef!: OtpAngular;
`

$3

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

`bash
this.otpRef.disabled.set(true);
`




$3

`bash
this.otpRef.setValue('1234');
`

$3

`bash
this.otpRef.reset();
``

---

📛 Badges

!npm
!npm
!GitHub issues
!GitHub stars

---

📄 License