Accordion
An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space.
The Accordion component provides a consistent way to create expandable and collapsible content sections throughout your application.
Basic Accordion
A simple accordion with multiple independent panels. Each panel can be expanded and collapsed without affecting others.
This is the content for the first accordion panel. You can add any content here, including text, images, or other components.
This is the content for the second accordion panel. Accordions can contain rich content and media.
Controlled Accordion
A controlled accordion where the expanded state is managed by React state. This allows only one panel to be expanded at a time, providing a more focused user experience.
Controlled accordions manage their expanded state through React, allowing only one panel to be open at a time. This creates a cleaner, more focused user experience by preventing multiple sections from being visible simultaneously.
When expanding this panel, the previously opened panel automatically collapses. This behavior is ideal for settings pages, configuration panels, and any interface where you want users to focus on one section at a time.
Default Expanded
Use the defaultExpanded prop to have an accordion panel expanded by default when the component mounts.
Disabled Accordion
Use the disabled prop to prevent users from interacting with an accordion panel.
This content cannot be accessed as the accordion is disabled.
