Disclosure
Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (Button
, Link
or Pressable
) or a form control (Checkbox
or Switch
) component. The content blocks can be specified as children inside a structure component (View
, ,
,
Grid
, etc.).
The library automatically applies the WAI-ARIA Accordion pattern to both the activator and the toggled content.
Anchor to disclosurepropsDisclosureProps
For uncontrolled disclosure components, the default open
state on the initial render.
It's possible to specify a boolean value, a string value, or an array of string values:
true
will expand all contentfalse
will collapse all contentstring
will expand the content with the matchingid
string[]
will expand the content with the matchingid
s
Callback fired when the open state of the disclosure changes.
For controlled disclosure components, the open state. The open
prop should be used along with to create a controlled disclosure component.
Set to 'none' to disable the default transition animation.
Basic Disclosure
Preview

Anchor to best-practicesBest Practices
Disclosures should be initiated by the buyer.
Use disclosures to hide content until they are relevant to the buyer.
Avoid hiding critical information that buyers need to complete their checkout.
Keep content inside disclosures concise.
Avoid nesting of disclosures.
Keep the activator and the content it toggles in close proximity to each other.
Anchor to examplesExamples
Anchor to example-strategies-for-simplifying-layout-and-aligning-content-using-disclosure-and-inline/block-layout-components.Strategies for simplifying layout and aligning content using Disclosure and Inline/Block Layout components.
Use the Disclosure component to simplify the user experience and reveal interfaces only when the customer requests it. It also demonstrates how a combination of inline and block layout components can improve the readability of information. By employing these strategies, users can easily scan and comprehend the content, making for a better user experience overall.
Strategies for simplifying layout and aligning content using Disclosure and Inline/Block Layout components.
Preview
