A vertically stacked set of interactive headings that each reveal a section of content. Collapsible is a standalone single-item variant that manages its own state.
By default, only one item can be open at a time.
Use the multiple prop to allow multiple items to be open simultaneously.
Three sizes: normal (default), compact, and small. Controls header padding and font size.
Use borderless to remove the outer border from items — useful when nesting inside other surfaces.
Pass an icon to AccordionItem to display it before the title.
Use joined to merge items into a single bordered list divided by separators, instead of separate cards.
Collapsible is a self-contained single-item accordion — no Accordion wrapper needed.
Use bind:open for two-way control.