Accordion
Collapsible content sections that let users expand only what they need. Ideal for FAQs, feature lists, and configuration options.
Collapsible sections -- readers see the heading and expand for details. Supports icons, descriptions, and grouping.
Use Accordions when:
- FAQs - Users 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 users 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.