Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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. |
Basic usage
<!-- Focus the search box on page load --><label for="search">Search</label><input type="search" id="search" autofocus placeholder="Search..." /> <!-- Focus a select menu --><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 with autofocus
<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.
Popover with autofocus
<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.
Login form
<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
preventScrollwithelement.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.