Accordion
A vertically stacked set of interactive headings that reveal or hide content.
Installation
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@sourceful-energy/ui"Usage
Examples
FAQ
Multiple Open
Default Open
This item is open when the page loads.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or multiple items can be opened at once. |
| value | string | string[] | - | The controlled value of the opened item(s). |
| defaultValue | string | string[] | - | The default opened item(s) when uncontrolled. |
| collapsible | boolean | false | When type is 'single', allows closing all items. |
Accessibility
- Built on Radix UI Accordion for full accessibility
- Keyboard navigation (Arrow keys, Home, End)
- WAI-ARIA accordion pattern
- Proper focus management