Pin Input

Pin Input captures short codes split across multiple one-character cells: OTP, MFA, SMS or email verification codes, invite codes, passcodes, payment verification, and secure access codes.

It manages focus between cells, code length, disabled state, placeholders, and allowed symbols.

Do not use Pin Input for phone numbers, passwords, numeric settings, long codes, serial numbers, coupons, or arbitrary text. Use PhoneInput, PasswordStrength with ngsInput, NumberInput, or plain ngsInput instead.

Key features:

Configurable number of input cells.
Optional placeholder per cell.
Allowed-symbol filtering through acceptOnly.
Angular forms integration.
Automatic focus movement between cells.

The NgStarter Angular Pin Input component lets you build OTP, MFA, invite-code, and secure access forms. It supports custom code length, placeholders, allowed symbols, Angular forms, and automatic focus movement between cells.

Basic Pin Input

Use a basic pin input for short verification codes such as OTP, MFA, invite, or access codes.

Value: -

Placeholder

Use a placeholder when empty cells need a visible hint.

Value: -

Custom Length

Set length to match the exact number of characters required by the verification flow.

Custom Symbols

Use acceptOnly when the code can contain symbols other than digits.

Value: -