inert
The inert attribute makes an element and its descendants non-interactive. It is especially useful when modal UI is open and background content should temporarily stop receiving focus or pointer interaction.
Overview
The inert attribute makes an element and its descendants non-interactive. It is especially useful when modal UI is open and background content should temporarily stop receiving focus or pointer interaction.
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.
Related links
Powered by web-features