React JS: Turn off input field autocomplete Suggestions

How to turn off the browser autocomplete suggestions for input fields in our React App. Form input fields may get suggestions based on previous inputs. This can be sometimes annoying for the users and need to be avoided.

Autocomplete feature can be disabled easily by setting the HTML attribute for the <input> tag.

autocomplete="off"

autocomplete=”off” not working in React JS

If we directly use the autocomplete=”off” in our react code as we use in HTML code it may throw some error. So in the React JS app we need to use as with camel casing like,

autoComplete="off"

Example Code: Disable autocomplete for all input fields of the form

<form autoComplete="off" >

   <input name="phone" type="number" placeholder="enter phone number" />

   <input name="username" type="text" placeholder="enter username " />

   <button> Save </button>

</form>

Example Code: Disable autocomplete for one input field

<form>

   <input name="phone" type="number" placeholder="enter phone number" autoComplete="off" />

   <input name="username" type="text" placeholder="enter username " />

   <button> Save </button>

</form>

So from the above example codes, you have got an idea of how to use autoComplete off in React JS. Browser autocomplete can be disable for all form fields as well as individual field.

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published.