DocsAccordion
Accordion
Collapsible content panels for organizing information.
Collapsible content panels for organizing information.
A vertically stacked set of collapsible panels for organizing content.
FAQ sectionsDisplaying answers to complex or specific product questions without cluttering the main layoutcompact forms / sidebar settingsGrouping complex sets of advanced configurations (e.g. SMTP config, SMTP logs)Whether one or multiple items can be expanded
Allows all items to be closed (only for type='single')
Visual style variant of the accordion
Visual style variant of the accordion items
Icon type used in the trigger
Title of the first item
Content of the first item
Title of the second item
Content of the second item
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nexoreui"
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
</AccordionItem>
</Accordion>| Prop | Type | Default | Description |
|---|---|---|---|
| type* | "single" | "multiple" | — | Whether one or multiple items can be expanded at the same time. |
| collapsible | boolean | false | When type is 'single', allows expanding items to be collapsed. |
| variant | "default" | "glass" | "outline" | "neon" | "default" | Visual style variant of the accordion. |
| defaultValue | string | string[] | — | Value of the item(s) to expand by default. |
| value | string | string[] | — | Controlled value of expanded item(s). |
| disabled | boolean | false | Prevents items from being toggled. |
aria-controls and mapping state via aria-expanded.