Disclosure Group
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/disclosure
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react cn
Anatomy
import {
DisclosureItem as Disclosure,
DisclosureGroup,
DisclosurePanel,
DisclosureTrigger,
} from "@/components/ui/disclosure-group"<DisclosureGroup defaultExpandedKeys={["x"]}>
<Disclosure id="x">
<DisclosureTrigger>Q1</DisclosureTrigger>
<DisclosurePanel>A1</DisclosurePanel>
</Disclosure>
<Disclosure id="y">
<DisclosureTrigger>Q2</DisclosureTrigger>
<DisclosurePanel>A2</DisclosurePanel>
</Disclosure>
<Disclosure id="z">
<DisclosureTrigger>Q3</DisclosureTrigger>
<DisclosurePanel>A3</DisclosurePanel>
</Disclosure>
</DisclosureGroup>Examples
Default expanded
Set the initially expanded sections by providing an array of keys to the defaultExpandedKeys prop. These keys can be either numbers or strings.
Allow multiple expanded
Allow multiple sections to be expanded at once by using the allowsMultipleExpanded prop.
Nested
Nest disclosure groups to create a hierarchy of sections. Place nested content in DisclosurePanel and wrap the trigger text in a span for alignment.
<DisclosurePanel className="bg-muted">
<DisclosureGroup allowsMultipleExpanded>
{item.children.map((child, childIndex) => (
<Disclosure key={childIndex} id={childIndex}>
<DisclosureTrigger>
<span>With icon
Add icons to disclosure triggers.
Disabled
Disable specific sections by adding the isDisabled prop to the corresponding item.
Component API
Disclosure
Disclosure extends the React Aria Components <Disclosure> component.
classNamestringDisclosureGroup
DisclosureGroup extends the React Aria Components <DisclosureGroup> component.
classNamestringDisclosureIndicator
DisclosureIndicator extends the native <span> element.
classNamestringDisclosurePanel
DisclosurePanel extends the React Aria Components <DisclosurePanel> component.
classNamestringDisclosureTrigger
DisclosureTrigger extends the React Aria Components <Button> component.
classNamestringtriggerIndicatorbooleantrueSee the React Aria for the full API reference.
