Accordion

The accordion component organizes content into collapsible sections, allowing users to toggle between expanded and collapsed states.

Anatomy

An Accordion consists of the following parts:

AccordionItem: A container for each collapsable section.

AccordionTrigger: A button that expands and collapses its associated content.
AccordionContent: The collapsible area that holds the content for each accordion item.

Adding an Accordion

To add an Accordion to your page, follow these steps:

Open the Insert Menu and navigate to Components.

Click or drag the Accordion onto your desired location on the page.

Pro tip

Add more accordion items through the Insert Menu—press I, then use the search bar to find AccordionItem.

Pro tip

Quickly duplicate accordion items in the composition by selecting AccordionItem and pressing Cmd + D (Mac) or Ctrl + D (Windows).

Guides

Here are practical examples of how to configure the accordion component:

Expanded by Default

To set a specific accordion item to expand by default:

Select the accordion component and navigate to the properties panel.

Set the defaultValue to a specific value (e.g., 0). If set to 0, the first item will expand; if set to 1, the second item will expand, and so on.

Expand Multiple Items

To allow more than one accordion item to be expanded simultaneously, follow these steps:

Select the accordion component and go to the properties panel.

Set the type to multiple.

Use the defaultValue property to define which items should be expanded by default (e.g., 0,1, so the first two items are expanded).

Disabled Item

To disable a specific accordion item, follow these steps:

Select the accordion item you want to disable.

In the properties panel, set the disabled property to true.

This will prevent users from interacting with the selected item, meaning it can't be expanded or collapsed.

Disabling the Entire Accordion

To disable all accordion items and prevent users from interacting with the accordion entirely:

Select the accordion component.

In the properties panel, add the disabled property and set it to true.

Customizing the Accordion Trigger

You can fully customize the accordion trigger by adding, removing, or rearranging elements within it. This flexibility allows you to create custom layouts containing user information or media content directly within the trigger.

In the video below, we demonstrate how to customize an accordion trigger to showcase user messages using the Row, Column, Avatar, and Text components.

Changing the Trigger Icon

To replace the trigger icon, follow these steps:

Select the existing icon within the AccordionTrigger component.

Open the Insert Menu and navigate to Icons.

Hold Option (Mac) or Alt (Windows) and click on the desired icon to replace the currently selected one. This will swap the icon instead of inserting a new one.

Repositioning the Trigger Icon

To reposition the trigger icon, follow these steps:

Select the icon in the AccordionTrigger component.

Drag the icon above or below the trigger text to adjust its position.

Adjusting Icon Animations

By default, the trigger icon rotates by 180° when expanded. You can modify the rotation or apply other animation effects. For example, to change the rotation from 180° to -90°:

Select the icon within the AccordionTrigger and navigate to the properties panel.

In the Classes input, locate and select the rotate class.

Click on the open state to view its applied styles.

Scroll to the Effects section and find the Transform panel.

Click on the Rotate item and adjust the Z value to -90deg.

You can also apply other effects like scaling, fading, or adding a bounce effect in the Effects section.

Changing the Background

To change the background color of the accordion content:

Select the AccordionContent component.

Open the Style Panel and navigate to the Background section.

Choose a solid color, gradient, or image as the background.

Optionally, adjust the text color in the Typography section to ensure readability against the new background.

Changing the Border

To customize the border of the accordion:

Select the AccordionTrigger or AccordionContent component.

Open the Style Panel and navigate to the Border section.

Adjust the border width and color as needed.

Properties

Accordion

Property	Type	Default	Description
collapsible	`boolean`	`true`	Determines whether users can close an expanded item by clicking its trigger (only applies when `type="single"`).
type	`"single"`	`"multiple"`	Determines if only one or multiple sections can be expanded at the same time.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the accordion and all its items.
defaultValue	`string`	-	Specifies which accordion items should be expanded when the component first renders. When `type="single"`, use a single value (e.g., `"0"` or `"item-0"`). When `type="multiple"`, use multiple values separated by commas or spaces (e.g., `"0,1,2"`, `"item-0 item-1 item-2"`). If no values are set on accordion items, they can be expanded based on their order, starting from `0`.

AccordionItem

Property	Type	Default	Description
value	`string`	-	A unique value for the item.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the item.

AccordionTrigger

Property	Type	Default	Description
tag	`“h1” \| “h2” \| “h3” \| “h4” \| “h5” \| “h6”`	`“h3”`	Specifies the HTML tag used.