Input OTP
Enter one-time passwords with segmented, accessible input slots.
Last updated: March 15, 2026
This page now includes focused OTP patterns for authentication, onboarding, resend states, inline verification, and card-based confirmation flows.
Default Input OTP
The base 6-digit OTP layout.
Labeled Input OTP
Adds label and helper text above the segmented input.
Enter the 6-digit code sent to your email.
Separated Input OTP
Uses a visual split to present the code in a 3 + 3 layout.
PIN Input OTP
A compact 4-digit PIN entry pattern.
License Key Input OTP
An 8-character grouped input for license or recovery codes.
Submit Input OTP
Pairs the input with a verification action button.
Resend Timer Input OTP
Shows resend timing feedback for SMS verification flows.
Code sent to +1 •••• 4287
Success Input OTP
Displays a confirmed code with success feedback styling.
Error State Input OTP
Shows invalid-state styling and failure messaging.
Disabled Input OTP
Presents a non-interactive OTP control.
Input is disabled.
Email Flow Input OTP
Full email verification card with call-to-action button.
Check your email
We sent a code to alex@example.com
Didn't receive it?
Two Factor Input OTP
An authenticator app flow with primary and secondary actions.
Two-factor authentication
Open your authenticator app and enter the 6-digit code.
Progress Input OTP
Tracks completion with a compact progress bar.
0 / 6 digits entered
Badge Status Input OTP
Reflects input state with a live status badge.
Compact Inline Input OTP
A compact inline verification row for shorter codes.
Hint Input OTP
Uses per-slot hints for formatted numeric entry.
Enter your date of birth (DDMMYY)
Branded Card Input OTP
Card-based verification flow with stronger brand framing.
Verify your identity
A 6-digit code was sent to your registered phone number.
Code expires in 04:59
Inline Verify Input OTP
Supports verifying a contact row directly in place.
alex@example.com
Expiry Input OTP
Adds countdown context for expiring verification codes.
This code will expire in
04:59
Onboarding Step Input OTP
Places OTP confirmation inside a multi-step onboarding flow.
Confirm your number
Enter the 6-digit code we texted to +44 •••• 7821