Pin Input

Pin Input

Introducing the Pin Input Component for Angular Material – a sleek, customizable, and highly accessible way to handle PIN codes, OTPs, and verification flows in your Angular apps. Built with Material 3 aesthetics and Tailwind flexibility, this component seamlessly blends into any modern UI.

Key features:

✅ Fully Customizable – Adjust length, styling, spacing, and more!
✅ Material 3 & Tailwind Ready – Looks stunning out of the box.
✅ Keyboard & Paste Support – Smooth user experience on all devices.
✅ Reactive Forms Compatible – Effortlessly integrates with Angular forms.
✅ Secure & User-Friendly – Prevents accidental input mishaps.

Perfect for authentication flows, payment verifications, and secure access – because great UX starts with the right components. 🚀

Basic Pin Input

Placeholder

Custom Length

Custom Symbols

Prop	Type	Default
length Number of inputs	number	4
placeholder Custom placeholder for an input inside the field	string	–
acceptOnly regexp which restricts input to input	Regexp (default only digits)	/^[0-9]+$/
disabled Disable control	boolean	false

Prop

Type

Default

length

Number of inputs

number

placeholder

Custom placeholder for an input inside the field

string

–

acceptOnly

regexp which restricts input to input

Regexp (default only digits)

/^[0-9]+$/

disabled

Disable control

boolean

false

Basic Pin Input

Placeholder

Custom Length

Custom Symbols

API Reference