Accordion
The Accordion component is a vertically stacked set of expandable headings that reveal hidden content sections when clicked. It’s perfect for organizing content in a compact, user-friendly way, making it ideal for FAQs, step-by-step guides, or categorizing large amounts of information. By displaying content progressively, the Accordion helps users easily navigate and access detailed information without feeling overwhelmed.
Additional Examples
Item Extended by Default
Allow Multiple Items to be Expanded
Configurable Props
<Accordion>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
type | enum | single ("single" | "multiple") | Determines whether one or multiple items can be opened at the same time. |
collapsible | boolean | False | When type is "single", allows closing content when clicking trigger for an open item. |
disabled | boolean | False | When true, prevents the user from interacting with the accordion and all its items. |
defaultValue | string | False | The value of the item to expand when initially rendered and type is
"single". Use when you do not need to control the state of the items.
EX: |
<AccordionItem>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
value | string | False | A unique key for the item. EX: |
<AccordionTrigger>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<AccordionTrigger> | string | False | Acts as the header for the accordion item. |
<AccordionContent>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<AccordionContent> | string | False | Acts as the container for the accordion item's content. |