# Don't Block Paste

**NEVER** · **ID:** `interactions-dont-block-paste` · **Category:** interactions
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-dont-block-paste

> NEVER: Block paste in `<input>/<textarea>`

Never disable paste in input or textarea elements

Blocking paste frustrates users and reduces security by preventing password managers from working. Users should always be able to paste content into form fields. If you need validation, validate after paste, don't prevent it.

## Bad — do not do this

`interactions-dont-block-paste-bad`

```tsx
import { useState } from 'react';

export function DontBlockPasteBad() {
  const [value, setValue] = useState('');

  const handlePaste = (e: React.ClipboardEvent) => {
    e.preventDefault();
    // Paste is blocked
  };

  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <label className="block text-sm font-medium text-foreground mb-2">
          Confirm Password
        </label>
        <input
          type="password"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onPaste={handlePaste}
          placeholder="Re-enter your password"
          className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-hidden focus:ring-2 focus:ring-ring"
        />
        <p className="mt-2 text-xs text-muted-foreground">
          Try pasting - it's blocked. This breaks password managers and frustrates users.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Paste blocked - breaks password managers, reduces security
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-dont-block-paste-good`

```tsx
import { useState } from 'react';

export function DontBlockPasteGood() {
  const [value, setValue] = useState('');

  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <label className="block text-sm font-medium text-foreground mb-2">
          Confirm Password
        </label>
        <input
          type="password"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          autoComplete="new-password"
          placeholder="Re-enter your password"
          className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-hidden focus:ring-2 focus:ring-ring"
        />
        <p className="mt-2 text-xs text-muted-foreground">
          Paste works normally. Password managers can fill this field, improving security.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Paste allowed - works with password managers, better security
      </p>
    </div>
  );
}
```

## References

- [Why Blocking Paste is Bad UX](https://www.nngroup.com/articles/stop-password-masking/)