Turn off autocomplete on an Input in React

avatar

Borislav Hadzhiev

Last updated: May 3, 2022

banner

Photo from Unsplash

Turn off autocomplete on an Input in React #

To turn off autocomplete on an input field in React, set the autoComplete prop to off or new-password, e.g. <input autoComplete="off" />. When autoComplete is set to off, the browser is not permitted to automatically enter a value for the field.

App.js
export default function App() { return ( <div> {/* 👇️ disable autocomplete on input fields */} <input type="text" id="message" autoComplete="off" /> <input type="password" id="password" autoComplete="new-password" /> <hr /> {/* 👇️ disable autocomplete for entire form */} <form autoComplete="off"> <input type="text" id="first" /> <input type="text" id="last" /> </form> </div> ); }

react autocomplete off

We can set the autoComplete prop to off or new-password to turn off autocomplete on an input field.

Notice that multi-word props are camelCased in React - autoComplete, and not autocomplete.

When the autoComplete prop is set to off, the browser is not allowed to automatically enter a value for this field.

App.js
<input type="text" id="message" autoComplete="off" />

However, in most browsers, setting autoComplete to off does not prevent a password manager from automatically filling in values in a form.

The new-password value can be set to avoid accidentally filling in an existing password or offer assistance in creating a secure password.

App.js
<input type="password" id="password" autoComplete="new-password" />

You can also set autoComplete to off directly on the form element if you want to turn off autocomplete for all fields in the form.

App.js
<form autoComplete="off"> <input type="text" id="first" /> <input type="text" id="last" /> </form>

When the autoComplete prop is set to off at the form level, the browser isn't allowed to automatically enter a value for any of the fields in the form.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.