Accordion

A collapsible section with a header, content area, and an optional footer action button. Commonly used for step-by-step flows where each step is confirmed with a button.

Properties

Name

Default

Description

show

false

Whether the accordion is expanded.

title

The title shown in the header.

belowTitle

A snippet or string shown below the title.

buttonText

The text of the footer action button.

buttonDisabled

Whether the footer action button is disabled.

onButtonClick

Called when the footer action button is clicked.

onToggle

Called when the header is clicked to expand or collapse the accordion.

toggleLocked

false

When true, clicking the header does not toggle the accordion.

complete

Marks the accordion as complete, applying the complete style.

footer

true

Whether to show the footer with the action button.

loading

false

Shows a loader next to the footer action button and disables it. Bindable with bind:loading.

Example

<Accordion
   title="Step 1"
   show={show}
   buttonText="Continue"
   onButtonClick={() => (show = false)}
   onToggle={() => (show = !show)}
>
   Content of the accordion.

Content of the accordion.