Form usage
OTP fields often represent one step inside a larger approval or verification form.
Input OTP form usage
Verification passcode
A straightforward six-digit verification step with completion feedback.
Verification passcode (Plain-CSS)
Verification flow
A straightforward numeric code step with completion feedback.
Value: 28
Complete event: —
Verification passcode (Tailwind CSS)
Approval flow
Numeric approval code with utility-first framing.
Value: 84
Complete event: —
Masked recovery code
An alphanumeric recovery step with masked slots and a calmer caution tone.
Masked recovery code (Plain-CSS)
Recovery code
Alphanumeric entry with masking for sensitive approval checkpoints.
Value: A1B
Masked recovery code (Tailwind CSS)
Recovery checkpoint
Masked alphanumeric entry with a warmer caution tone.
Value: X9Q