HTML inert Attribute

HTML inert Attribute

The HTML inert attribute is a global Boolean attribute that makes an element and its flat tree descendants inert. Inert content cannot normally be focused, clicked, edited, or interacted with and is removed from the accessibility tree.

Syntax

The inert attribute is a Boolean attribute. Add it to an element to make that element and its flat tree descendants inert.

<div inert>
  <a href="/contact.html">Contact Us</a>
  <button type="button">Continue</button>
</div>

In this example, the link and button are displayed but cannot normally be focused or activated while their containing <div> is inert.

Boolean Attribute

Because inert is a Boolean attribute, its presence makes the element inert regardless of the text assigned to it.

<div inert>...</div>

Do not use values such as inert="false" to try to make an element interactive. The attribute is still present, so the element remains inert.

<!-- Still inert -->
<div inert="false">...</div>

To make the content interactive again, remove the inert attribute.

Elements That Use the inert Attribute

The inert attribute is a global attribute and can be specified on any HTML element, although it is most useful on containers that hold a section of content.

<section inert>
  <h2>Account Settings</h2>
  <label for="username">Username</label>
  <input type="text" id="username">
  <button type="button">Save</button>
</section>

How the inert Attribute Works

Applying inert to a container affects the container and its flat tree descendants. This allows an entire section of a user interface to be made inactive with one attribute.

Inert content cannot normally receive focus or be activated by clicking. Editable content cannot be edited, and inert content is excluded from the accessibility tree. Browsers can also prevent text selection and find-in-page matching for inert content, although support for every aspect of inert behavior can vary between browsers.

<div inert>
  <p>This section is temporarily unavailable.</p>
  <a href="/products.html">View Products</a>
  <input type="text" value="Cannot be edited">
  <button type="button">Submit</button>
</div>

The content can still be visible unless CSS or another mechanism is used to hide it. The inert attribute controls interaction; it does not automatically provide a visual indication that the section is inactive.

inert vs. disabled

The inert and disabled attributes can both prevent interaction, but they serve different purposes.

Use disabled when an individual supported form control should be unavailable. Use inert when an entire section of content and its descendants should temporarily be non-interactive.

Accessibility

The inert attribute removes the affected content from the accessibility tree, so assistive technologies do not normally expose that content to users while it is inert.

Because inert does not automatically change an element's appearance, provide an appropriate visual indication when visible content has been made inactive. Users should be able to understand which parts of the interface are available and which are temporarily unavailable.

A modal <dialog> displayed with showModal() can escape inertness inherited from its ancestors. The dialog itself can still be made inert by placing the inert attribute directly on it.

Common Mistakes

Do not use inert="false" to make an element interactive. Boolean attributes are enabled by their presence, so the attribute must be removed instead.

<!-- Incorrect -->
<div inert="false">
  <button type="button">Continue</button>
</div>

<!-- Interactive because inert is absent -->
<div>
  <button type="button">Continue</button>
</div>

Do not assume that inert hides content visually. If the content should also be hidden, use the appropriate HTML or CSS mechanism for that purpose.

Do not make important information inert unless users can access that information appropriately elsewhere or when the interface state changes. Inert content is unavailable to keyboard users and assistive technologies while the inert state is active.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The inert global attribute is widely supported in current core browsers. Some individual aspects of inert behavior can have different compatibility details.

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

The example contains an interactive section and an inert section. Try clicking the buttons, placing the cursor in the text fields, and using the Tab key to move through the controls.

Summary

The HTML inert attribute is a global Boolean attribute that makes an element and its flat tree descendants non-interactive. Inert content cannot normally receive focus, be clicked, or be edited and is removed from the accessibility tree. It is useful when an entire section of an interface should temporarily be unavailable rather than disabling individual controls one at a time.