Accordion
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.
Import
import { Accordion } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
Accordion
| Property | Type | Default | Description |
|---|---|---|---|
defaultExpandedKeys | Iterable<Key> | none | The initial expanded keys in the collection (uncontrolled). |
selectionMode | none, single, multiple | single | Sets the mode of items open at the same time. |
children | ItemElement<object>[] | ItemElement<object> | none | Children of the Accordion. |
items | Iterable<object> | none | Item objects in the collection. |
Accordion.Item
| Property | Type | Default | Description |
|---|---|---|---|
key | React.Key | none | The key of the item. |
title | string | ReactElement | none | Sets title of the accordion item which will be displayed to the button. |
textValue | string | true | Add a textValue if you use JSX-Elements for the title to supported accessibility. |
Examples
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.