Accordion
displayA vertically stacked set of interactive headings that reveal or hide associated sections of content.
Preview
Installation
npm install @launchapp/design-systemImport
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from "@launchapp/design-system";Examples
Basic Accordion
<AccordionRoot type="single" collapsible> <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 using CSS custom properties. </AccordionContent> </AccordionItem></AccordionRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Determines whether one or multiple items can be open at the same time. |
defaultValue | string | string[] | — | The default open item(s) when uncontrolled. |
value | string | string[] | — | The controlled open item(s). |
onValueChange | (value: string | string[]) => void | — | Callback fired when the open state changes. |
collapsible | boolean | false | When type is 'single', allows closing all items. |
disabled | boolean | false | Prevents user interaction with the accordion. |