Accordion
Accordions display collapsible content panels for presenting information in a limited space.
Default
Only one panel can be open at a time. Opening a new panel automatically closes the previous one.
What is an accordion component?
An accordion is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It's commonly
used to organize and present information in a compact, scannable format.
When should I use an accordion?
Use accordions when you have multiple sections of content that users might want to explore, but showing all content at once would be
overwhelming. They're ideal for FAQs, settings panels, and navigation menus.
Is this component accessible?
Yes! This accordion uses details and summary elements, which provides built-in keyboard navigation and screen reader support. Focus
states are clearly visible and all interactive elements are properly labeled.
Can I customize the styling?
Absolutely! The component uses CSS custom properties from your design system, making it easy to adjust colors, spacing, and typography
to match your brand.
Multiple
Enable the multiple prop to allow several panels to be open simultaneously.
Section One
This is the content for section one. When multiple mode is enabled, you can have several sections open at the same time.
Section Two
This is the content for section two. Try opening this while keeping section one open.
Section Three
This is the content for section three. All three sections can be open simultaneously.
Section Four
This is the content for section four. You have full control over how many panels remain open.