OTP Entry

Six-digit one-time passcode input with auto-advance, paste support, resend timer, and attempt limiting.

We sent a 6-digit code to j***@email.com

Resend code in 60s

Usage Notes

When to use: Use this pattern when verifying a user's ownership of an email address or phone number during account creation, login, or sensitive actions. Pair with the Account Creation or Password Reset patterns.
Accessibility considerations: Each digit input has an aria-label ("Digit N of 6") so screen readers identify each field. The timer countdown is announced at 30 seconds and 10 seconds remaining. Error and success states use nys-alert with appropriate ARIA live regions. The code input group uses role="group" with a descriptive aria-label. Arrow keys allow navigation between digit boxes.
NYSDS components used: nys-button, nys-alert, nys-unavheader, nys-globalheader, nys-globalfooter, nys-unavfooter. A custom CodeInput class renders the 6-digit entry boxes.
Customization points: Number of digits (default 6), resend timer duration (default 60s), maximum attempts (default 3), correct code value (for demo purposes only), and the masked destination message.