Disclosure

Basic

A disclosure, also known as a collapsible, is a vertical stack of headers that expand or collapse to show or hide content sections. It helps organize large amounts of information, making it easier for users to navigate and find what they need.

Installation

npx shadcn@latest add @intentui/disclosure

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

import { Disclosure, DisclosurePanel, DisclosureTrigger } from "@/components/ui/disclosure"

<Disclosure>
  <DisclosureTrigger>What are the benefits of regular exercise?</DisclosureTrigger>
  <DisclosurePanel>
    <p>
      Regular exercise can improve your overall health, boost your mood, increase energy levels,
      and help you maintain a healthy weight.
    </p>
  </DisclosurePanel>
</Disclosure>

Disabled

You can disable all disclosure by setting the isDisabled prop.

Controlled

You can control the disclosure by using the isExpanded prop.

Accordion

If you're looking for a more advanced accordion, check out the Disclosure Group component.