Back to Biomejs

useValidAutocomplete

src/content/docs/linter/rules/use-valid-autocomplete.mdx

latest5.5 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.0` - Diagnostic Category: [`lint/a11y/useValidAutocomplete`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/autocomplete-valid`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/autocomplete-valid.md)

How to configure

json
{
	"linter": {
		"rules": {
			"a11y": {
				"useValidAutocomplete": "error"
			}
		}
	}
}

Description

Use valid values for the autocomplete attribute on input elements.

The HTML autocomplete attribute only accepts specific predefined values. This allows for more detailed purpose definitions compared to the type attribute. Using these predefined values, user agents and assistive technologies can present input purposes to users in different ways.

Examples

Invalid

jsx
<input type="text" autocomplete="incorrect" />
<pre class="language-text"><code class="language-text">code-block.jsx:1:20 <a href="https://biomejs.dev/linter/rules/use-valid-autocomplete">lint/a11y/useValidAutocomplete</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Use valid values for the </span><span style="color: Tomato;"><strong>autocomplete</strong></span><span style="color: Tomato;"> attribute.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;input type=&quot;text&quot; autocomplete=&quot;incorrect&quot; /&gt; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The autocomplete attribute only accepts a certain number of specific fixed values.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow the links for more information, </span> <span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose">WCAG 1.3.5</a></span><span style="color: lightgreen;"> </span> <span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">HTML Living Standard autofill</a></span><span style="color: lightgreen;"> </span> <span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN</a></span> </code></pre>

Valid

jsx
<>
  <input type="text" autocomplete="name" />
  <MyInput autocomplete="incorrect" />
</>

Options

json
{
	"linter": {
		"rules": {
			"a11y": {
				"useValidAutocomplete": {
					"options": {
						"inputComponents": [
							"MyInput"
						]
					}
				}
			}
		}
	}
}

Accessibility guidelines

Resources

</TabItem> </Tabs>