Disclosure Group

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/disclosure

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

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

Disclosure Groups can be nested to create a hierarchy of sections. Use the DisclosurePanel component to add content to each nested group. To ensure a polished appearance, make sure the trigger within the nested group includes a span, as shown below:

<DisclosurePanel className="bg-muted">
  <DisclosureGroup allowsMultipleExpanded>
    {item.children.map((child, childIndex) => (
      <Disclosure key={childIndex} id={childIndex}>
        <DisclosureTrigger>
          <span>

Check out the example below to see it in action.

With icon

You can add icons to the disclosure group to make it more visually appealing.

Disabled

Disable specific sections by adding the isDisabled prop to the corresponding item.

Component API

Disclosure

DisclosureGroup

DisclosureIndicator

DisclosurePanel

DisclosureTrigger