This new HTML attribute will help you with loading states

Staying up to date with the latest developments in our standard web languages can be challenging, isn't it? However, I recently came across a new feature that proves to be immensely helpful for several use cases.

The new inert attribute

The inert attribute is a powerful new boolean attribute designed to provide precise control over the interactivity of an element. Its functionality allows developers to effortlessly determine when an element should be interactive or non-interactive, so no more user-select: none or pointer-events: none!

The best thing about this: Additionally, the inert attribute serves as an event and event bubbling inhibitor, while also deactivating focusing elements. This remarkable feature eliminates the need to individually disable children or manage event handlers on the element itself!

What could this be used for?

One of the primary applications that immediately comes to mind is utilizing the inert attribute for form elements. Consider a scenario where you have a form that submits data via fetch. Previously, you would have had to individually disable each input element or the entire form while also taking measures to prevent events from being triggered by the form or its inputs.

Now, with the introduction of the inert attribute, achieving this functionality is incredibly simple. By just adding <form inert> to the form element, you can effectively disable any interactive behavior associated with it during the submission process.

Furthermore, leveraging the inert attribute opens up exciting possibilities for user interface design. You could opt to style the elements with the inert attribute as transparent, giving users a clear visual cue that these elements are currently non-interactive. This enhances user understanding and provides a more intuitive user experience overall.

Code Example

<form inert>
  <!-- your form content here -->
</form>

@keyframes loading {
  0% {
    opacity: .3;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: .3;
  }
}

form[inert] {
  animation: loading 1s forwards infinite linear;
  opacity: .3;
}

Further reads

• MDN