Skip to content

Disable 1Password on form fields

Whenever I’m developing forms I get this annoying issue with 1Password trying to fill random fields.

Sounds like auto-complete='off' should do the trick, but it doesn’t. You need to add a special data-attribute: data-1p-ignore.

<div>
  <label htmlFor='lastname' className='text-sm text-neutral-800'>Last name</label>
  <input 
		 ...other attrs...
         
         data-1p-ignore
         
         type='text' 
         className='block w-full text-neutral-800 border rounded-sm p-2' 
         value={lastName}
         onChange={(e) => setLastName(e.target.value)}
  />
</div>

Here’s more info on how to design forms to work best with 1Password:

https://developer.1password.com/docs/web/compatible-website-design