inert

inert attribute

The inert attribute is a Boolean attribute that makes an element and all its child elements non-interactive, meaning they are ignored by the browser.

Syntax

<element inert></element>

Example

<h1>The inert Attribute</h1>
<div inert>
  <button onclick="alert(42)">Click me</button>
  <input type="text">
</div>
<p>The button, the link, and the input field above are disabled because of the inert attribute.</p>

Definition and Usage

The inert attribute disables user interaction with an element and its children.
Although the elements remain visible, they are non-functional: buttons and links cannot be clicked, input fields cannot be used, and screen readers will ignore them.

Applies to

The inert attribute is a global attribute and can be used on any HTML element.

See also

• HTML <dialog> element
• HTMLElement.inert HTML DOM property
• Introduction to the inert attribute
• The arrival of the inert attribute in modern web development

Conclusion

The inert attribute disables interactions with an element and its children, making them non-functional without altering their visual appearance. It’s useful for scenarios like modals or form validation. Although supported by modern browsers, compatibility with older versions should be considered.