How to disable autocomplete for input field in html/react/vue

In this quick tutorial, we will learn how to disable or turn off autocomplete for input fields such as text, number etc in raw html, react.js, vue.js and any js framework.

using html autocomplete attribute

HTML provides built-in solution to do this using autocomplete attribute. which can be used in any framework or UI library.

# disabling for single input field
<input type="text" autocomplete="off">

# disabling for entire form
<form autocomplete="off">

# example
<form autocomplete="off" method="post" action="/submit">
    <input autocomplete="off" name="username" type="text" />
</form>

Using style css attribute

Use this when you want to support old browsers.

<input type="text" style="display:none">
<input type="password" style="display:none">

Using Password type input field

This is usefull for login or signup forms when user shouldn’t use autocomplete to fill the password.

<input type="password" name="pwd" autocomplete="new-password">

This solutions are tested and works in all browsers and framworks. use according to your use cases.