autoFocusProps

Reports autoFocus props that are not set to false.

✅ This rule is included in the jsx logical and logicalStrict presets.

Auto-focusing elements automatically grab the user’s focus, which is generally disruptive behavior. It can be particularly disruptive to users who rely on screen readers and/or keyboard navigation.

Consider letting users focus elements manually instead.

Examples

❌ Incorrect

<button autoFocus />

<button autoFocus="true" />
Error ts(2322)  ― Type 'string' is not assignable to type 'boolean | undefined'.

<input autoFocus={true} />

✅ Correct

<button />

<button autoFocus="false" />
Error ts(2322)  ― Type 'string' is not assignable to type 'boolean | undefined'.

<button autoFocus={false} />

When Not To Use It

If you have specific use cases where auto-focus is necessary for user experience (such as modal dialogs), you may want to disable this rule for those specific cases. Auto-focusing elements should only sparingly be used when explicitly triggered by users.

Further Reading

• WHATWG HTML Standard: The autofocus attribute

Equivalents in Other Linters

• ESLint: jsx-a11y/no-autofocus
• Oxlint: jsx_a11y/no-autofocus