You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

ngx-otp-pin

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-otp-pin

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

0.0.4
latest
npmnpm
Version published
Weekly downloads
14
-95.05%
Maintainers
1
Weekly downloads
 
Created
Source

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>

Keywords

angular

FAQs

Package last updated on 09 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts