Documentation
Getting Started
Foundations
Form
Layout
Display
Navigation
Overlay
Feedback
Accordion
Display
A collapsible component that allows users to toggle the visibility of content sections. Perfect for FAQs, documentation, and organizing large amounts of information.
Installation
bash
1npx @dinachi/cli@latest add accordionRun the CLI command above to automatically install the component and its dependencies.
Examples
Default Accordion
A basic accordion with single item open
Yes. It adheres to the WAI-ARIA design pattern and uses semantic HTML elements.
Multiple Accordion
Accordion allowing multiple items to be open
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | Whether multiple panels can be open simultaneously |
defaultValue | string | string[] | — | The default open panels |
value | string | string[] | — | Controls the open panels |
onValueChange | (value: string | string[]) => void | — | Callback fired when the open panels change |
disabled | boolean | false | Whether the accordion is disabled |