References

Beginner-friendly references for web development, with live, editable examples.

The HTML commandfor attribute

Attribute Updated
In short

The HTML commandfor attribute names the element a <button> controls, by its id. Paired with command, as in <button commandfor="menu" command="toggle-popover">, it opens and closes dialogs and popovers without JavaScript.

Overview

The HTML commandfor attribute connects a <button> to the element it controls, by that element's id. Together with the command attribute, it lets a button open a dialog, close it or toggle a popover without any JavaScript.

The built-in commands are show-modal, close and request-close for a <dialog>, and show-popover, hide-popover and toggle-popover for an element with the popover attribute. Each valid command first fires a cancelable command event on the target.

A custom command starts with two dashes, such as --rotate, and only fires that event, with event.command and event.source set, for your own script to handle. The target must be in the same tree as the button, and a built-in command has to suit it. In our Chrome test, show-modal aimed at a plain div did nothing and fired no event.

Inside a form, give the button type="button". The HTML standard stops a typeless button with commandfor from being a submit button, but within a form such a button then does nothing at all, which our Chrome test confirmed. With close or request-close, the button's value becomes the dialog's returnValue.

Support is recent. MDN's compatibility data lists commandfor in Chrome and Edge 135, Firefox 144 and Safari 26.2, with request-close arriving in Chrome 139. Older browsers ignore the attributes, so keep a script fallback if those visitors matter.

Syntax

<button type="button" commandfor="confirm" command="show-modal">Delete account</button>
<dialog id="confirm">
  <p>Delete your account?</p>
  <button commandfor="confirm" command="close" value="cancel">Cancel</button>
</dialog>

Values

Value
The id of the target element.

Example

Live example 
<button commandfor="tips" command="toggle-popover">Show tips</button>
<div id="tips" popover>
  <p>Press Esc or click outside to close this popover.</p>
  <button commandfor="tips" command="hide-popover">Close</button>
</div>
<button commandfor="about" command="show-modal">Open dialog</button>
<dialog id="about">
  <p>This dialog opened without any JavaScript.</p>
  <button commandfor="about" command="close">Close</button>
</dialog>

Best practices

  • Point commandfor at a unique id in the same tree as the button. Match the command to the kind of element it targets.
  • Add type="button" to command buttons placed inside a form.
  • Prefer commandfor over click handlers for opening dialogs and popovers, since it works before your scripts load.
  • Use request-close instead of close when the dialog should be able to veto closing through its cancel event.

Frequently asked questions

How does the commandfor attribute work?
The commandfor attribute tells a button which element to control, using that element's id. The command attribute then says what to do, such as show-modal or toggle-popover.
What commands can I use with commandfor?
The commandfor attribute works with show-modal, close and request-close for dialogs and with show-popover, hide-popover and toggle-popover for popovers. Custom commands starting with two dashes fire a command event for your own script.
Why does my commandfor button do nothing inside a form?
A commandfor button without a type attribute does nothing when it sits in a form. Add type=button so the command runs.
What is the difference between commandfor and popovertarget?
The commandfor attribute is a more general version of popovertarget. Both can toggle popovers, but only commandfor can also open and close dialogs and send custom commands.
How do I listen for a custom command from commandfor?
Add a command event listener to the target element and read event.command. A button with commandfor and command=--spin fires that event with command set to --spin and source set to the button.
Which browsers support commandfor?
MDN lists commandfor in Chrome and Edge 135, Firefox 144 and Safari 26.2. Older versions ignore the attribute, so keep a JavaScript fallback for them if needed.
command content