Newly available Useful in modern browsers, but confirm support before making it a core requirement.

Invoker commands

The CommandEvent interface represents an event notifying the user when a button element with valid commandForElement and command attributes is about to invoke an interactive element.

This is the event object for the HTMLElement command event, which represents an action from an Invoker Control when it is invoked (for example when it is clicked or pressed).

Event CommandEvent

FormsInteraction

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CommandEvent
135
135
144
26.2
135
26.2
HTML attribute
command
135
135
144
26.2
135
26.2
commandfor
135
135
144
26.2
135
26.2
DOM API
command

The command read-only property of the CommandEvent interface returns a string containing the value of the HTMLButtonElement.command property at the time the event was dispatched.
135
135
144
26.2
135
26.2
CommandEvent

The CommandEvent() constructor creates a new CommandEvent object.
135
135
144
26.2
135
26.2
source

The source read-only property of the CommandEvent interface returns an EventTarget representing the control that invoked the given command.
135
135
144
26.2
135
26.2
command

The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set.
135
135
144
26.2
135
26.2
commandForElement

The commandForElement property of the HTMLButtonElement interface gets and sets the element to control via a button.
135
135
144
26.2
135
26.2
command_event

The command event of the HTMLElement interface fires on an element that is controlled via a HTMLButtonElement with valid HTMLButtonElement.commandForElement and HTMLButtonElement.command values, whenever the button is interacted with (e.g., it is clicked).
135
135
144
26.2
135
26.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<button commandfor="my-dialog" command="show-modal">
  Open the dialog
</button>
<dialog id="my-dialog">
  <p>Content</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Live demo

Command-driven popover

Use command and commandfor to toggle a related popover without custom script.

PreviewFullscreen

Command examples

Show the built-in actions commonly paired with commandfor.

PreviewFullscreen

Why it matters

Explain the value of declarative commands for simple UI relationships.

PreviewFullscreen

Use cases

  • Improve form input

    Use Invoker commands to make data entry more efficient, guided, or predictable inside real forms.

  • Reduce friction

    Apply Invoker commands when the browser can help users complete a task with fewer mistakes or less repetitive work.

Cautions

  • Test Invoker commands in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.

Related links