OTP Input

A one-time password / PIN input with individually-focusable boxes. Supports auto-advance on type, keyboard navigation, paste, and Angular Forms integration. Emits (completed) when all boxes are filled.

freenew

Playground

length

mask

numbersOnly

disabled

HTML

<ply-otp-input [length]="6">Otp Input</ply-otp-input>

6-Digit OTP

Default configuration with length="6" and numbersOnly="true".

Current value: —

HTML

<ply-otp-input [length]="6" [(ngModel)]="code" (completed)="onCode($event)"></ply-otp-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add otp-input
// Paths are relative to aliases.components (default: src/app/components)
import { OtpInputComponent } from './otp-input/otp-input.component';

@Component({
  selector: 'app-otp-input-example',
  imports: [
    OtpInputComponent
  ],
  template: `...`
})
export class OtpInputExampleComponent {}

Install

bash

npx ply-ui-cli add otp-input

4-Digit PIN

HTML

<ply-otp-input [length]="4"></ply-otp-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add otp-input
// Paths are relative to aliases.components (default: src/app/components)
import { OtpInputComponent } from './otp-input/otp-input.component';

@Component({
  selector: 'app-otp-input-example',
  imports: [
    OtpInputComponent
  ],
  template: `...`
})
export class OtpInputExampleComponent {}

Install

bash

npx ply-ui-cli add otp-input

Masked (Password)

Set [mask]="true" to hide the digits as password dots.

HTML

<ply-otp-input [length]="6" [mask]="true"></ply-otp-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add otp-input
// Paths are relative to aliases.components (default: src/app/components)
import { OtpInputComponent } from './otp-input/otp-input.component';

@Component({
  selector: 'app-otp-input-example',
  imports: [
    OtpInputComponent
  ],
  template: `...`
})
export class OtpInputExampleComponent {}

Install

bash

npx ply-ui-cli add otp-input

Disabled State

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add otp-input
// Paths are relative to aliases.components (default: src/app/components)
import { OtpInputComponent } from './otp-input/otp-input.component';

@Component({
  selector: 'app-otp-input-example',
  imports: [
    OtpInputComponent
  ],
  template: `...`
})
export class OtpInputExampleComponent {}

Install

bash

npx ply-ui-cli add otp-input

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add otp-input

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add otp-input
// Paths are relative to aliases.components (default: src/app/components)
import { OtpInputComponent } from './otp-input/otp-input.component';

@Component({
  selector: 'app-your-component',
  imports: [
    OtpInputComponent
  ],
  template: `...`
})
export class YourComponent {}

API for otp-input — generated from JSDoc in the library source.

API reference for otp-input
API	Member	Type	Default	Description
`ply-otp-input`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-otp-input`	`length`	`number`	`6`	—
`ply-otp-input`	`mask`	`boolean`	`false`	—
`ply-otp-input`	`numbersOnly`	`boolean`	`true`	—
`ply-otp-input`	`(completed)`	`string`	—	Emitted when all boxes are filled with the full code string.
`ply-otp-input`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).