autocomplete
Browser autofill hints for one-tap form completion. The single most impactful attribute for form conversion on mobile devices.
Overview
The autocomplete attribute tells the browser what kind of data a field expects, enabling one-tap autofill. On mobile, this means users can complete an entire checkout form by tapping a single autofill suggestion instead of typing on a small keyboard.
Getting autocomplete values right is the single highest-impact change you can make for form conversion on mobile devices.
Applies to: <input>, <select>, <textarea>
Personal Information
| Value | Purpose |
|---|---|
name | Full name |
given-name | First name |
family-name | Last name |
honorific-prefix | Title (Mr., Dr., etc.) |
nickname | Display name or handle |
email | Email address |
tel | Full phone number with country code |
tel-national | Phone number without country code |
bday | Date of birth |
organization | Company or organization name |
organization-title | Job title |
<form class="stacked"> <label for="name">Full name</label> <input type="text" id="name" autocomplete="name" /> <label for="email">Email</label> <input type="email" id="email" autocomplete="email" /> <label for="tel">Phone</label> <input type="tel" id="tel" autocomplete="tel" /> <button type="submit">Continue</button></form>Address
Prefix address values with shipping or billing to distinguish multiple address forms on the same page.
| Value | Purpose |
|---|---|
street-address | Full street address (may be multiline) |
address-line1 | First line of street address |
address-line2 | Apartment, suite, unit |
address-level2 | City |
address-level1 | State, province, or region |
postal-code | ZIP or postal code |
country | Country code |
country-name | Country name (localized) |
<fieldset> <legend>Shipping address</legend> <label for="street">Street address</label> <input type="text" id="street" autocomplete="shipping street-address" /> <label for="city">City</label> <input type="text" id="city" autocomplete="shipping address-level2" /> <label for="state">State</label> <input type="text" id="state" autocomplete="shipping address-level1" /> <label for="zip">ZIP code</label> <input type="text" id="zip" autocomplete="shipping postal-code" inputmode="numeric" /> <label for="country">Country</label> <select id="country" autocomplete="shipping country"> <option value="US">United States</option> <option value="CA">Canada</option> <option value="GB">United Kingdom</option> </select></fieldset>Payment
| Value | Purpose |
|---|---|
cc-name | Cardholder name |
cc-number | Card number |
cc-exp | Expiration date (MM/YY) |
cc-exp-month | Expiration month |
cc-exp-year | Expiration year |
cc-csc | Security code (CVV/CVC) |
cc-type | Card type (Visa, Mastercard, etc.) |
<fieldset> <legend>Payment</legend> <label for="cc-name">Name on card</label> <input type="text" id="cc-name" autocomplete="cc-name" /> <label for="cc-number">Card number</label> <input type="text" id="cc-number" autocomplete="cc-number" inputmode="numeric" /> <label for="cc-exp">Expiration</label> <input type="text" id="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" /> <label for="cc-csc">Security code</label> <input type="text" id="cc-csc" autocomplete="cc-csc" inputmode="numeric" /></fieldset>Authentication
Use current-password for sign-in forms and new-password for registration or password-change forms. This distinction helps password managers generate and store passwords correctly.
| Value | Purpose |
|---|---|
username | Username or account identifier |
current-password | Existing password (sign-in) |
new-password | New password (registration or change) |
one-time-code | SMS or email verification code |
<form class="stacked"> <label for="username">Username</label> <input type="text" id="username" autocomplete="username" /> <label for="current-pw">Password</label> <input type="password" id="current-pw" autocomplete="current-password" /> <button type="submit">Sign in</button></form> <!-- Registration form --><form class="stacked"> <label for="new-user">Username</label> <input type="text" id="new-user" autocomplete="username" /> <label for="new-pw">Password</label> <input type="password" id="new-pw" autocomplete="new-password" /> <button type="submit">Create account</button></form>One-Time Codes
The one-time-code value triggers platform-specific autofill from SMS or email. On iOS, the verification code appears directly in the keyboard suggestions. On Android, it appears as a notification action. Pair with inputmode="numeric" for the right keyboard.
<!-- SMS / email verification code --><label for="otp">Verification code</label><input type="text" id="otp" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" />Special Values
| Value | Effect |
|---|---|
on | Browser determines the autocomplete type (default) |
off | Disable autofill for this field |
Note: Browsers may ignore autocomplete="off" for login fields. If you need to prevent autofill on a non-login field, use a non-standard value like autocomplete="nope" as a workaround.
See Also
<input>element reference<form>element reference- Checkout pattern for a complete example
- Registration pattern with proper autocomplete usage