Accordion
Sections that fold away.
One at a time
Opening one closes the last. `collapsible` lets the open one close again.
No. The command copies files into your project, and they become yours.
One open at a time, or as many as the reader likes. The panel slides from nothing to its real height, which is measured as it opens and watched afterwards, so a panel whose content grows does not end up clipped.
Installation
npx philcn@latest add accordionThe file is written into your project. It is yours from then on — change it as you like.
Examples
Several at once
Every section independent; the value is an array.
Every header stays in the tab order, on purpose: that is the rule for accordions.
Props
| Prop | Type | What it does |
|---|---|---|
| Accordion.type * | "multiple" | "single" | Required. `"single"` for one open section, `"multiple"` for any number. |
| Accordion.value | string | string[] | Controlled. A string, or an array when multiple. |
| Accordion.onValueChange | ((value: string) => void) | ((value: string[]) => void) | Called whenever a section opens or closes. |
| AccordionItem.value * | string | What this section is called, internally. Required. |
| AccordionItem.disabled | boolean | This section cannot be opened. |
| AccordionContent.forceMount | boolean | Keeps the panel in the page while it is closed, when its content is expensive to build. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- Unlike tabs, every header stays in the tab order: that is the rule for accordions, and the reason this one does not use the roving focus the other groups share.
- `collapsible` is what lets the single open section be closed again, leaving nothing open.