Attribute inert

A global attribute that makes an element unavailable for browsers and assistive technologies. The word inert can be literally translated as "inert". That is, an element that is idle or does nothing 😴

        
          
          <p>Data is loading...</p><form inert>  <fieldset>    <legend>License expiration date</legend>    <label for="start">Start date</label>    <input type="date" id="start">    <label for="end">End date</label>    <input type="date" id="end">    <button>Apply</button>  </fieldset></form>
          <p>Data is loading...</p>
<form inert>
  <fieldset>
    <legend>License expiration date</legend>
    <label for="start">Start date</label>
    <input type="date" id="start">
    <label for="end">End date</label>
    <input type="date" id="end">
    <button>Apply</button>
  </fieldset>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Add the inert attribute to any tag. This is a boolean attribute, so it has no values.

inert removes the element from the navigation order and from the accessibility tree. This means that it cannot be clicked, focused, input data, or found through a page search. Screen readers do not read the content of such elements and do not announce roles. This resembles the behavior of another global attribute disabled, but there is a difference — inert can be assigned to any tag or group of tags.

inert has no styles by default. However, text inside a block or element with inert cannot be highlighted, while in the case of disabled it can. If a button has custom styles on hover and focus, the button with inert ignores them without additional effort, unlike disabled.

Although inert can be used for all tags, it is better to use disabled for individual buttons and other interactive elements. Cases in which inert is used:

• to temporarily deactivate an area with loading elements;
• to remove the page content from the navigation order when a modal window is open.

Keep in mind that it is better not to use inert for areas with important elements. For example, to deactivate part of a form until another part is filled out.

Don't forget to style elements with inert when it's important. For example, a temporarily inactive button or field. If you miss this step, users will find it hard to identify visual differences between active and "inert" elements. In the case of a modal window, it is worth styling ::backdrop, while leaving inert untouched.

        
          
          [inert], [inert] * {  opacity: 0.7;  pointer-events: none;  cursor: default;  user-select: none;}
          [inert], [inert] * {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 When using the .showModal() method to show <dialog>, browsers will automatically add inert to the rest of the content.