Published at
Updated at
Reading time

Disclaimer: be aware that turning off password manager functionality is generally a bad idea. The general rule is that it should always be the user's choice when to autofill an input field.

The WCAG Accessible Authentication criterion defines that filling forms with assistance like password managers must be possible. If you go against this rule, there must be a good reason. Ideally, this reason is evaluated with user testing.

A situation I can think of is a field that must have name="name" for technical reasons but doesn't match the account user name. Constantly popping up completion dialogs can harm UX in this situation. There are probably more situations. But the rule stands: always evaluate if it's worth breaking password autofill functionality for all users.

Thanks to Sandrine and Scott for providing feedback.

Let's get to it!

Flavio shared how to tell 1Password not to interact with an input element on localhost.

Graphic showing how to disable 1Password autofilling via the `data-1p-ignore` attribute

Ignoring the question of when you would want to turn off automatic password filling, how hard can it be to tell browsers and password managers not to mess with an input field?

As Flavio shared, 1Password relies on data-1p-ignore. Fair enough. This attribute is oddly specific, though.

How can you turn off auto-completion for LastPass users, then? Add data-lpignore="true" to your input field and change the "Advanced Settings". Easy. For Bitwarden it's data-bwignore.

But I'm a happy Dashlane user; how about this one? Dashlane created an entire spec called Semantically Annotated Web Forms to handle form completion. An easy data-form-type="other" will do it for this password manager.

Here's a complete attribute list.

PW managerTurn off attribute
1Passworddata-1p-ignore (Source)
Lastpassdata-lpignore="true" (Source)
Dashlanedata-form-type="other" (Source)
Bitwardendata-bwignore (Source)

And all these data attributes bring us to this beautiful markup to disable password managers for a form element.

<input type="password"
  autocomplete="off" data-1p-ignore data-bwignore
  data-lpignore="true" data-form-type="other">

Isn't it beautiful? And that's only the four password managers I know. I bet there are many others out there...

But to take a step back, isn't the autocomplete="off"'s job to turn off field completion?

As far as I understand, that was the idea behind the attribute, but here's a quote from MDN:

In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.

Ignoring autocomplete="off" is a conscious security, accessibility and UX decision. People often know best when they want to autofill a field.

Anyways... do you know any other tricks to turn off password managers? If so, I'd love to hear them because collecting the required attributes for 1Password, Dashlane, Bitwarden and LastPass took me reading way more Stack Overflow threads than it should have.

๐Ÿ‘ Shoutout to Kasper Mikiewicz, who provided the Bitwarden attribute.

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles