# Spellcheck Selectively

**SHOULD** · **ID:** `forms-spellcheck` · **Category:** forms
**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/forms-spellcheck

> SHOULD: Disable spellcheck for emails/codes/usernames

Disable spellcheck for emails, codes, usernames, etc.

Spellcheck is helpful for prose content but annoying for technical input. Email addresses, usernames, codes, and similar fields should have spellcheck="false" to prevent red squiggly underlines on valid input.

## Bad — do not do this

`forms-spellcheck-bad`

```tsx
export function SpellcheckBad() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="bad-spell-email" className="block text-sm font-medium text-foreground mb-1">
            Email Address
          </label>
          <input
            id="bad-spell-email"
            type="email"
            defaultValue="john.doe@exmple.com"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <div>
          <label htmlFor="bad-spell-code" className="block text-sm font-medium text-foreground mb-1">
            API Key
          </label>
          <input
            id="bad-spell-code"
            type="text"
            defaultValue="sk_test_abc123xyz"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
      </form>
      <p className="text-xs text-error mt-4">
        Spellcheck enabled shows red underlines on valid input
      </p>
    </div>
  );
}
```

## Good — do this

`forms-spellcheck-good`

```tsx
export function SpellcheckGood() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="good-spell-email" className="block text-sm font-medium text-foreground mb-1">
            Email Address
          </label>
          <input
            id="good-spell-email"
            type="email"
            spellCheck={false}
            defaultValue="john.doe@exmple.com"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <div>
          <label htmlFor="good-spell-code" className="block text-sm font-medium text-foreground mb-1">
            API Key
          </label>
          <input
            id="good-spell-code"
            type="text"
            spellCheck={false}
            defaultValue="sk_test_abc123xyz"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <div>
          <label htmlFor="good-spell-message" className="block text-sm font-medium text-foreground mb-1">
            Message (spellcheck enabled)
          </label>
          <textarea
            id="good-spell-message"
            spellCheck={true}
            rows={3}
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
            placeholder="Write your message here..."
          />
        </div>
      </form>
      <p className="text-xs text-success mt-4">
        Spellcheck disabled for technical fields, enabled for prose
      </p>
    </div>
  );
}
```

## References

- [HTML spellcheck attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck)