inert
The inert global attribute is a Boolean attribute indicating that the element and all of its flat tree descendants become inert. The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked. The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.
Modal <dialog>s generated with showModal() escape inertness, meaning that they don't inherit inertness from their ancestors, but can be made inert by having the inert attribute explicitly set on themselves. No other element can escape inertness.
Note: While inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the disabled attribute, along with CSS :disabled styles, instead.
Inert HTML elements and their flat tree descendants:
Do not have click events fired when clicked on.
Cannot be focused and focus events cannot be fired on them.
Are not searchable via browser find-in-page features (none of their content is found/matched).
Disallow users from selecting text contained within their content — akin to using the CSS property user-select to disable text selection.
Cannot have otherwise-editable content edited. This includes, for example, the contents of textual <input> fields, and text elements with contenteditable set on them.
Are hidden from assistive technologies as they are excluded from the accessibility tree.
The following other features can be used to set an element and its descendants to an inert state:
The CSS interactivity property.
The HTMLElement.inert DOM property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 102 | 102 | 112 | 15.5 | 102 | 15.5 | |
| DOM API | ||||||
| The HTMLElement property inert reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building… | 102 | 102 | 112 | 15.5 | 102 | 15.5 |
inert (ignores find in page) Element is ignored for the purposes of find-in-page. | 124 | 124 | 120 | | 124 | |
| Other | ||||||
html.global_attributes.inert.ignores_find_in_page Element is ignored for the purposes of find-in-page. | 124 | 124 | 120 | | 124 | |
Syntax
<!-- Disable content behind in modal view --> <main inert> <p>This part cannot be clicked or focused</p> <a href="#">Link also disabled</a> </main> <dialog open> <p>Modal content</p> </dialog>Live demo
Inert attribute. Basics
Inert attribute in element and. descendant non-intarakti to.
modalafter. Disabledization
Disabledizationpattern. with modaldisplay time to backgroundcontent inert.
Use cases
-
Background content under modals
Mark the page content inert while a modal is active so users stay within the active interaction context.
-
Future steps in a wizard
Make unfinished sections inert until the user reaches that step, reducing accidental interaction.
Cautions
- Do not use inert as a visual-only disabled state if users still need to read or reference the content while it is blocked.
- Make sure the active element outside the inert subtree is obvious, otherwise the interface can feel frozen.
Accessibility
- When large areas become inert, explain why they are inactive and what the user should do next.
- Combine inert with clear focus management so assistive technology stays inside the current task.