Accordion Panel


Accordion panels are containers for content of relative importance to the user that can be selectively expanded or collapsed. They can be useful for reducing the content on a page & the cognitive load for the user.

An accordion panel can display different types of content such as text, images, tables, media, buttons, etc. Components are added into the drop zone and render when the user expands the corresponding panel.

When to use:

  • On similar or redundant information that must be presented together
  • Step-by-step or sequential processes


Edit the code below to see your changes live!


    Prop name
    panels *AccordionProps[]

    See Accordion for usage.

    header *string

    Defines the Accordion Panel header text

    Props ending with * are required

    Do's and Don'ts

    Choose meaningful headers that describe the content revealed on expand.
    Use the icon prop sparingly; an appropriate use would be the status of a task hidden in the accordion.
    Use accordions to present parallel content or like items.
    Limit the number of tasks hidden in each accordion to one.
    Start with all panels collapsed unless the user has been redirected to the content.
    Do not use accordions to hide important user tasks.
    Do not use the icon prop unless it provides benefit to the user.
    Do not nest accordions within accordions.
    Do not use an accordion to hide a singular piece of content.