Accordion component icon Accordion

The Accordion component is a container that allows one to group related information into sections. The sections are then stacked beneath each other. The individual sections can be expanded and collapsed on demand.

In order to add a new section to the accordion, simply drag a new Tab component into the accordion. The order of the sections can be controlled in the canvas.


Design Rendered
Accordion component rendered
Accordion component design


Group Name Description



This is a unique id for the component.


The label attribute adds a label to the component, if not empty.


Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance, use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{}} which evaluates to true only, if there is a current id which is not the id in a start form.


Initial section

The section number that is opened initially.

Show border

Show a border for the component.

Sections order

The display order of the sections in the component.



Documentation intended to explain concepts of its use for future reference.


Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.