The disclosure component is used to put long sections of information under a block that users can expand or collapse.
The disclosure component delivers large amounts of content in a small space through progressive disclosure. The header section give the user a high level overview of the content allowing the user to decide which sections to read. Disclosures can make information processing and discovering more effective. However, it does hide content from users and it's important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don't use a disclosure as it adds the burden of an extra click; use instead a full scrolling page with normal headers. Users can open or close a with different interactive element such as a button or the AngleUp and AngleDown icons.
<Disclosure> <DisclosureHeader> /* (Required) A header for the Disclosure */ <Text /> /* (Optional) A text description for the DisclosureHeader */ <Icon /> /* (Optional) An icon for the DisclosureHeader */ </DisclosureHeader> <DisclosurePanel /> /* (Required) A panel for the Disclosure */ </Disclosure>
A Disclosure uses the following components:
A disclosure can be disabled.
A disclosure has multiple variants.
Standalone - Used when the disclosure is not inside a container.
Inline - Used when placing a disclosure inside a container.
A disclosure can contain an icon.
A disclosure can contain a description.
A disclosure can handle its expanded state in controlled mode.
A disclosure can have a custom header. To accomplish this, do not use DisclosureHeader and use the Button component with slot="trigger" instead.
Using React Aria's Button component will also work.
Our Disclosure component uses experimental CSS features like:
interpolate-size: allow-keywords: Enables fluid transitions between dynamic sizes.
transition-behavior: allow-discrete: Allows transitions for properties like content-visibility.
These features enhance animations where supported. In browsers without support, the component remains fully usable without animations, maintaining progressive enhancement.
The disclosure component should:
The inline style for the element. A function may be provided to compute the style based on component state.
The children of the component. A function may be provided to alter the children based on component state.
Whether the disclosure is disabled.
Whether the disclosure is expanded (controlled).
Whether the disclosure is expanded by default (uncontrolled).
An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.
The CSS className for the element. A function may be provided to compute the class based on component state.
Handler that is called when the disclosure's expanded state changes.
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
The props for the button that triggers the disclosure.
The Typography Type Scale to use.
The accessibility role for the disclosure's panel.
The element's unique identifier. See MDN.
Coming from Orbiter, you should be aware of the following changes:
DisclosureHeader and DisclosurePanel.DisclosurePanel is optional and most likely wouldn't be used for Orbiter. A custom header can be used by using a Button component inside Disclosure.defaultOpen is renamed to defaultExpanded.open is renamed to isExpanded.onOpenChange is renamed to onExpandedChange.