Input OTP

Name: ng-oat
Author: SashiKumar Yadav

One-time password input with individual digit slots, auto-advance, paste support, and mask mode.

Input	Type	Default	Description
`length`	`number`	`6`	Total number of OTP digits
`separator`	`number`	`0`	Position to insert a dash separator
`disabled`	`boolean`	`false`	Disable all slots
`mask`	`boolean`	`false`	Mask input with dots
`value`	`string`	`''`	Two-way bound OTP value

Import & Usage

typescript

import { Component, signal } from '@angular/core';
import { NgOatInputOtp } from '@letsprogram/ng-oat/input-otp';

@Component({
  selector: 'app-example',
  imports: [NgOatInputOtp],
  template: `
    <ng-oat-input-otp
      [length]="6"
      [separator]="3"
      [(value)]="otpCode" />
  `,
})
export class ExampleComponent {
  otpCode = signal('');
}

Basic (6 digits)

Value: (empty)

html

<ng-oat-input-otp [(value)]="otpValue" />

With Separator

Value: (empty)

html

<ng-oat-input-otp [length]="6" [separator]="3" [(value)]="otpCode" />

4-digit PIN

Value: (empty)

html

<ng-oat-input-otp [length]="4" [mask]="true" [(value)]="pin" />

Disabled

html

<ng-oat-input-otp [length]="6" [disabled]="true" value="123456" />