The disclosure component is used to put long sections of information under a block that users can expand or collapse.
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.
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.
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.
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.