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.
autocapitalize
Controls automatic capitalization on mobile virtual keyboards. Pair with inputmode for complete mobile keyboard control.
Overview
The autocapitalize attribute controls whether and how the virtual keyboard automatically capitalizes text as the user types. It affects only mobile and tablet virtual keyboards — physical keyboards and desktop browsers are unaffected.
Applies to: <input> (text types), <textarea>, and any element with contenteditable
Values
| Value | Behavior | Use Case |
|---|---|---|
none / off | No automatic capitalization | Usernames, email addresses, URLs, codes |
sentences | Capitalize the first letter of each sentence (the default) | General prose, comments, descriptions |
words | Capitalize the first letter of each word | Name fields, titles, headings |
characters | All characters uppercase | License plates, booking references, country codes |
Basic usage
<!-- Default: capitalize the first letter of each sentence --><label for="bio">Bio</label><textarea id="bio" autocapitalize="sentences" rows="3"></textarea> <!-- Capitalize the first letter of each word (name fields) --><label for="full-name">Full Name</label><input type="text" id="full-name" autocapitalize="words" autocomplete="name" /> <!-- No capitalization (usernames, codes) --><label for="handle">Username</label><input type="text" id="handle" autocapitalize="none" />Practical Examples
All-Caps Input
Use characters for fields where the value is always uppercase. The keyboard shifts to caps lock mode so the user does not need to toggle it manually.
Uppercase fields
<!-- All characters uppercase (license plates, country codes) --><label for="plate">License Plate</label><input type="text" id="plate" autocapitalize="characters" maxlength="8" placeholder="ABC 1234" /> <!-- Airline booking reference --><label for="booking">Booking Reference</label><input type="text" id="booking" autocapitalize="characters" maxlength="6" pattern="[A-Z0-9]{6}" placeholder="XK49BT" />Registration Form
A complete form demonstrating appropriate autocapitalize values for different field types.
Registration form
<form class="stacked"> <label for="first-name">First Name</label> <input type="text" id="first-name" autocapitalize="words" autocomplete="given-name" /> <label for="last-name">Last Name</label> <input type="text" id="last-name" autocapitalize="words" autocomplete="family-name" /> <label for="email">Email</label> <input type="email" id="email" autocomplete="email" /> <label for="username">Username</label> <input type="text" id="username" autocapitalize="none" autocomplete="username" /> <label for="notes">Notes</label> <textarea id="notes" autocapitalize="sentences" rows="3"></textarea> <button type="submit">Create Account</button></form>Contenteditable
The attribute also works on contenteditable elements, providing the same keyboard behavior outside of form fields.
Contenteditable
<!-- Contenteditable with autocapitalize --><div contenteditable="true" autocapitalize="sentences"> Start typing here. The first letter of each sentence will be capitalized.</div>Pairing with inputmode
For complete mobile keyboard control, combine autocapitalize with inputmode. Together they determine both the keyboard layout and the capitalization behavior:
inputmode="text" autocapitalize="words"— text keyboard with title-case capitalization for name fieldsinputmode="text" autocapitalize="none"— text keyboard with no auto-caps for usernamesinputmode="url"— URL keyboard (autocapitalize has no effect since URLs are case-insensitive in practice)
Automatic Handling
Some input types ignore autocapitalize because the browser already knows the correct behavior:
type="email"— no capitalization (email addresses are lowercase)type="url"— no capitalizationtype="password"— no capitalization
For these types, setting autocapitalize has no effect. The browser does the right thing automatically.
Accessibility
- No impact on assistive technology. The
autocapitalizeattribute does not change how screen readers announce the field or its content. - Reduces input friction. Correct capitalization settings prevent mobile users from needing to manually toggle Shift, which is especially helpful for users with motor impairments.
- Pair with
autocomplete. Fields like names benefit from bothautocapitalize="words"andautocomplete="name"— the former helps manual entry while the latter enables autofill.
Limitations
- Desktop has no effect: Physical keyboards and desktop browsers ignore this attribute entirely. It is purely a mobile optimization.
- Keyboard-app dependent: Virtual keyboard apps may interpret values differently. Most major keyboards (iOS, Gboard, Samsung Keyboard) support all four values, but third-party keyboards may not.
- Suggestion only: The attribute is a hint, not a constraint. Users can still manually change capitalization. It does not validate or transform the submitted value.
- No mid-word control: You cannot capitalize specific characters within a word (e.g., camelCase). The attribute operates at the sentence, word, or character level only.
See Also
inputmode— control which virtual keyboard layout appearsenterkeyhint— control the Enter key label on virtual keyboardsautocorrect— control automatic text correction on mobilespellcheck— enable or disable browser spell-checkingautocomplete— browser autofill hints