HTML autofocus Attribute

HTML autofocus Attribute

The HTML autofocus attribute automatically gives focus to an eligible element when a page loads or when a <dialog> containing the element is displayed. It is a Boolean attribute commonly used with form controls when one field should be ready for immediate user interaction.

Syntax

The autofocus attribute is added to an element that should automatically receive focus.

<input type="text" autofocus>

Because autofocus is a Boolean attribute, its presence enables the behavior and no value is required.

Attribute Value

Elements That Use the autofocus Attribute

The autofocus attribute is a global attribute and can be specified on HTML elements. It is useful on elements that are capable of receiving focus, including form controls and editable elements.

Using the autofocus Attribute

A common use of autofocus is to place the cursor in the first important text field when a page loads.

<label for="search">Search:</label>
<input type="search" id="search" name="search" autofocus>

When the page loads, the search field can receive focus immediately so the user can begin typing without first selecting the field.

Use autofocus on One Element

A document or dialog should not contain more than one element with the autofocus attribute. Automatic focus should identify a single starting point for user interaction.

<input type="text" name="first-name" autofocus>
<input type="text" name="last-name">

Choose the control that provides the most useful starting point rather than adding autofocus to several controls.

autofocus in a Dialog

The autofocus attribute can also identify the element that should receive focus when a <dialog> is displayed.

<dialog open>
  <label for="message">Message:</label>
  <textarea id="message" name="message" autofocus></textarea>
</dialog>

This allows the dialog to place focus on an appropriate interactive element when it is shown.

Accessibility Considerations

Use autofocus carefully. Automatically moving focus can be unexpected for users, particularly people using screen readers or other assistive technologies. It can also cause some mobile devices to display an on-screen keyboard immediately.

Autofocus is most appropriate when there is a clear reason for the user to begin interacting with a particular control immediately. Avoid using it merely for visual convenience.

Boolean Attribute

The autofocus attribute is a Boolean attribute. If it is present, it is considered enabled.

<!-- Autofocus enabled -->
<input type="text" autofocus>

<!-- Autofocus not enabled -->
<input type="text">

Writing autofocus="false" does not disable autofocus because the attribute is still present. Remove the attribute entirely when automatic focus is not wanted.

Common Mistakes

Do not use autofocus="false" to disable automatic focus. Since autofocus is a Boolean attribute, remove it instead.

<!-- Correct: autofocus disabled -->
<input type="text">

Do not add autofocus to multiple elements in the same document or dialog. Select one appropriate element when automatic focus is needed.

Do not assume autofocus is always helpful. Moving focus automatically can interrupt the user's expected navigation and should be used only when it improves the interaction.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The autofocus global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the autofocus Attribute

The example uses autofocus on the first text field. When the example loads, that field should automatically receive focus.

Summary

The HTML autofocus attribute is a Boolean attribute that requests automatic focus for an eligible element when a page loads or when a dialog containing the element is displayed. Use it on only one appropriate element within a document or dialog and consider its effect on keyboard, mobile, and assistive technology users before adding it.