Skip to content
Biome
Docs Blog Playground

noAutofocus (since v1.0.0)

Diagnostic Category: lint/a11y/noAutofocus

Sources:

Enforce that autoFocus prop is not used on elements.

Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.

Examples

Section titled Examples

Invalid

Section titled Invalid
<input autoFocus />
a11y/noAutofocus.js:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus />
      │        ^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus·/>
      │        ----------  

<input autoFocus="true" />
a11y/noAutofocus.js:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus="true" />
      │        ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus="true"·/>
      │        -----------------  

<input autoFocus={"false"} />
a11y/noAutofocus.js:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus={"false"} />
      │        ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus={"false"}·/>
      │        --------------------  

<input autoFocus={undefined} />
a11y/noAutofocus.js:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus={undefined} />
      │        ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus={undefined}·/>
      │        ----------------------

Valid

Section titled Valid
<input />
<div />
<button />
// `autoFocus` prop in user created component is valid
<MyComponent autoFocus={true} />

Resources

Section titled Resources
Section titled Related links