Component to show and hide related content from the main page.

An <Accordion> is a component that allows you to organizing content into collapsible sections. It consists of a series of vertically stacked items. Accordions are commonly used in website and application designs to present information in a compact and organized way, allowing users to focus on the specific information they are interested in without being overwhelmed by excessive content.

The <Accordion.Item> can be expanded by default using the defaultExpandedKeys property or collapsed. You can also switch the selectionMode for <Accordion> by passing its property. The default behavior is set to single mode.



To import the component you just have to use this code below.

import { Accordion } from '@marigold/components';


Sorry! There are currently no variants and sizes available.

Props Accordion

defaultExpandedKeysIterable<Key>noneThe initial expanded keys in the collection (uncontrolled).
selectionModenone, single, multiplesingleSets the mode of items open at the same time.
childrenItemElement<object>[] | ItemElement<object>noneChildren of the Accordion.
itemsIterable<object>noneItem objects in the collection.

Props Accordion.Item

keyReact.KeynoneThe key of the item.
titlestring | ReactElementnoneSets title of the accordion item which will be displayed to the button.
textValuestringtrueAdd a textValue if you use JSX-Elements for the title to supported accessibility.


Singleselect Accordion

This component shows how a single selection <Accordion> is working. It is possible to have just one item open and the other ones hidden. You can also see that the items are fullwidth, which is true by default. Notice that you can't expand two or more items per default.

Multiselect Accordion

With the multiselection mode you can collapse and hide the items as you want. For sure you can set one or more defaultExpandedKeys.

Available parking passes
Amount in euros