Disclosure aka Collapsible

A disclosure is a collapsible content section featuring a header with a title and a trigger button, along with a panel that holds the content.

Basic

An accordion functions as a vertical stack of headers that expand to reveal or conceal content sections.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Disabled

You can disable all disclosure by setting the isDisabled prop.

Controlled

You can control the disclosure by using the isExpanded prop.

The disclosure is collapsed.

Accordion

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