Primitives

Input OTP

One-Time Password (OTP) input component with individual character slots for secure authentication codes.

Import

Import the InputOtp primitives from ng-primitives/input-otp.

import { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';

Usage

Assemble the input-otp directives in your template.

<div ngpInputOtp [(ngpInputOtpValue)]="otpValue">
  <input ngpInputOtpInput />

  <div>
    <div ngpInputOtpSlot></div>
    <div ngpInputOtpSlot></div>
    <div ngpInputOtpSlot></div>
  </div>
</div>

Reusable Component

Create a reusable component that uses the NgpInputOtp directive.

import { Component } from '@angular/core';
import { InputOtp } from './input-otp';

@Component({
  selector: 'app-root',
  imports: [InputOtp],
  template: '<app-input-otp />',
})
export default class App {}

Schematics

Generate a reusable input-otp component using the Angular CLI.

ng g ng-primitives:primitive input-otp

Options

  • path: The path at which to create the component file.
  • prefix: The prefix to apply to the generated component selector.
  • componentSuffix: The suffix to apply to the generated component class name.
  • fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
  • exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/input-otp package:

NgpInputOtp

The root container for the OTP input component.

  • Selector: [ngpInputOtp]
  • Exported As: ngpInputOtp
ngpInputOtpValue
string

The current value of the OTP.

ngpInputOtpPattern
string

The regex pattern for allowed characters.

ngpInputOtpInputMode
NgpInputOtpInputMode

The input mode for the hidden input.

ngpInputOtpPasteTransformer
((text: string) => string) | undefined

Function to transform pasted text.

ngpInputOtpDisabled
boolean

Whether the input-otp is disabled.

ngpInputOtpPlaceholder
string

The placeholder character to display when a slot is empty.

ngpInputOtpValueChange
string

Event emitted when the value changes.

ngpInputOtpComplete
string

Event emitted when the OTP is complete (maxLength characters entered).

NgpInputOtpInput

The hidden input element that captures user input.

  • Selector: input[ngpInputOtpInput]
  • Exported As: ngpInputOtpInput

NgpInputOtpSlot

A directive that represents individual character slots. Automatically registers with the parent input OTP and derives its index from registration order.

  • Selector: [ngpInputOtpSlot]
  • Exported As: ngpInputOtpSlot

Data Attributes

Attribute Description
data-slot-index The index of this slot.
data-active Added to the active (focused) slot.
data-filled Added to slots that contain a character.
data-caret Added to slots that show the cursor.
data-placeholder Added to slots that should show placeholder text.

Copyright © 2025 Angular Primitives