hidden

Control element visibility and interactivity. Covers hidden, hidden='until-found', and inert — three levels of removing content from the user experience.

Overview

Three native attributes control whether and how users can see and interact with content. They represent three levels of removal from the user experience:

AttributeVisibleInteractiveIn Accessibility TreeFind-in-Page
hiddenNoNoNoNo
hidden="until-found"NoNoYesYes (reveals on find)
inertYesNoNoYes
(none)YesYesYesYes

hidden

The hidden attribute removes an element from rendering entirely. It behaves like display: none but is semantic — it declares that the content is not relevant to the current state of the page.

<!-- Completely hidden: removed from rendering and accessibility tree --> <div hidden> This content is invisible, unfocusable, and ignored by screen readers. </div> <!-- Conditionally show/hide with JavaScript --> <div id="details" hidden> <p>Additional details appear here.</p> </div> <button onclick="document.getElementById('details').hidden = !document.getElementById('details').hidden"> Toggle Details </button>

When to Use hidden

  • Conditional UI: Content that should appear only in certain states (logged in, feature enabled, etc.)
  • Template content: Fragments cloned by JavaScript
  • Deferred content: Content loaded after user interaction

hidden="until-found"

A newer value that collapses content visually but allows the browser to reveal it during find-in-page (Ctrl+F) searches. When a match is found inside, the browser fires a beforematch event and removes the hidden attribute.

This is useful for long FAQ pages, accordions, or collapsed sections where users should be able to search for content without expanding every section manually.

<!-- Hidden until browser find-in-page reveals it --> <details> <summary>FAQ: How do I reset my password?</summary> <div hidden="until-found"> <p>Go to Settings, then Security, then click "Reset Password".</p> </div> </details>

inert

The inert attribute keeps content visible but makes it completely non-interactive. Inert elements cannot be clicked, focused, selected, or found by assistive technology. The browser applies a visual dimming effect.

<!-- Visible but completely non-interactive --> <form inert> <label for="name">Name</label> <input type="text" id="name" value="Read-only form" /> <button type="submit">Submit</button> </form>

The form above is inert — try clicking or tabbing into it.

When to Use inert

  • Behind modals: Prevent interaction with page content while a dialog is open. Note: <dialog> with showModal() applies inert automatically.
  • Loading states: Disable a form section while a submission is in progress
  • Preview mode: Show content that shouldn't be interacted with yet
  • Step-by-step flows: Disable future steps until the current step is complete
<!-- Disable page content while a modal is open --> <main id="page-content"> <h1>Page Content</h1> <p>This becomes inert when the modal opens.</p> </main> <dialog id="my-dialog"> <p>Modal content here. The page behind is inert.</p> <button onclick="this.closest('dialog').close()">Close</button> </dialog>

JavaScript API

Both hidden and inert are reflected as boolean properties on the element.

// Toggle hidden element.hidden = true; // hide element.hidden = false; // show // Toggle inert element.inert = true; // disable interaction element.inert = false; // re-enable // Check state if (element.hidden) { /* ... */ } if (element.inert) { /* ... */ }

Comparison with CSS

ApproachVisualAccessibilitySemantic
hiddenRemoved from layoutRemoved from treeYes — declares irrelevance
display: noneRemoved from layoutRemoved from treeNo — only visual
visibility: hiddenInvisible but occupies spaceRemoved from treeNo
.visually-hiddenInvisible, no spaceStill in treeNo — screen reader only
inertVisible (dimmed)Removed from treeYes — declares non-interactivity

Prefer hidden over display: none when the content is semantically irrelevant. Prefer inert when content should remain visible but non-interactive.

See Also