Skip to content


Collapse is used for showing and hiding content.

Basic usage

You can expand multiple panels


In accordion mode, only one panel can be expanded at once Activate accordion mode using the accordion attribute.


Privide the Array , which contains the names of the expanded panels. The expanded panel will be expanded when the component is mounted.

Custom title

Besides using the title attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.

Arrow placement

Arrow placement on item.

Collapse Props

arrordionbooleanfalseAccordion mode.
expandedNamesArray<string | number>[]Contains the names of the expanded panels.

CollapseItem Props

titlestringundefinedDisplay collapse item title.
iconstringundefinedDisplay icon before title.
disabledbooleanfalseDisabled collapseItem.
arrow-placement'left' | 'right'leftDisplay arrow placement in collapse item.

CollapseItem Slots

default()Collapse item content.
title()Collapse item title text.
icon()Collapse item icon.

CollapseItem Methods

change(value: CollapseActiveName) => typeof isNumber(value) || isString(value) || isArray(value)Triggers when click collapse item.

MIT Licensed