logo

Accordion

An accordion is a UI component that organizes content into collapsible sections.

Usage

Variants

light

splitted

outlined

elevated

Disabled Items

Use the isDisabled prop to disable an accordion item to prevent it from being expanded or collapsed.

Custom Icon

Use indicator prop to change the default icon. You can use it to customize the open/close indicator.

Without Icon

Use indicator={null} prop to remove the default icon.

Multiple Selection

Use the isMultiple prop to allow multiple items to be expanded at once.

With Subheading

Use the subheading prop to add subheading.

With Start Content

Use the startContent prop if you want to display some content before the accordion items.

With End Content

Use the endContent prop if you want to display some content after the accordion items.

With Start Content Outside

Use startContentPlacement prop to change the placement. Use case of content outside the trigger is that you can add events on the outside content

With End Content Outside

Use endContentPlacement prop to change the placement. Use case of content outside the trigger is that you can add events on the outside content