Accordion
A vertically stacked set of interactive headings that reveal content.
An accordion component for collapsible content sections.
Default
Basic Accordion
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent
} from "@delphi/ui";
export function Example() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content 1</AccordionContent>
</AccordionItem>
</Accordion>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | - | Whether one or multiple items can be open |
collapsible | boolean | false | When type="single", allows closing all items |
value | string | string[] | - | Controlled open item(s) |
onValueChange | (value) => void | - | Callback when open items change |
Use accordions for FAQs, settings, or grouped content
Keep trigger text concise but descriptive
Use
collapsible to allow users to close all itemsOrder items logically — by importance or alphabetically
Ensure content is accessible when expanded via keyboard
Nest accordions inside accordions — it's confusing
Use accordions for critical information users must see
Hide error states or warnings inside collapsed items
Use accordions for navigation — use a proper nav component