autofocus

Automatically focuses an element when the page loads or a dialog opens. Use sparingly — unexpected focus changes can disorient users.

Overview

The autofocus attribute automatically moves keyboard focus to an element when the page loads, or when a popover or <dialog> opens. It is a boolean attribute — its presence activates the behavior.

Applies to: <input>, <select>, <textarea>, <button>, and any element with tabindex

Values

Value	Behavior
`autofocus` (present)	Element receives focus automatically when the page loads or its dialog/popover opens
(absent)	No automatic focus. The default.

<label for="search">Search</label> <input type="search" id="search" autofocus placeholder="Search..." />  <label for="priority">Priority</label> <select id="priority" autofocus> <option>Low</option> <option>Medium</option> <option>High</option> </select>

Only one per page. If multiple elements have autofocus, the browser focuses the last one in DOM order. This is rarely intentional — use it on exactly one element.

Dialog Interaction

Inside a <dialog>, the autofocus attribute fires when the dialog opens via showModal() or show(), not on page load. This is the recommended way to control initial focus inside modals.

If no element inside the dialog has autofocus, the dialog itself receives focus. For confirmation dialogs, place autofocus on the least-destructive action (typically "Cancel").

<dialog id="confirm-dialog"> <h2>Confirm Deletion</h2> <p>This action cannot be undone.</p> <footer> <button autofocus>Cancel</button> <button class="danger">Delete</button> </footer> </dialog> <script> document.getElementById('confirm-dialog').showModal(); // The "Cancel" button receives focus when the dialog opens, // not when the page loads. </script>

Popover Interaction

The same deferred behavior applies to popover elements. The autofocus fires when the popover is shown, giving you control over which element receives initial focus inside the popover.

<button popovertarget="settings-panel">Settings</button> <div id="settings-panel" popover> <h3>Quick Settings</h3> <label for="theme">Theme</label> <select id="theme" autofocus> <option>Light</option> <option>Dark</option> <option>System</option> </select> </div>

Practical Example

A login page where the username field is focused on load, letting the user start typing immediately.

<form class="stacked" action="/login" method="post"> <label for="username">Username</label> <input type="text" id="username" autofocus autocomplete="username" /> <label for="password">Password</label> <input type="password" id="password" autocomplete="current-password" /> <button type="submit">Log In</button> </form>

Accessibility

Use sparingly. Autofocus moves the reading position past all content before the focused element. Screen reader users may miss page headings, instructions, or error messages above the field.
Search pages are a good fit. When the entire purpose of a page is to enter a search query, autofocusing the search input matches user expectations.
Forms mid-page are risky. If a form sits below introductory content, autofocus will scroll past that content. Users who need the context before filling in the form are left disoriented.
Dialogs are a natural fit. Autofocus inside a dialog is expected behavior — the user just triggered the dialog and anticipates interacting with it.
Mobile impact: On mobile devices, autofocus may trigger the virtual keyboard immediately, obscuring half the viewport before the user has oriented themselves.

Limitations

Scrolls the page: If the autofocused element is below the fold, the browser scrolls to it. Use preventScroll with element.focus({ preventScroll: true }) in JavaScript if you need focus without scrolling.
No dynamic re-focus: The attribute only fires once — on page load or dialog/popover open. Changing the attribute via JavaScript after load has no effect. Use element.focus() instead.
Browser UI may override: Some browsers restore focus to the address bar or a previously focused field when the user navigates back, overriding autofocus.
Multiple autofocus: The spec says only the first element should receive focus, but browsers use the last one. Do not rely on either behavior — use it on exactly one element.