OTP / segmented-code input

A single component for one-time passwords, PIN entry, and segmented license keys. Same API covers [1,1,1,1,1,1] classic OTP and non-uniform layouts like MS Office's [6,6,4,4,6,6].

Classic 6-digit OTP

Default layout. Template-driven binding via [(ngModel)]. The (complete) event fires once when all 6 boxes are filled — wire it to auto-submit. SMS autofill works on iOS / Android (the hidden input has autocomplete="one-time-code").

4-digit PIN (password type)

[groups]="[1,1,1,1]" with type="password". The most-recently typed character is visible for 700 ms then masks to •. Paste never reveals.

Current value (for demo):

MS Office product key (non-uniform groups)

[groups]="[6,6,4,4,6,6]", type="alphanumeric", case="upper". Paste a string with separators (e.g. "AB1234-CD5678-EF12-GH34-IJ5678-KL9012") — the component strips the dashes and fills correctly.

Current value:

Windows product key (uniform 5-5-5-5-5)

[groups]="[5,5,5,5,5]", type="alphanumeric".

Current value:

Size variants

sm
md
lg

Reactive forms — invalid state

Bound to a FormControl with Validators.required and Validators.minLength(6). The red border appears once the field is touched and the value is still invalid — mirrors Bootstrap's .is-invalid convention.

Status: INVALID · Touched: false · Value: