Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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.
PropTypeDefault
length
Number of inputs
number4
placeholder
Custom placeholder for an input inside the field
string
acceptOnly
Regexp which restricts input to input
RegExp/^[0-9]+$/
disabled
Disable control
booleanfalse