Skip to content
search icon
Component Status



How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Accordion component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping needed.
  3. Once the component is located, click and drag it into the frame/artboard.

How to use

  1. Place the Accordion on your frame/artboard.
  2. Rename the Header label.
  3. Locate the Design tab in the Inspector Panel.
  4. Resize the accordion to the width needed.
  5. Resize the accordion to the height needed:
    • If the accordion is collapsed, then the height is 48px.
    • If the accordion is expanded, then the minimum height is 96px.
  6. Change the action icon:
    • Locate and select the Icon > Nested icon > Placeholder Icon or Icon > Nested icon > chevron down layer in the Layers Panel.
    • Locate the Design tab in the Inspector Panel.
    • Under the Instance section, click the icon name to expand the menu.
    • Choose a new icon.
  7. For expanded accordions, build your own components to swap with the nested Placeholder instance if needed.
  8. Locate and toggle off the layer Hide if top row of panel in the Layers Panel for the top row of the accordion grouping.
  9. Select all the accordion layers and convert them to a frame/artboard by using the following shortcut:
    • Mac: Command + Option + G
    • PC: Ctrl + ALT + G
  10. Make sure to name the new group.
  11. Locate the Design tab in the Inspector Panel.
  12. Under the Constraints section, set up constraints.



'left' │ 'right'
falseleftWhich side the chevron should be on
'h1' │ 'h2' │ 'h3' │ 'h4' │ 'h5' │ 'h6'
falseh2The header level, i.e. h1, h2, h3 etc.
classNameStringfalse[Empty String]@ignore


disabledBoolfalsefalseaccordion item is disabled
accordionIdStringfalse[Empty String]@ignore
isExpandedBoolfalsefalseIs AccordionItem expanded
Edit this page on GitHub