What is the HTML spellcheck Attribute?
The spellcheck attribute is a global attribute in HTML, meaning it can be applied to any HTML element. It is an enumerated attribute that tells the browser whether to check the spelling and grammar of text content within that element.
The spellcheck attribute provides a built-in way for browsers to check spelling and grammar in web forms and editable content. This HTML5 feature has been widely available across all major browsers since 2017, making it a reliable tool for improving user input quality without requiring external libraries or APIs.
Attribute Values
The spellcheck attribute accepts three values:
spellcheck="true"- Explicitly enables spell checkingspellcheck="false"- Explicitly disables spell checking- Empty string - Inherits the spellcheck state from the nearest ancestor
Default Behavior
When the spellcheck attribute is not specified, the browser uses its default value for that element type. This default may also be inherited from parent elements if the attribute is set to an empty string.
1<!-- Enable spell checking -->2<textarea spellcheck="true"></textarea>3 4<!-- Disable spell checking -->5<input type="text" spellcheck="false">6 7<!-- Inherit from parent -->8<div spellcheck="true">9 <p spellcheck="">Inherits true</p>10</div>Supported Elements and Browser Behavior
The spellcheck attribute works on elements that accept text input or contain editable content:
<input type="text">and other text-based input types<textarea>elements- Elements with
contenteditable="true" - Any element with
designMode="on"
These elements are commonly found across different types of websites, from simple blogs to complex web applications.
Important Note
Browsers are not required to check for spelling errors even when spellcheck="true" is set. The attribute serves as a hint to the browser rather than a mandatory instruction.
JavaScript Control with the spellcheck Property
The HTMLElement.spellcheck property provides programmatic access to the spellcheck state. This property is available on all HTML elements and reflects the value of the HTML spellcheck attribute.
Getting and Setting spellcheck in JavaScript
// Check if spell checking is enabled
const isEnabled = document.getElementById('myTextarea').spellcheck;
// Enable spell checking
document.getElementById('myTextarea').spellcheck = true;
// Disable spell checking
document.getElementById('myTextarea').spellcheck = false;
1const textarea = document.getElementById('user-input');2const toggle = document.getElementById('spellcheck-toggle');3 4toggle.addEventListener('change', (e) => {5 textarea.spellcheck = e.target.checked;6});When to Disable spellcheck
Consider setting spellcheck="false" for elements that can contain:
- Passwords and sensitive credentials
- Personal identification numbers
- Confidential business information
- Payment card numbers
<!-- Disable for code-like inputs -->
<input type="text" name="username" spellcheck="false">
<input type="email" name="email" spellcheck="false">
<!-- Disable for password fields -->
<input type="password" name="password" spellcheck="false">
When building web forms, always evaluate each field's content type to determine the appropriate spellcheck setting.
Enable for User Input
Use spellcheck="true" for comments, messages, and content where spelling accuracy matters
Disable for Code
Set spellcheck="false" for code inputs, usernames, and technical content
Consistent Experience
Maintain consistent spellcheck behavior across similar field types in your forms
1<!-- Enable spell checking for comments -->2<textarea name="comment" spellcheck="true" rows="4">3</textarea>4 5<!-- Enable for contenteditable sections -->6<div contenteditable="true" spellcheck="true">7 Editable content with spell checking enabled8</div>9 10<!-- Disable for usernames and codes -->11<input type="text" name="username" spellcheck="false">12<input type="text" name="promo-code" spellcheck="false">Browser Compatibility
The spellcheck attribute and property are widely available across all major browsers:
| Browser | Support |
|---|---|
| Chrome | Full Support |
| Firefox | Full Support |
| Safari | Full Support |
| Edge | Full Support |
This feature has been available across browsers since November 2017, making it safe to use in production web applications. Combined with proper web optimization techniques, you can create fast, user-friendly forms.
Conclusion
The spellcheck attribute provides a simple, built-in way to improve user input quality in web forms. By understanding when to enable and disable spell checking, developers can create better user experiences while maintaining appropriate security boundaries for sensitive data.
Key Takeaways
- Use
spellcheck="true"for user input where spelling accuracy matters - Use
spellcheck="false"for code, usernames, and sensitive data - The attribute is a hint - browsers may not always respect it
- Consider security implications when dealing with third-party spell checkers
- The feature is universally supported in modern browsers
Frequently Asked Questions
Does spellcheck work on all HTML elements?
While the spellcheck attribute is a global attribute and can be applied to any element, it only has a practical effect on elements that accept text input (like input, textarea) or contain editable content (contenteditable elements).
Can I rely on spellcheck for form validation?
No, spellcheck provides real-time feedback but is not a replacement for proper form validation. It helps users catch spelling errors but does not prevent form submission or validate against business rules.
Why should I disable spellcheck for some fields?
For security and user experience. Fields containing code, usernames, email addresses, or sensitive data should have spell checking disabled to prevent false positives and protect user privacy.
Is spellcheck supported on mobile browsers?
Yes, spell checking is supported on mobile browsers including Safari on iOS and Chrome on Android. The behavior may vary slightly between browsers.