The HTML inert Attribute Explained

Sometimes a part of a page should still exist, but users should not be able to interact with it.

Maybe a form is saving. Maybe one panel is inactive while another is open. Maybe part of the interface should be unavailable until a setup step is complete.

In the past, developers often tried to manage every link, button, and input separately.

The HTML inert attribute gives us a much simpler way to disable an entire section. It has been widely available in modern browsers since 2023.

The basic idea

<div inert>
  <a href="/account/">Account</a>
  <button>Save</button>
  <input type="text">
</div>

Everything inside the element becomes inert.

Users cannot normally click controls, focus them with the keyboard, or edit fields. The content is also removed from the accessibility tree while it is inert.

A disabled settings section

<section class="advanced-settings" inert>
  <h2>Advanced settings</h2>

  <label>
    API key
    <input type="text">
  </label>

  <button>Save</button>
</section>

Without inert, you might need to disable every form control separately.

Changing it with JavaScript

const settings = document.querySelector(".advanced-settings");

settings.inert = true;

Enable it again:

settings.inert = false;

This is much easier than looping through every child element.

inert is not disabled

disabled is meant for form controls:

<button disabled>
  Save
</button>

This does not disable a whole section:

<section disabled>
  ...
</section>

For a group of content, inert is the more suitable tool.

inert is not aria-hidden

aria-hidden="true" hides content from assistive technology, but it does not automatically stop mouse or keyboard interaction.

<div aria-hidden="true">
  <button>Still potentially clickable</button>
</div>

That can create an accessibility problem.

If your goal is that an entire area should be inactive, inert is usually closer to what you mean.

It does not hide content visually

This remains visible:

<div inert>
  This is still visible.
</div>

You may want a visual cue:

[inert] {
  opacity: 0.6;
}

But do not rely only on opacity if users need to know why the area is disabled.

A short explanation may be clearer.

A loading example

<form id="profile-form">
  ...
</form>

const form = document.querySelector("#profile-form");

async function saveProfile() {
  form.inert = true;

  try {
    await sendData();
  } finally {
    form.inert = false;
  }
}

This can be cleaner than disabling every field and button.

You should still show a clear saving state so the user understands what is happening.

For a real modal, the native <dialog> element is usually better.

When opened with:

dialog.showModal();

the browser already handles much of the background interaction state.

Do not rebuild a modal around inert if <dialog> already fits.

Find-in-page is affected

One detail people may not expect is that inert content is also skipped by normal browser interaction such as find-in-page.

That is another reason not to use inert simply as a styling trick.

Use it when a section is truly inactive.

A small visual style

[inert] {
  opacity: 0.65;
}

That may be enough for a disabled form area.

For something more important, add text explaining the state.

When I would use it

Good cases include:

For one disabled button, use disabled.

For content that should disappear, use a proper hidden state.

For a modal, prefer <dialog>.

The useful part of inert is that it lets you describe the state of a whole section once:

<section inert>
  ...
</section>

That is simpler and gives the browser a much clearer idea of what you want.