Skip to content

Accordion

An accordion component. Used to create small pockets of additional information.

These are the details

You can pass the open prop to any <AccordionItem> to have it be open by default, as seen above in the example.

The accordion component has multiple different styles:

  • outlined (Default)
  • separated
  • filled
  • blank

They can be used via the style prop on the accordion parent. Here’s an accordion with the filled style:

These are the details

By default, users can open multiple items in the accordion at once. You can change this behavior by setting the multipleOpen prop on the <Accordion> element to false:

These are the details