Accordion
Collapsible content sections that readers expand for detail. Use them for FAQs, feature lists, and configuration options.
Accordions are collapsible sections. Readers see the heading and expand it for details. An accordion can take an icon and a description. You can also group accordions.
Use Accordions when:
- FAQs: readers scan questions and expand answers
- Feature lists: each feature gets a section with details
- Configuration options: group settings by category
- Step-by-step guides with expandable detail
Usage
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Basic Accordion
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>With Description
Add a subtitle with the description prop:
Documentation for authentication API endpoints goes here.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Default Open
Start expanded with defaultOpen:
This accordion starts in the open state.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>With Icon
Configuration options and settings.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Accordion vs Expandable
| Feature | Accordion | Expandable |
|---|---|---|
| Icons | Yes | No |
| Descriptions | Yes (subtitle) | No |
| Grouping | AccordionGroup | Standalone |
| Visual weight | Heavier, section-like | Lighter, inline |
| Best for | FAQs, feature lists | Supplementary content |
Rule of thumb: Use Accordion when sections are equally important and readers choose between them. Use Expandable for "nice to have" details that don't need visual prominence.
Props
Accordion header text.
Subtitle displayed below the title.
Font Awesome icon name (e.g., "gear", "settings").
Icon style variant: light, regular, or solid.
Start in expanded state.