Accordion
@xui/accordionA vertical stack of expandable sections. One panel opens at a time by default; multiple lets several stay open. value is the two-way list of open items.
Install
pnpm add @xui/accordion Add the barrel to a standalone component's imports:
import { XuiAccordionImports } from '@xui/accordion';
@Component({
imports: [XuiAccordionImports],
// …
})Examples
Basic
Loading preview…
<div class="w-96">
<xui-accordion [(value)]="open">
<xui-accordion-item value="shipping" title="Is shipping free?">
Orders over $50 ship free. Below that, a flat $4.95 rate applies at checkout.
</xui-accordion-item>
<xui-accordion-item value="returns" title="What is the return policy?">
Unused items can be returned within 30 days for a full refund.
</xui-accordion-item>
<xui-accordion-item value="warranty" title="Do products have a warranty?">
Every product carries a one-year limited warranty against manufacturing defects.
</xui-accordion-item>
</xui-accordion>
</div>Multiple
Loading preview…
<div class="w-96">
<xui-accordion multiple [(value)]="open">
<xui-accordion-item value="a" title="Account">Manage your profile, email and password.</xui-accordion-item>
<xui-accordion-item value="b" title="Notifications">Choose which alerts reach your inbox.</xui-accordion-item>
<xui-accordion-item value="c" title="Billing">Update your plan and payment method.</xui-accordion-item>
</xui-accordion>
</div>With disabled
Loading preview…
<div class="w-96">
<xui-accordion [(value)]="open">
<xui-accordion-item value="a" title="Available">This section can be opened.</xui-accordion-item>
<xui-accordion-item value="b" title="Coming soon" disabled>Locked for now.</xui-accordion-item>
</xui-accordion>
</div>API
One section of an {@link XuiAccordion}. value identifies it within the group; title is the header label (or project [xuiAccordionTitle] for rich content). The body is the default projected content.
Inputs
valuestringThe item's key, used by the accordion to track which items are expanded. Must be unique within the accordion.titlestringThe header text. Project [xuiAccordionTitle] content instead when the header needs markup.''disabledbooleanMake the item unopenable. The header stays visible but no longer toggles.falseA vertical stack of expandable sections. By default one panel is open at a time; set multiple to let several stay open. value is the two-way bindable list of open item values.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''multiplebooleanLet several items be open at once. By default opening one closes the rest.falsevaluestring[]The values of the currently open items.[]Methods
isExpanded(value: string): booleantoggle(value: string): void