Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
autocorrect
Controls automatic text correction on mobile devices. Disable it for usernames, product codes, and technical content where correction would alter intended input.
Overview
The autocorrect attribute controls whether the browser or operating system automatically corrects text as the user types. When enabled, the system silently replaces what it believes are typos with dictionary words — helpful for prose, but destructive for technical content, codes, or identifiers.
Applies to: <input> (text types), <textarea>, and any element with contenteditable
Values
| Value | Behavior |
|---|---|
on | Automatic text correction is enabled (the default) |
off | Automatic text correction is disabled |
Basic usage
<!-- Disable autocorrect for a username field --><label for="username">Username</label><input type="text" id="username" autocorrect="off" autocapitalize="none" autocomplete="username" /> <!-- Leave autocorrect enabled for prose (the default) --><label for="comment">Comment</label><textarea id="comment" autocorrect="on" rows="4"></textarea>When to Disable Autocorrect
Autocorrect is designed for natural language. It actively harms input accuracy when the field expects non-dictionary content:
- Usernames and handles:
xKoder99gets corrected toCoder - Product codes and SKUs:
WX-4829gets broken by insertion of spaces or corrections - Technical terms: Programming keywords, CSS selectors, shell commands
- URLs and paths: File paths and API endpoints contain non-word segments
- Abbreviations: Domain-specific abbreviations are not in the system dictionary
- Invite codes and tokens: Random alphanumeric strings that must be entered exactly
Technical input fields
<!-- Product code: autocorrect would change valid codes to dictionary words --><label for="sku">Product Code</label><input type="text" id="sku" autocorrect="off" spellcheck="false" placeholder="WX-4829-BLK" /> <!-- API endpoint: correction would break URLs --><label for="endpoint">API Endpoint</label><input type="url" id="endpoint" autocorrect="off" placeholder="https://api.example.com/v1" /> <!-- Code snippet input --><label for="selector">CSS Selector</label><input type="text" id="selector" autocorrect="off" spellcheck="false" placeholder=".nav > .item:first-child" />Complete Text Input Control
For full control over mobile text input behavior, combine autocorrect with autocapitalize and spellcheck. Each controls a different aspect of the text assistance pipeline:
| Attribute | Controls | Visual Indicator |
|---|---|---|
autocorrect | Silent replacement of "typos" with dictionary words | None (corrections happen automatically) |
autocapitalize | Automatic uppercase on the first letter of sentences, words, or all characters | Keyboard Shift state |
spellcheck | Red underlines on words not in the dictionary | Wavy underlines |
Complete text input control
<form class="stacked"> <!-- Name: autocorrect on, capitalize words --> <label for="name">Full Name</label> <input type="text" id="name" autocorrect="on" autocapitalize="words" autocomplete="name" /> <!-- Username: all text assistance off --> <label for="handle">Username</label> <input type="text" id="handle" autocorrect="off" autocapitalize="none" spellcheck="false" autocomplete="username" /> <!-- Bio: all text assistance on --> <label for="bio">Bio</label> <textarea id="bio" autocorrect="on" autocapitalize="sentences" spellcheck="true" rows="3"></textarea> <!-- Invite code: all text assistance off --> <label for="invite">Invite Code</label> <input type="text" id="invite" autocorrect="off" autocapitalize="characters" spellcheck="false" /> <button type="submit">Save Profile</button></form>Accessibility
- Autocorrect helps with typos. For prose fields, leaving autocorrect enabled helps users — including those with motor impairments or dyslexia — produce accurate text with less effort.
- Unwanted corrections create frustration. When autocorrect changes a deliberately entered value, the user must notice the change and undo it. This is especially burdensome for users who cannot easily see the correction happening.
- No impact on screen readers. The attribute does not change how assistive technology announces the field.
Limitations
- Browser support is limited: Safari (iOS and macOS) is the primary browser that implements
autocorrect. Chrome and Firefox on Android rely on OS-level autocorrect settings and largely ignore this attribute. - OS-level correction may override: Even with
autocorrect="off", some mobile operating systems apply their own correction at the input method level, which the browser cannot control. - No granular control: You cannot selectively correct some words while leaving others alone. It is all or nothing per field.
- Not in the HTML spec (historically): The
autocorrectattribute was a non-standard Safari extension for years. It has since been proposed for standardization, but browser support remains uneven. - No desktop effect: Desktop browsers do not perform autocorrection, so the attribute has no visible impact on desktop.
See Also
autocapitalize— control automatic capitalization on mobile keyboardsspellcheck— enable or disable browser spell-checkinginputmode— control which virtual keyboard layout appearsautocomplete— browser autofill hints