Browser Autofill

Name Done is an autocomplete API. How you show the results is up to you — a dropdown like the demo, some other widget, or no browser at all.

Should you show those results in a custom dropdown in a browser, native Autofill can cover your UI, and there is no single attribute that turns that off in every browser.

Several features, not one switch

People say Autofill for four different things. They look similar, but a trick that quiets one can make another louder.

Feature	What you see	Where
Typed history	Values you typed into a similar field last time.	Desktop browsers
Saved profile	Names, emails, phones, and addresses the browser has stored.	Chrome, Edge, Firefox, Safari
Contacts	Names from the device address book, often as a see-through list.	Safari, and any browser on iPhone
Password managers	Saved usernames and passwords, built-in or from an extension.	All browsers

Edge on a computer behaves like Chrome. Chrome, Edge, and Firefox on iPhone behave like Safari.

What to do

Use these together. Step 1 is the only real autocomplete setting. The rest stop the browser guessing this is a name, email, or address field.

Set `autocomplete="off"` on the form and the input

The value has to be the word off. Made-up values like chrome-off or nope are treated as on.

Helps: typed history in Chrome, Edge, and Firefox. Not enough on its own for saved profiles or Contacts.

Don't look like personal data

Browsers look at name, id, placeholder, and nearby text. Avoid words like name, email, address, country, and user. A unique name that includes search works well. The visible label can still say what the field is.

Helps: saved profiles in Chrome, Edge, and Firefox, and Contacts on Safari / iPhone. This is the main one once off is ignored.

Use `type="search"` for a lookup

Search fields look less like a checkout form. Hide the extra search decoration with CSS if you want an ordinary text field.

Helps: saved profiles and Contacts. Optional, but cheap.

Give the dropdown its own form

If the same form also collects the user's name or address, browsers treat every text field as more of the same. Point the dropdown input at a hidden <form autocomplete="off"> with the form attribute. Check required fields in JavaScript if you submit that way.

Helps: saved profiles and Contacts when the dropdown sits next to real name or address fields — the usual failure case.

Mark it as a combobox

role="combobox", aria-autocomplete="list", aria-expanded, and aria-controls pointing at the list. This is the right widget. It is not an Autofill off-switch.

Helps: keyboard and screen-reader users, and Edge's “results from saved info” flyout.

Leave login fields alone. Use username and current-password on sign-in, new-password when setting a password.

Keep it accessible

Don't hide the field from assistive tech to dodge Autofill. Aim for a dropdown people can actually use.

A real <label> in the page, linked to the input. Visible text is fine. Don't hide it with zero-width characters or CSS ::before.
Follow the ARIA combobox pattern: open and close the list, move with the arrows, dismiss with Escape. Screen readers should hear whether it is open and which option is active.
Don't pretend it is a password field. new-password on a name search confuses password managers and screen readers. Literal off plus a search field is honest.

Example

One way to wire a browser dropdown. Same attributes for any Name Done endpoint.

Custom dropdown

1const NO_AF = "no-browser-af"
2
3<>
4  <form id={NO_AF} autoComplete="off" hidden />
5  <form autoComplete="off" onSubmit={onSubmit}>
6    <label htmlFor="search-q">Search</label>
7    <input
8      id="search-q"
9      name="search-q"
10      form={NO_AF}
11      type="search"
12      role="combobox"
13      aria-autocomplete="list"
14      aria-expanded={open}
15      aria-controls="search-q-listbox"
16      placeholder="Start typing to search..."
17      autoComplete="off"
18    />
19  </form>
20  <ul id="search-q-listbox" role="listbox">
21    {results.map((r) => (
22      <li key={r.text} role="option">{r.text}</li>
23    ))}
24  </ul>
25</>

Optional CSS: hide Safari's Autofill icon (not the overlay) and Chrome's search decoration.

CSS

1input::-webkit-contacts-auto-fill-button,
2input::-webkit-credentials-auto-fill-button {
3  visibility: hidden;
4  display: none !important;
5  pointer-events: none;
6}
7input[type="search"]::-webkit-search-decoration,
8input[type="search"]::-webkit-search-cancel-button {
9  -webkit-appearance: none;
10}