Input OTP
One-time password input fields styled with the Tinted Trays design system. Choose variants based on background context.
Connected Variant
Slots connected together in a single capsule unit. Clean and compact.
Enter your 6-digit access code
Capsule Variant
Circular pill-shaped slots for a softer, more playful appearance.
Enter your 4-digit PIN
Tray Variant (Inverted)
White slots inside a tray container. Use when you want a grouped, contained appearance.
Enter your security code
With Separator
OTP input with separators between groups for better readability.
Enter the 6-digit code sent to your email
Email Verification Pattern
OTP input within a verification form following the promotional tray/capsule pattern.
Check your email
We sent a verification code to
you@example.com
Didn't receive the code?
Security Verification
A security-focused OTP pattern with badge and action buttons.
Disabled State
OTP input in disabled state with reduced opacity and muted colors.
Verification disabled