HTML commandfor Attribute

HTML commandfor Attribute

The HTML commandfor attribute identifies the element that a <button> controls. It works with the command attribute to send built-in or custom commands to another element.

Syntax

The commandfor attribute is specified on a <button>. Its value identifies the element that receives the command specified by the button's command attribute.

<button commandfor="example-dialog" command="show-modal">Open Dialog</button>

<dialog id="example-dialog">
  ...
</dialog>

The commandfor value example-dialog matches the id of the targeted <dialog>.

Attribute Value

The value of commandfor is the ID of the element that the button controls.

The value is written without the # character used by CSS ID selectors.

Elements That Use the commandfor Attribute

The commandfor attribute applies to the <button> element.

Using commandfor with command

The commandfor and command attributes have different roles. commandfor identifies the target, while command specifies the action.

<button commandfor="my-dialog" command="show-modal">Open Dialog</button>

Here, my-dialog identifies the target and show-modal specifies what the button should ask that target to do.

Controlling Dialogs

The commandfor attribute can target a <dialog> and work with built-in commands such as show-modal, close, and request-close.

<button commandfor="info-dialog" command="show-modal">Open Dialog</button>

<dialog id="info-dialog">
  <p>Dialog content goes here.</p>
  <button commandfor="info-dialog" command="close">Close</button>
</dialog>

Both buttons target the same dialog but send different commands to it.

Controlling Popovers

A button can also target an element with the popover attribute and use commands such as show-popover, hide-popover, or toggle-popover.

<button commandfor="help" command="toggle-popover">Toggle Help</button>

<div id="help" popover>
  <p>Helpful information goes here.</p>
</div>

In this example, the commandfor value matches the id of the popover element.

Using Custom Commands

The target identified by commandfor can also receive a custom command. Custom command keywords begin with two hyphens and can be handled with JavaScript.

<button commandfor="message" command="--highlight">Highlight</button>

<p id="message">Example message</p>

When the button is activated, the targeted element receives a command event. JavaScript can inspect the command and perform the desired custom action.

commandfor and id

The commandfor attribute relies on an element's id to establish the relationship between the button and its target.

<button commandfor="settings" command="show-modal">Settings</button>

<dialog id="settings">
  ...
</dialog>

The commandfor value must match the target element's ID exactly. Do not include a CSS-style # before the ID.

Common Mistakes

Do not include a # character in the commandfor value.

<!-- Incorrect -->
<button commandfor="#my-dialog" command="show-modal">Open</button>

<!-- Correct -->
<button commandfor="my-dialog" command="show-modal">Open</button>

Do not give commandfor the command itself. The target ID belongs in commandfor, while the action belongs in command.

<!-- Incorrect -->
<button commandfor="show-modal">Open</button>

<!-- Correct -->
<button commandfor="my-dialog" command="show-modal">Open</button>

Make sure the target ID exists and is unique. If the value does not identify the intended element, the button cannot send its command to that target.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The commandfor attribute on the <button> element is supported in the latest core browser versions, but it may not work in older browser versions.

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 commandfor Attribute

The example uses two buttons that target the same <dialog>. One sends the show-modal command to open it, while the other sends the close command.

Summary

The HTML commandfor attribute identifies the element that a <button> controls. Its value matches the target element's id, while the accompanying command attribute specifies the action sent to that element. Together, these attributes can declaratively control dialogs and popovers or send custom commands for JavaScript to handle.