Never block paste

Every field must accept paste, passwords included.

Web Interface Guidelinesvercel-labs · command.md
Never block paste (`onPaste` + `preventDefault`)
Guideline ruleView source ↗
Web Interface Guidelinesvercel-labs · command.md
`onPaste` with `preventDefault`
Anti-patterns listView source ↗

From web-design-guidelines (Web Interface Guidelines).

Confirm a value

Copy the value, then paste into each confirm field.

Paste blockedBad
Keys
0
Pastes
0
Time
–

Empty

onPaste={e => e.preventDefault()}
Paste allowedGood
Keys
0
Pastes
0
Time
–

Empty

no onPaste handler
<input type="email" name="email-confirm" autocomplete="email"
       aria-describedby="match-hint">
<p id="match-hint" aria-live="polite">{matches ? "Matches" : "Doesn't match yet"}</p>

Paste a 6-digit code

Copy the code, then paste into the first box.

Your Acme code is 482913
Type each digitBad
Verification code, blocked paste
Keys
0
Pastes
0
Time
–

Waiting for code

maxLength={1} onPaste={block}
Paste fills all sixGood
Verification code
Keys
0
Pastes
0
Time
–

Waiting for code

onPaste: split digits across boxes
function onPaste(e, startIndex) {
  const digits = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
  if (!digits) return;
  e.preventDefault();
  const from = digits.length === 6 ? 0 : startIndex;
  [...digits].forEach((d, i) => { if (boxes[from + i]) boxes[from + i].value = d; });
  boxes[Math.min(from + digits.length, 5)].focus();
}

Why it matters, pros and cons

Why it matters

The copied value is already correct; retyping is where typos start.

Pros

  • Password managers and strong passwords work.
  • Codes and IBANs arrive exactly as sent.
  • Dictation and assistive tech can fill every field.

Cons

  • A pasted typo lands twice; echo the value back.
  • Intercepting paste is fine if you still insert it.
  • Typing tests are the rare exception; say so.