The inert Attribute

The `inert` Attribute

Global Attribute

The inert attribute makes an element non-interactive by preventing all user interactions including clicks, focus, and selection, while keeping the element visible. It’s particularly useful for modal dialogs, disabled sections, and when you need to temporarily disable parts of your interface.

Syntax

<element inert>Content</element>

Values

Value	Description
Boolean (no value)	Element and its descendants become non-interactive

Examples

Basic Inert Element

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 600px; }
  .section {
    padding: 20px;
    margin: 15px 0;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: white;
  }
  .section[inert] {
    opacity: 0.5;
    background: #f1f5f9;
    cursor: not-allowed;
    user-select: none;
  }
  button, input {
    padding: 8px 16px;
    margin: 5px;
    border: 2px solid #3b82f6;
    border-radius: 4px;
    background: #3b82f6;
    color: white;
    cursor: pointer;
  }
  input {
    background: white;
    color: black;
  }
</style>
</head>
<body>
<div class="container">
  <h3>Inert Attribute Demo</h3>

  <div class="section">
    <h4>Active Section</h4>
    <p>This section is fully interactive.</p>
    <button onclick="alert('Clicked!')">Click Me</button>
    <input type="text" placeholder="Type here">
  </div>

  <div class="section" inert>
    <h4>Inert Section</h4>
    <p>This section is non-interactive. Try clicking or focusing elements:</p>
    <button onclick="alert('This will not work')">Try to Click</button>
    <input type="text" placeholder="Cannot focus this">
    <a href="#" onclick="alert('Link blocked')">Try this link</a>
  </div>

  <div class="section">
    <h4>Another Active Section</h4>
    <button onclick="alert('This works!')">This Works</button>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 600px; }
  .section {
    padding: 20px;
    margin: 15px 0;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: white;
  }
  .section[inert] {
    opacity: 0.5;
    background: #f1f5f9;
    cursor: not-allowed;
    user-select: none;
  }
  button, input {
    padding: 8px 16px;
    margin: 5px;
    border: 2px solid #3b82f6;
    border-radius: 4px;
    background: #3b82f6;
    color: white;
    cursor: pointer;
  }
  input {
    background: white;
    color: black;
  }
</style>
</head>
<body>
<div class="container">
  <h3>Inert Attribute Demo</h3>

  <div class="section">
    <h4>Active Section</h4>
    <p>This section is fully interactive.</p>
    <button onclick="alert('Clicked!')">Click Me</button>
    <input type="text" placeholder="Type here">
  </div>

  <div class="section" inert>
    <h4>Inert Section</h4>
    <p>This section is non-interactive. Try clicking or focusing elements:</p>
    <button onclick="alert('This will not work')">Try to Click</button>
    <input type="text" placeholder="Cannot focus this">
    <a href="#" onclick="alert('Link blocked')">Try this link</a>
  </div>

  <div class="section">
    <h4>Another Active Section</h4>
    <button onclick="alert('This works!')">This Works</button>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; }
  .page-content[inert] {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .modal {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
  }
  .modal h2 { margin-top: 0; }
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
  }
  .primary {
    background: #3b82f6;
    color: white;
  }
  .secondary {
    background: #e2e8f0;
    color: #1e293b;
  }
  .hidden { display: none; }
</style>
</head>
<body>
<div class="page-content" id="pageContent">
  <h1>Main Page Content</h1>
  <p>This is the main content of the page. When the modal opens, this content becomes inert (non-interactive).</p>

  <button class="primary" onclick="openModal()">Open Modal</button>

  <p>Try interacting with this content:</p>
  <input type="text" placeholder="Type something...">
  <button class="secondary">Regular Button</button>
  <a href="#">Try clicking this link</a>

  <p>When the modal is open, you won't be able to interact with any of this!</p>
</div>

