Skip to content

Disclosure

Disclosures are expandable areas of content that are summarized or otherwise labeled to indicate what they relate to. There is a trigger that must be manually selected which allows the user to show and hide the additional content that is available.

Click the component to disclose its content.
The hidden content that is now shown.

The Disclosure component simplifies the user experience by revealing interfaces upon request. It combines inline and block layout components to improve readability, allowing users to easily scan and comprehend the content for a better overall experience.

  • Disclosures have two main parts:
    • The trigger that opens and closes the related content.
    • The container that displays the disclosed content.
  • The disclosed content may include interactive elements.
  • Disclosures are collapsed by default. However, the default state can be changed if needed.
  • More than one disclosure item can be expanded at one time.
  • Disclosure triggers are keyboard operable.
  • The Disclosure is a native browser control and does not require additional JS.
  • For more information, see our accessibility guidelines.
W3C guidelines for accessible disclosure UI View component in Figma