The Good, The Bad and The UX

A collection of UX patterns with comparative examples

Back to articles

The Complete Guide to OTP UX

One-Time Passwords (OTP) are everywhere: account verification, two-factor authentication, password resets. Yet, the UX around them is often an afterthought. This guide covers 4 key areas to make your OTP flow seamless.

1. Email Design: Make the Code Scannable

Before users even interact with your form, they need to find the code in their inbox. This is where many services fail.

Code buried in text

A

Acme Inc

noreply@acme.com

Hello,

You are receiving this unique code for authentication and additional security purposes for your account.

Please enter the code: 318213

If you did not initiate this request, please disregard this email...

Code prominently displayed

A

Acme Inc

noreply@acme.com

Your security code

482362

This code expires in 10 minutes.

Why it matters

  • Users scan emails in 2-3 seconds looking for the code
  • A code buried in text forces them to read the entire email
  • Clear visual hierarchy = faster copy/paste = less frustration

Best practices

  1. Center the code with generous whitespace
  2. Use a large, monospace font for the digits
  3. Add visual contrast (background box, different color)
  4. Show expiration time clearly
  5. Keep the email short — users don’t read marketing copy when they need a code

2. Paste Support: The Make-or-Break Feature

Users almost always have the code in their clipboard (from email, SMS, or password manager). If they can’t paste it, frustration kicks in immediately.

Forms

Verification code paste support

Allow users to paste verification codes instead of typing digit by digit

inputverificationpasteOTPmobile

Bad example

Your code:

Click to copy

Enter verification code

Good example

Your code:

Click to copy

Enter verification code

Learn more

The problem with naive implementations

Many “separate fields” implementations break paste:

  • Each input only accepts one character
  • Pasting fills only the first field and discards the rest
  • Users are forced to type digit by digit

The solution

Handle the paste event properly:

  1. Intercept Ctrl+V / Cmd+V on any field
  2. Extract digits from the pasted content
  3. Distribute them across all fields automatically

Modern OTP libraries (like input-otp) handle this out of the box. If building custom inputs, paste support is non-negotiable.

3. Auto-Submit: Remove the Extra Click

Once all digits are entered, why make users click “Verify”?

Forms

Auto-submit verification code

Automatically validate the code when all digits are entered instead of requiring manual submission

verificationotpauto-submitinputux

Bad example

Test code:

Click to copy

Enter verification code

Press Enter or click Verify

Good example

Test code:

Click to copy

Enter verification code

Code validates automatically when complete

Learn more

Why auto-submit wins

  • Saves one interaction (no button click needed)
  • Feels faster even if the actual time is the same
  • Reduces cognitive load — users don’t have to decide when to submit

Implementation notes

  • Trigger validation when value.length === maxLength
  • Show a loading state immediately
  • Handle errors gracefully (clear input, show message)

4. Paste Button: The Hidden Accelerator

On mobile, pasting requires multiple steps: long press → context menu → tap “Paste”. A visible paste button reduces this to a single tap.

Forms

Paste button for OTP code

Add a visible paste button to let users quickly fill the OTP from clipboard

verificationotppasteclipboardinputux

Bad example

Test code:

Click to copy

Enter verification code

Type the code manually or use Ctrl+V to paste

Good example

Test code:

Click to copy

Enter verification code

Click the paste button or use Ctrl+V

Learn more

The browser permission question

Yes, the Clipboard API triggers a permission prompt. But:

  1. It’s one-time — users won’t see it again after accepting
  2. It’s contextual — the prompt appears right after clicking “Paste”
  3. It’s still faster than typing 6 digits manually

When to use it

  • Desktop: Highly recommended (email codes, password managers)
  • Mobile: Optional fallback — autocomplete="one-time-code" handles most cases

The Ultimate OTP Flow

Combine all patterns for the best experience:

  1. Email: Code prominently displayed, easy to copy
  2. Input: Full paste support (Ctrl+V fills all fields)
  3. Behavior: Auto-submit when complete
  4. Fallback: Visible paste button for power users
Good example

Copy code :

Paste supportAuto-submitPaste button

The goal is simple: minimize the time between receiving the code and being verified.