<div class="modal-overlay hidden" id="modalOverlay">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <h2 id="modalTitle">Modal Dialog</h2>
    <p>This modal is the only interactive content. The background content is inert.</p>

    <label for="modalInput">Enter your name:</label>
    <input type="text" id="modalInput" style="width: 100%; padding: 8px; margin: 10px 0;">

    <div style="margin-top: 20px;">
      <button class="primary" onclick="closeModal()">Confirm</button>
      <button class="secondary" onclick="closeModal()">Cancel</button>
    </div>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById('pageContent').inert = true;
    document.getElementById('modalOverlay').classList.remove('hidden');
    document.getElementById('modalInput').focus();
  }

  function closeModal() {
    document.getElementById('pageContent').inert = false;
    document.getElementById('modalOverlay').classList.add('hidden');
  }

  // Close on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !document.getElementById('modalOverlay').classList.contains('hidden')) {
      closeModal();
    }
  });
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; }
  .page-content[inert] {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .modal {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
  }
  .modal h2 { margin-top: 0; }
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
  }
  .primary {
    background: #3b82f6;
    color: white;
  }
  .secondary {
    background: #e2e8f0;
    color: #1e293b;
  }
  .hidden { display: none; }
</style>
</head>
<body>
<div class="page-content" id="pageContent">
  <h1>Main Page Content</h1>
  <p>This is the main content of the page. When the modal opens, this content becomes inert (non-interactive).</p>

  <button class="primary" onclick="openModal()">Open Modal</button>

  <p>Try interacting with this content:</p>
  <input type="text" placeholder="Type something...">
  <button class="secondary">Regular Button</button>
  <a href="#">Try clicking this link</a>

  <p>When the modal is open, you won't be able to interact with any of this!</p>
</div>

<div class="modal-overlay hidden" id="modalOverlay">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <h2 id="modalTitle">Modal Dialog</h2>
    <p>This modal is the only interactive content. The background content is inert.</p>

    <label for="modalInput">Enter your name:</label>
    <input type="text" id="modalInput" style="width: 100%; padding: 8px; margin: 10px 0;">

    <div style="margin-top: 20px;">
      <button class="primary" onclick="closeModal()">Confirm</button>
      <button class="secondary" onclick="closeModal()">Cancel</button>
    </div>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById('pageContent').inert = true;
    document.getElementById('modalOverlay').classList.remove('hidden');
    document.getElementById('modalInput').focus();
  }

  function closeModal() {
    document.getElementById('pageContent').inert = false;
    document.getElementById('modalOverlay').classList.add('hidden');
  }

  // Close on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !document.getElementById('modalOverlay').classList.contains('hidden')) {
      closeModal();
    }
  });
</script>
</body>
</html>

Loading State

