Input OTP
<tng-input-otp> gives you segmented one-time-code entry with one string value, predictable keyboard flow, paste distribution, and Angular forms support.
Imports
Component import
ts
import { TngInputOtpComponent } from '@tailng-ui/components';Usage baseline
The wrapper owns the slot rendering, focus choreography, paste handling, and hidden input submission while exposing a simple value / valueChange contract.
Minimal component usage
html
<tng-input-otp
[length]="6"
[value]="verificationCode()"
[ariaLabel]="'Verification code'"
(valueChange)="onVerificationCodeChange($event)"
(complete)="onVerificationCodeComplete($event)"
></tng-input-otp>Input OTP variants
Compare the same component contract across plain CSS and Tailwind CSS shells.
Input OTP (Plain-CSS)
Verification code
Wrapper-first OTP entry with a controlled string value and a light verification surface.
Value: 12
Complete event: —
Input OTP (Tailwind CSS)
Approval code
Same wrapper, utility-first shell, and a completion event you can wire into your flow.
Value: 84
Complete event: —
Behavior baseline
- Each slot accepts one character and auto-advances on valid entry.
- Pasting a full code distributes characters from the active slot forward.
- Backspace, Delete, Home, End, and Arrow keys keep slot traversal predictable.