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

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