Disclosure pattern

Disclosure pattern is used to hide secondary or advanced options until they are needed, helping to reduce visual noise and cognitive load. It uses the native HTML <details> and <summary> elements.

When to use

Use a disclosure when content is useful but not essential to complete the main task, such as advanced power‑user settings. This reduces cognitive load by grouping advanced features separately without overwhelming users. It also helps to reduce the need for separate "advanced" pages.

Positioning

Disclosures should sit close to the element or section they affect, usually directly below a group of primary controls. Avoid placing them at the very top of a screen as users should first see the most important actions before any optional ones.

Writing Guidelines

Summary labels should clearly describe what will be revealed, for example Advanced or Additional filters, rather than vague text like More. Avoid generic or vague labels. Be specific about the nature of the hidden content.

Structure

The disclosure consists of:

• <details class="disclosure"> that wraps the entire collapsible block;
• <summary class="disclosure-button"> that serves as the interactive toggle label;
• Content area may contain form fields, help text, or any other elements.

Example

Copy
<details class="disclosure">
    <summary class="disclosure-button">[Advanced]</summary>
    <div>
        ...
    </div>
</details>

Accessibility

This pattern benefits from semantic HTML by using the native elements, which provide built‑in keyboard and screen reader support.