spellcheck Attribute

By  on  

Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?  Let's take a look at how it's used!

The HTML

The spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):

<!-- spellcheck everything! -->
<input type="text" spellcheck="true" /><br />
<textarea spellcheck="true"></textarea>
<div contenteditable="true" spellcheck="true">I am some content</div>

<!-- spellcheck nothing! -->
<input type="text" spellcheck="false" /><br />
<textarea spellcheck="false"></textarea>
<div contenteditable="true" spellcheck="false">I am some content</div>

You can use spellcheck on INPUT, TEXTAREA, and contenteditable elements.  The spellcheck attribute works well paired with the autocomplete, autocapitalize, and autocorrect attributes too!

We've all filled out form fields on our mobile and desktop devices which check spelling or grammer and probably shouldn't.  The spellcheck attribute can save us from that embarrassment when used properly!

Recent Features

Incredible Demos

Discussion

  1. Peter Kasting

    Wait a minute, how is this new? I helped spec the spellcheck attribute, and implement it in Firefox, in 2006.

    • Thank your for letting me know Peter — apparently I was misled!

  2. Guess it’s one of the lesser known features in HTML, even if it’s been around for a while.

  3. First time that I’ve heard about it, thus: appreciated!

  4. Josh

    It seems like it doesn’t respect lang attribute, for instance:

    <div lang="en" spellcheck="true" contenteditable="true">One, two, three...</div>
    <div lang="de" spellcheck="true" contenteditable="true">Ein, zwei, drei...</div>
    

    Any comment on that?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!