Skip to content

Linter Rule: Require autocomplete attributes on <input> tags

Rule: html-input-require-autocomplete

Description

Require an autocomplete attribute on <input> elements with types that support autocomplete functionality. This rule ensures that developers explicitly declare autocomplete behavior for form inputs.

Rationale

The HTML autocomplete attribute helps users complete forms by using data stored in the browser. This is particularly useful for people with motor disabilities or cognitive impairment who may have difficulties filling out forms online. Without an explicit autocomplete attribute, behavior varies across browsers and can lead to inconsistent user experiences.

If you prefer not to specify a specific autocomplete value, use autocomplete="on" to enable browser defaults or autocomplete="off" to explicitly disable it.

Affected Input Types

This rule applies to the following input types:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • range
  • search
  • tel
  • text
  • time
  • url
  • week

Examples

✅ Good

erb
<input type="email" autocomplete="email">

<input type="url" autocomplete="off">

<input type="password" autocomplete="on">

🚫 Bad

erb
<input type="email">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)
<input type="url">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)
<input type="password">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)

References

Released under the MIT License.