Component
Accordion
Expandable panels for organizing content with smooth height transitions.
Basic Usage
Single item open at a time
tsx
const items = [
{ key: "1", label: "What is StarKit?", content: <p>...</p> },
{ key: "2", label: "Is it accessible?", content: <p>...</p> }
];
<Accordion items={items} />
Bordered & Multiple
Bordered container allowing multiple panels to open
tsx
<Accordion items={items} bordered multiple />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | AccordionItem[] | — | Array of items containing key, label, and content. |
| multiple | boolean | false | Allow multiple items to be open simultaneously. |
| defaultOpenKeys | string[] | [] | Keys of initially open items. |
| openKeys | string[] | — | Controlled open keys. |
| onChange | (keys: string[]) => void | — | Callback when open keys change. |
| bordered | boolean | false | Wraps the accordion in a bordered container with a shadow. |