<!DOCTYPE html>
<html>
<head>
<style>
  .app {
    max-width: 600px;
    margin: 20px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    position: relative;
  }
  .app[inert] {
    opacity: 0.7;
  }
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
  }
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .form-field {
    margin: 15px 0;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  input, textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .hidden { display: none; }
</style>
</head>
<body>
<div class="app" id="app">
  <h2>Contact Form</h2>

  <div class="form-field">
    <label for="name">Name:</label>
    <input type="text" id="name" placeholder="John Doe">
  </div>

  <div class="form-field">
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="john@example.com">
  </div>

  <div class="form-field">
    <label for="message">Message:</label>
    <textarea id="message" rows="4" placeholder="Your message..."></textarea>
  </div>

  <button onclick="submitForm()">Submit Form</button>

  <div class="loading-overlay hidden" id="loading">
    <div class="spinner"></div>
  </div>
</div>

<script>
  function submitForm() {
    const app = document.getElementById('app');
    const loading = document.getElementById('loading');

    // Make form inert and show loading
    app.inert = true;
    loading.classList.remove('hidden');

    // Simulate API call
    setTimeout(() => {
      app.inert = false;
      loading.classList.add('hidden');
      alert('Form submitted successfully!');
    }, 2000);
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .app {
    max-width: 600px;
    margin: 20px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    position: relative;
  }
  .app[inert] {
    opacity: 0.7;
  }
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
  }
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .form-field {
    margin: 15px 0;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  input, textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .hidden { display: none; }
</style>
</head>
<body>
<div class="app" id="app">
  <h2>Contact Form</h2>

  <div class="form-field">
    <label for="name">Name:</label>
    <input type="text" id="name" placeholder="John Doe">
  </div>

  <div class="form-field">
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="john@example.com">
  </div>

  <div class="form-field">
    <label for="message">Message:</label>
    <textarea id="message" rows="4" placeholder="Your message..."></textarea>
  </div>

  <button onclick="submitForm()">Submit Form</button>

  <div class="loading-overlay hidden" id="loading">
    <div class="spinner"></div>
  </div>
</div>

<script>
  function submitForm() {
    const app = document.getElementById('app');
    const loading = document.getElementById('loading');

    // Make form inert and show loading
    app.inert = true;
    loading.classList.remove('hidden');

    // Simulate API call
    setTimeout(() => {
      app.inert = false;
      loading.classList.add('hidden');
      alert('Form submitted successfully!');
    }, 2000);
  }
</script>
</body>
</html>

Disabled Section

<!DOCTYPE html>
<html>
<head>
<style>
  .dashboard {
    max-width: 800px;
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    background: white;
    position: relative;
  }
  .card[inert] {
    opacity: 0.5;
    background: #f8fafc;
  }
  .card[inert]::after {
    content: '🔒 Upgrade to unlock';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
  }
  .card h3 {
    margin-top: 0;
    color: #1e293b;
  }
  .badge {
    display: inline-block;
    padding: 4px 8px;
    background: #10b981;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
  }
  .badge.pro {
    background: #8b5cf6;
  }
  button {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }
  input, select {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
  }
</style>
</head>
<body>
<div class="dashboard">
  <div class="card">
    <h3>Basic Features <span class="badge">Free</span></h3>
    <p>Available in your current plan:</p>
    <input type="text" placeholder="Basic setting 1">
    <input type="text" placeholder="Basic setting 2">
    <button onclick="alert('Saved!')">Save Settings</button>
  </div>

  <div class="card" inert>
    <h3>Advanced Analytics <span class="badge pro">Pro</span></h3>
    <p>Upgrade to access:</p>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <button>View Reports</button>
  </div>

  <div class="card">
    <h3>User Management <span class="badge">Free</span></h3>
    <p>Manage your team:</p>
    <input type="text" placeholder="Add user email">
    <button onclick="alert('User added!')">Add User</button>
  </div>

  <div class="card" inert>
    <h3>Custom Integrations <span class="badge pro">Pro</span></h3>
    <p>Connect third-party services:</p>
    <input type="text" placeholder="API Key">
    <button>Connect</button>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .dashboard {
    max-width: 800px;
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    background: white;
    position: relative;
  }
  .card[inert] {
    opacity: 0.5;
    background: #f8fafc;
  }
  .card[inert]::after {
    content: '🔒 Upgrade to unlock';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
  }
  .card h3 {
    margin-top: 0;
    color: #1e293b;
  }
  .badge {
    display: inline-block;
    padding: 4px 8px;
    background: #10b981;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
  }
  .badge.pro {
    background: #8b5cf6;
  }
  button {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }
  input, select {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
  }
</style>
</head>
<body>
<div class="dashboard">
  <div class="card">
    <h3>Basic Features <span class="badge">Free</span></h3>
    <p>Available in your current plan:</p>
    <input type="text" placeholder="Basic setting 1">
    <input type="text" placeholder="Basic setting 2">
    <button onclick="alert('Saved!')">Save Settings</button>
  </div>

  <div class="card" inert>
    <h3>Advanced Analytics <span class="badge pro">Pro</span></h3>
    <p>Upgrade to access:</p>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <button>View Reports</button>
  </div>

  <div class="card">
    <h3>User Management <span class="badge">Free</span></h3>
    <p>Manage your team:</p>
    <input type="text" placeholder="Add user email">
    <button onclick="alert('User added!')">Add User</button>
  </div>

  <div class="card" inert>
    <h3>Custom Integrations <span class="badge pro">Pro</span></h3>
    <p>Connect third-party services:</p>
    <input type="text" placeholder="API Key">
    <button>Connect</button>
  </div>
</div>
</body>
</html>

How It Works

Effect on Elements

When an element has the inert attribute:

Cannot be clicked: All mouse/touch events are ignored
Cannot be focused: Tab key skips inert elements
Cannot be selected: Text selection is disabled
Cascade to children: All descendants become inert
Visible: Element remains visible (unlike hidden)
Accessibility: Removed from accessibility tree

Browser Implementation

/* Browser default styles (conceptual) */
[inert] {
  /* Inert elements are not focusable */
  /* Inert elements cannot receive pointer events */
  /* Inert elements are not exposed to assistive technology */
}

Comparison with Other Attributes

inert vs disabled

<!-- disabled: Only works on form elements -->
<button disabled>Can't click</button>
<input disabled>

<!-- inert: Works on any element, including containers -->
<div inert>
  <button>Can't click</button>
  <a href="#">Can't click</a>
  <input type="text">
</div>

inert vs pointer-events: none

<!-- pointer-events: none - Only prevents mouse/touch -->
<div style="pointer-events: none">
  <button tabindex="0">Can still be focused with keyboard!</button>
</div>

<!-- inert - Prevents all interactions -->
<div inert>
  <button tabindex="0">Cannot be focused at all</button>
</div>

inert vs hidden

<!-- hidden: Element not visible -->
<div hidden>
  <p>You can't see this</p>
</div>

<!-- inert: Element visible but not interactive -->
<div inert>
  <p>You can see this but can't interact with it</p>
</div>

Best Practices

The primary use case for inert is modal dialogs:

function openModal() {
  // Make background inert
  document.querySelector('main').inert = true;
  document.querySelector('nav').inert = true;

  // Show modal
  modal.classList.remove('hidden');
  modal.focus();
}

function closeModal() {
  // Remove inert
  document.querySelector('main').inert = false;
  document.querySelector('nav').inert = false;

  // Hide modal
  modal.classList.add('hidden');
}

2. Provide Visual Feedback

Make it obvious that content is inert:

[inert] {
  opacity: 0.6;
  filter: grayscale(50%);
  cursor: not-allowed;
  user-select: none;
}

/* Or use blur for background content */
.background[inert] {
  filter: blur(3px);
  opacity: 0.8;
}

3. Use for Loading States

Prevent interaction during async operations:

async function submitForm() {
  const form = document.getElementById('form');

  // Disable form
  form.inert = true;
  showLoadingSpinner();

  try {
    await saveData();
  } finally {
    // Re-enable form
    form.inert = false;
    hideLoadingSpinner();
  }
}

4. Premium Features Paywall

Visually show locked features:

<div class="feature-card" inert>
  <div class="upgrade-badge">
    🔒 Premium Feature
  </div>
  <h3>Advanced Analytics</h3>
  <p>Unlock detailed insights...</p>
  <button>View Reports</button>
</div>

5. Temporary Sections

Disable sections during specific states:

// Disable payment section until shipping address is complete
if (!shippingAddress.isComplete()) {
  paymentSection.inert = true;
} else {
  paymentSection.inert = false;
}

Accessibility Considerations

Screen Readers

Elements with inert:

Are removed from accessibility tree
Cannot be navigated to with screen reader shortcuts
Are not announced to screen readers

<!-- Screen reader will skip this entire section -->
<div inert>
  <h2>Section Title</h2>
  <p>Content that screen readers won't announce</p>
  <button>Inaccessible button</button>
</div>

Focus Management

When making content inert, ensure focus is in the right place:

function openDialog() {
  // Make background inert
  mainContent.inert = true;

  // Show dialog
  dialog.removeAttribute('hidden');

  // Move focus to dialog
  dialog.focus();
}

Inert elements are skipped during Tab navigation:

<button>Button 1</button>
<div inert>
  <button>Button 2 - Skipped by Tab</button>
  <a href="#">Link - Also skipped</a>
</div>
<button>Button 3</button>
<!-- Tab goes: Button 1 → Button 3 -->

JavaScript API

Setting and Removing

const element = document.getElementById('myElement');

// Make inert
element.inert = true;
element.setAttribute('inert', '');

// Remove inert
element.inert = false;
element.removeAttribute('inert');

// Check if inert
if (element.inert) {
  console.log('Element is inert');
}

// Toggle
element.inert = !element.inert;

Checking Support

if ('inert' in HTMLElement.prototype) {
  console.log('Inert attribute is supported');
} else {
  // Load polyfill
  console.log('Need polyfill');
}

Polyfill for Older Browsers

<!-- For browsers without native support -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/inert.min.js"></script>

Common Use Cases

class Modal {
  constructor(element) {
    this.modal = element;
    this.background = document.querySelector('main');
  }

  open() {
    this.background.inert = true;
    this.modal.removeAttribute('hidden');
    this.modal.querySelector('button').focus();
  }

  close() {
    this.background.inert = false;
    this.modal.setAttribute('hidden', '');
  }
}

2. Multi-Step Form

const steps = document.querySelectorAll('.step');

function goToStep(stepNumber) {
  steps.forEach((step, index) => {
    if (index === stepNumber) {
      step.inert = false;
      step.hidden = false;
    } else {
      step.inert = true;
      step.hidden = true;
    }
  });
}

3. Drawer/Sidebar

function openDrawer() {
  drawer.classList.add('open');
  mainContent.inert = true;
}

function closeDrawer() {
  drawer.classList.remove('open');
  mainContent.inert = false;
}

4. Loading Overlay

function showLoading() {
  document.body.inert = true;
  loadingOverlay.hidden = false;
}

function hideLoading() {
  document.body.inert = false;
  loadingOverlay.hidden = true;
}

Common Pitfalls

Browser Support

Browser	Support	Notes
Chrome	102+	Native support
Firefox	112+	Native support
Safari	15.5+	Native support
Edge	102+	Native support
IE	❌	No support (use polyfill)

Polyfill Usage

<!DOCTYPE html>
<html>
<head>
  <!-- Load polyfill for older browsers -->
  <script>
    if (!('inert' in HTMLElement.prototype)) {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/inert.min.js';
      document.head.appendChild(script);
    }
  </script>
</head>
<body>
  <div inert>
    Content that works in all browsers
  </div>
</body>
</html>

hidden - Hide elements completely (not visible)
disabled - Disable form controls specifically
aria-hidden - Hide from screen readers only
aria-modal - Indicate modal dialog (use with inert)

The inert Attribute

The `inert` Attribute

Syntax

Values

Examples

Basic Inert Element

Loading State

Disabled Section

How It Works

Effect on Elements

Browser Implementation

Comparison with Other Attributes

inert vs disabled

inert vs pointer-events: none

inert vs hidden

Best Practices

2. Provide Visual Feedback

3. Use for Loading States

4. Premium Features Paywall

5. Temporary Sections

Accessibility Considerations

Screen Readers

Focus Management

Keyboard Navigation

JavaScript API

Setting and Removing

Checking Support

Polyfill for Older Browsers

Common Use Cases

2. Multi-Step Form

3. Drawer/Sidebar

4. Loading Overlay

Common Pitfalls

Browser Support

Polyfill Usage

Specifications

The inert Attribute

The inert Attribute

Syntax

Values

Examples

Basic Inert Element

Modal Dialog Pattern

Loading State

Disabled Section

How It Works

Effect on Elements

Browser Implementation

Comparison with Other Attributes

inert vs disabled

inert vs pointer-events: none

inert vs hidden

Best Practices

1. Use for Modal Dialogs

2. Provide Visual Feedback

3. Use for Loading States

4. Premium Features Paywall

5. Temporary Sections

Accessibility Considerations

Screen Readers

Focus Management

Keyboard Navigation

JavaScript API

Setting and Removing

Checking Support

Polyfill for Older Browsers

Common Use Cases

1. Modal Dialog with Focus Trap

2. Multi-Step Form

3. Drawer/Sidebar

4. Loading Overlay

Common Pitfalls

Browser Support

Polyfill Usage

Related Attributes

Specifications

The `inert` Attribute