ngx-otp-pin

NgxOtpPin

A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.

✨ Features

• ✅ OTP/PIN input fields (configurable)
• ✅ Supports multiple character types (digits, letters, alphanumeric, etc.)
• ✅ Auto navigation between input fields
• ✅ Allows class inheritance from parent via @HostBinding
• ✅ Can be used multiple times on the same page without conflict

📦 Installation

This component is standalone. You can import it directly into your Angular project and use it where needed.

npm i ngx-otp-pin

🚀 Usage

1. Import into a parent component

import { NgxOtp } from 'ngx-otp-pin';

<ngx-otp 
   [size]="5" 
   [isPassword]="true" 
   (opt)="otp=$event" 
   [inputClass]="'abc'" 
/>

📥 Inputs & 📤 Output

🧩 Inputs

size (number): Specifies how many OTP input boxes should be rendered.

Example: size="6" renders 6 input boxes.

Default: 4

type (OTP_TYPE): Defines the allowed character type in each input box.

You can choose from the following options (see the OTP_TYPE enum section below).

isPassword (boolean): If set to true, masks each input like a password field using type="password". Useful for secure PIN or sensitive OTP input.

Default: false

containerStyles ({ [key: string]: string }): Inline styles to apply to the outer container (<div>) holding the OTP inputs.

Example: { display: 'flex', gap: '10px' }

inputStyles ({ [key: string]: string }): Inline styles to apply to each individual input box.

Example: { width: '40px', textAlign: 'center' }

containerClass (string):

Optional class name to apply to the container for styling via CSS.

inputClass (string):

Optional class name to apply to each input field for styling via CSS.

📤 Output

opt (string): Emits the entire OTP value as a concatenated string whenever the user types or deletes a character.

Example: Typing 1, 2, 3, 4 will emit "1234".

Usage in parent component:

<ngx-otp (opt)="onOtpChange($event)"></ngx-otp>

onOtpChange(otp: string) {
  console.log('Received OTP:', otp);
}

🧠 OTP_TYPE Enum

Use this enum in your component to control what type of characters are allowed in each OTP input field:

export enum OTP_TYPE {
  DIGITS = 'DIGITS',                   // Only numbers: 0–9
  CAPITAL_LETTERS = 'CAPITAL_LETTERS', // Only A–Z
  SMALL_LETTERS = 'SMALL_LETTERS',     // Only a–z
  LETTERS = 'LETTERS',                 // a–z and A–Z
  ALPHA_NUMERIC = 'ALPHA_NUMERIC'      // a–z, A–Z, and 0–9
}

How to use it in your component:

OTP_TYPE = OTP_TYPE;
<ngx-otp [type]="OTP_TYPE.ALPHA_NUMERIC"></ngx-otp>