COMPONENTS

Disclosures and overlays

Native HTML supplies disclosure and popover interactions. CSS styles their surfaces without adding application behavior.

Usage

Markup: details/summary, dialog, [popover]

Behaviour: Dialog styling does not itself implement a modal workflow.

Component API and styling module · Inherited appearance settings

Native disclosure

summary toggles its details. Add open if it should start expanded.

What is included?

Native HTML foundations and optional component styles.

HTMLSelect text to copy
<details>
  <summary>What is included?</summary>
  <p>Native HTML foundations and optional component styles.</p>
</details>

Exclusive disclosure groups

Matching name values allow one disclosure in that group to remain open. Give separate instances unique group names.

Do I need JavaScript?

These disclosures work with native HTML.

Can I customise the styles?

Use shared attributes and ordinary CSS.

HTMLSelect text to copy
<details name="demo-faq">
  <summary>Do I need JavaScript?</summary>
  <p>These disclosures work with native HTML.</p>
</details>
<details name="demo-faq">
  <summary>Can I customise the styles?</summary>
  <p>Use shared attributes and ordinary CSS.</p>
</details>

Native popover

popovertarget opens this popover without JavaScript in supporting browsers. Native auto popovers support light dismissal.

Helpful information

This is a native popover surface.

HTMLSelect text to copy
<button type="button" popovertarget="demo-popover">Show information</button>
<div id="demo-popover" popover>
  <h3>Helpful information</h3>
  <p>This is a native popover surface.</p>
  <button type="button" popovertarget="demo-popover" popovertargetaction="hide">Close</button>
</div>

Dialog markup

open displays a non-modal dialog. This static markup does not implement modal opening or focus management; those require supported native invoker commands or a separate script. A form with method="dialog" can close an open dialog.

HTMLSelect text to copy
<dialog open aria-labelledby="demo-dialog-title">
  <h3 id="demo-dialog-title">Review your changes</h3>
  <p>This example describes a non-modal dialog.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>