# jsx-a11y/autocomplete-valid

> Require `autoComplete` on an `input` to be a value that browsers know

Browsers and password managers use a field's `autocomplete` value to fill it in. With a value they don't know, such as `"mail"`, they guess or do nothing, and people who rely on autofill have to type everything.

The rule only checks values written as a string. An address field can have `billing` or `shipping` in front, as in `"shipping postal-code"`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/autocomplete-valid" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/autocomplete-valid" = ["error", {
  inputComponents = ["input"],
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const email = <input type="email" autoComplete="mail" />;
const password = <input type="password" autoComplete="password" />;
```

Not reported:

{/* good */}
```jsx
const email = <input type="email" autoComplete="email" />;
const password = <input type="password" autoComplete="current-password" />;
const zip = <input type="text" autoComplete="shipping postal-code" />;
const other = <input type="text" autoComplete={field.hint} />;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `inputComponents` | `["input"]` | The elements and components to check. Your list replaces the default, so keep `"input"` in it. |

{/* bad {"options": [{"inputComponents": ["input", "TextField"]}], "count": 2} */}
```jsx
const email = <TextField autoComplete="mail" />;
const phone = <input autoComplete="phone" />;
```

{/* good {"options": [{"inputComponents": ["TextField"]}]} */}
```jsx
const phone = <input autoComplete="phone" />;
```

## When not to use it

The rule doesn't know every value that HTML allows. It reports the parts of a name, such as `given-name` and `family-name`, and the prefixes `home`, `work`, `mobile` and `section-`. If your forms use them, turn the rule off.

{/* bad {"count": 4} */}
```jsx
const first = <input autoComplete="given-name" />;
const last = <input autoComplete="family-name" />;
const phone = <input autoComplete="mobile tel" />;
const zip = <input autoComplete="section-gift shipping postal-code" />;
```