Accordion

Collapsible panels for showing and hiding related content. Use x-accordion with x-accordion-item when space is limited and users need progressive disclosure.

#
Usage

Basic example with common props.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.

#API

Accordion

props

Name	Description	Type	Default
tag	Root element tag.	String	div
disabled	Disables all accordion items when set.	Boolean	false
expanded	Default expanded state passed to child items.	Boolean	false
showIcon	Shows the expand/collapse icon on child items.	Boolean	true
icon	Default expand/collapse icon name for child items.	String
iconAlign	Default icon alignment for child items (left or right).	String

slots

Name	Description
default	Accordion items (typically x-accordion-item children).

AccordionItem

props

Name	Description	Type	Default	Values
tag	Root element tag.	String	div
disabled	Prevents expanding and collapsing.	Boolean	false
expanded	Whether the item content starts expanded.	Boolean	false
showIcon	Shows the expand/collapse icon.	Boolean	true
icon	Custom expand/collapse icon name. Falls back to a chevron.	String
iconAlign	Icon placement relative to the header (left or right).	String	right	leftright

slots

Name	Description
default	Header label. Slot props: expand, collapsed.
summary	Optional summary below the header. Slot props: expand, collapsed.
content	Collapsible body. Slot props: expand, collapsed.

emits

Name	Description
expand	Emitted when expand() is called from a slot.
change	Emitted when expanded state changes. Payload is the new expanded boolean.

methods

Name	Description
toggle	Toggle expanded state when not disabled.
open	Expand the item. Pass false to skip animation.
close	Collapse the item. Pass false to skip animation.

toggle

alert

Accordion

#Usage

#API

Accordion

props

slots

AccordionItem

props

slots

emits

methods

#
Usage