Skip to content
html.sh

The spellcheck Attribute

The spellcheck Attribute

Section titled “The spellcheck Attribute”
Global Attribute

The spellcheck attribute specifies whether the browser should check the spelling and grammar of text in an element. It’s particularly useful for input fields, textareas, and contenteditable elements where user-entered text should (or shouldn’t) be checked.

Syntax

Section titled “Syntax”
<element spellcheck="value">Content</element>

Values

Section titled “Values”
ValueDescription
trueSpell checking is enabled
falseSpell checking is disabled
DefaultInherits from parent or browser default

Examples

Section titled “Examples”

Basic Spell Checking

Section titled “Basic Spell Checking”
Result

Form Field Best Practices

Section titled “Form Field Best Practices”
Result

ContentEditable with Spell Check

Section titled “ContentEditable with Spell Check”
Result

Code Editor (No Spell Check)

Section titled “Code Editor (No Spell Check)”
Result

When to Use spellcheck

Section titled “When to Use spellcheck”

Enable Spell Checking (true)

Section titled “Enable Spell Checking (true)”

Use spellcheck="true" for:

  • Text content: Messages, comments, reviews
  • Long-form text: Articles, blog posts, documentation
  • User names: Personal names can have typos
  • Descriptions: Product descriptions, bios
  • General text input: Any natural language content
<textarea spellcheck="true" placeholder="Write your review..."></textarea>
<div contenteditable="true" spellcheck="true">Blog post content...</div>
<input type="text" spellcheck="true" placeholder="Your name">

Disable Spell Checking (false)

Section titled “Disable Spell Checking (false)”

Use spellcheck="false" for:

  • Email addresses: [email protected] shouldn’t be checked
  • Usernames: Often contain non-words
  • Technical codes: API keys, passwords, tokens
  • URLs: Web addresses aren’t dictionary words
  • Code blocks: Programming code
  • Search fields: Searches may be intentionally misspelled
  • Product SKUs: Model numbers and identifiers
<input type="email" spellcheck="false">
<input type="password" spellcheck="false">
<input type="search" spellcheck="false">
<input type="text" name="sku" spellcheck="false">
<pre contenteditable="true" spellcheck="false"><!-- Code --></pre>

Best Practices

Section titled “Best Practices”

1. Match Field Purpose

Section titled “1. Match Field Purpose”

Set spellcheck based on what users will enter:

<!-- Good practices -->
<input type="text" name="fullname" spellcheck="true">
<input type="email" name="email" spellcheck="false">
<input type="tel" name="phone" spellcheck="false">
<textarea name="bio" spellcheck="true"></textarea>
<input type="text" name="username" spellcheck="false">

2. Disable for Code and Technical Content

Section titled “2. Disable for Code and Technical Content”
<pre><code contenteditable="true" spellcheck="false">
  const myVariable = 'value';
</code></pre>

3. Consider User Experience

Section titled “3. Consider User Experience”
<!-- Search: Users might intentionally misspell -->
<input type="search" spellcheck="false">


<!-- Product search: Allow flexible queries -->
<input type="text" placeholder="Search products..." spellcheck="false">


<!-- Feedback form: Check spelling -->
<textarea placeholder="Your feedback..." spellcheck="true"></textarea>

4. Set on Parent for Consistency

Section titled “4. Set on Parent for Consistency”

The attribute inherits, so set it on containers:

<form spellcheck="false">
  <!-- All inputs inherit spellcheck="false" -->
  <input type="text" name="username">
  <input type="email" name="email">
  <input type="password" name="password">


  <!-- Override for specific fields -->
  <textarea name="bio" spellcheck="true"></textarea>
</form>

5. Don’t Rely on Spell Check Alone

Section titled “5. Don’t Rely on Spell Check Alone”

Spell checking doesn’t replace validation:

// Still validate on submit
form.addEventListener('submit', (e) => {
  const email = emailInput.value;
  if (!isValidEmail(email)) {
    e.preventDefault();
    showError('Invalid email format');
  }
});

Browser Behavior

Section titled “Browser Behavior”

Default Behavior

Section titled “Default Behavior”

Browsers have different defaults:

  • Textareas: Usually enabled by default
  • Input fields: Usually enabled for type="text", disabled for specialized types
  • Contenteditable: Usually enabled by default
  • Inherit: Elements inherit from parent if not specified

Visual Indication

Section titled “Visual Indication”

Browsers mark spelling errors differently:

  • Red wavy underline: Most common (Chrome, Firefox, Safari)
  • Context menu: Right-click shows suggestions
  • Autocorrect: Mobile browsers may auto-correct

JavaScript Interaction

Section titled “JavaScript Interaction”

Toggle Spell Check Dynamically

Section titled “Toggle Spell Check Dynamically”
const editor = document.getElementById('editor');


// Enable
editor.spellcheck = true;
editor.setAttribute('spellcheck', 'true');


// Disable
editor.spellcheck = false;
editor.setAttribute('spellcheck', 'false');


// Get current value
console.log(editor.spellcheck); // true or false

Check if Spell Check is Supported

Section titled “Check if Spell Check is Supported”
// All modern browsers support spellcheck
if ('spellcheck' in document.createElement('input')) {
  console.log('Spell check supported');
}

Handle Spell Check Events

Section titled “Handle Spell Check Events”
// There are no specific spell check events
// Use input events to handle text changes
editor.addEventListener('input', () => {
  console.log('Content changed:', editor.value);
});

Language Considerations

Section titled “Language Considerations”

Browser Uses System Language

Section titled “Browser Uses System Language”

Spell checking uses the browser’s or system’s dictionary:

<!-- Spell check uses the language from lang attribute -->
<textarea lang="en" spellcheck="true">Color</textarea>
<textarea lang="en-GB" spellcheck="true">Colour</textarea>
<textarea lang="es" spellcheck="true">Hola</textarea>

Multiple Languages

Section titled “Multiple Languages”
<!-- Document in English -->
<html lang="en">
<body>
  <!-- Quote in Spanish -->
  <blockquote lang="es" contenteditable="true" spellcheck="true">
    Buenos días
  </blockquote>
</body>
</html>

Accessibility Considerations

Section titled “Accessibility Considerations”

Screen Readers

Section titled “Screen Readers”

Screen readers typically:

  • Don’t announce spelling errors automatically
  • Users must navigate character-by-character to find errors
  • Some screen readers have separate spell check commands

Provide Alternative Feedback

Section titled “Provide Alternative Feedback”

Don’t rely only on visual spell check indicators:

<textarea aria-describedby="spell-help" spellcheck="true"></textarea>
<div id="spell-help">
  Spelling suggestions appear on right-click or long-press
</div>

Common Pitfalls

Section titled “Common Pitfalls”

Mobile Considerations

Section titled “Mobile Considerations”

Autocorrect vs Spell Check

Section titled “Autocorrect vs Spell Check”

On mobile devices:

  • spellcheck: Shows red underlines
  • autocorrect: Automatically fixes typos
<!-- Control both on mobile -->
<input
  type="text"
  spellcheck="false"
  autocorrect="off"
  autocapitalize="none">

Virtual Keyboard Behavior

Section titled “Virtual Keyboard Behavior”

Mobile keyboards may:

  • Auto-correct despite spellcheck="false"
  • Show suggestions above keyboard
  • Auto-capitalize first letters

Browser Support

Section titled “Browser Support”

Universal support across all modern browsers:

BrowserSupportNotes
ChromeAll versionsUses system dictionary
Firefox2.0+Custom dictionaries supported
Safari3.0+macOS spell checker integration
EdgeAll versionsWindows spell checker
MobileiOS 5+, Android 4+Integrated with system keyboard
Section titled “Related Attributes”

Specifications

Section titled “Specifications”