Accordion

The Accordion component is a vertically stacked set of interactive headings that each contain a title, letting users show and hide sections of related content.

<Accordion
  constraints={{ maxWidth: 900 }}
  panels={[
    {
      title: "Patior timidus vinculum deleo turba doloribus sperno corona vociferor degenero.",
      children: "Expedita usitas adduco agnitio abstergo. Voluptatibus terga eos viscus valens. Coaegresco conscendo doloremque.",
    },
    {
      title: "Aureus ventosus corpus.",
      children: "Sono allatus abeo solio debilito vomica tergum soleo combibo tubineus. Volaticus tondeo assentator tenetur sumo comminor alii terga. Civis alienus adstringo capio texo valetudo blandior denique temeritas.",
    },
    {
      title: "Caput impedit tabesco cunabula ipsa argentum administratio antepono.",
      children: "Adeptio tempus debeo votum animus synagoga benigne. Comis apparatus tamdiu cumque vis animi repudiandae tersus. Bis aggero vulpes.",
    },
  ]}
/>

Features

The Accordion is a container that organizes ExpansionPanel components. The primary way to configure the Accordion is by providing an array of panels.

Disabled Panels

You can disable specific panels by setting the disabled property to true for that panel.

<Accordion
  constraints={{ maxWidth: 900 }}
  panels={[
    {
      title: "Enabled Panel",
      children: "This panel can be opened.",
    },
    {
      title: "Disabled Panel",
      children: "This panel cannot be opened.",
      disabled: true,
    },
    {
      title: "Another Enabled Panel",
      children: "This one works too.",
    },
  ]}
/>

Customizing Panels

The objects in the panels array are passed as props to the underlying ExpansionPanel components. This means you can customize each panel individually. For example, you can pass a ReactNode as a title, or you can modify the transition prop to customize the animation.

<Accordion
  constraints={{ maxWidth: 900 }}
  panels={[
    {
      title: (
        <Row gap={400} align="center">
          <Icon.Favorite />
          Excepturi aequitas utilis crur cohors sursum beatus cicuta copia.
        </Row>
      ),
      children: "Eum agnosco cilicium veritas sono canis speculum timidus debitis eveniet. Adfero vulgaris tenuis claro exercitationem certus cimentarius ullam. Amplus capillus terreo tui consectetur damno fugiat.",
    },
    {
      title: "Tredecim acies theca velut.",
      children: "Canonicus defetiscor ex synagoga talus amiculum. Bene venustas adduco thema. Tripudio baiulus corrigo.",
      transition: { duration: 1 },
    },
  ]}
/>

Anatomy

Thymum suasoria stillicidium solvo vomito vomito adipisci armarium beatus. Capillus terga viridis amitto sopor. Deinde angustus utique depopulo conservo umquam asper.

Volubilis curis accusantium thesis temporibus. Hic adipiscor demum rerum tepidus capto porro. Cubo amplus textus vespillo attero eligendi.

1.ColumnThe accordion is a `Column` component.

2.PanelThe individual collapsible `ExpansionPanel` components.

Reference

Props

The Accordion component inherits all of the props from the Column component and adds the following props.

Name	Type	Default	Description
`panels`	`Omit<ExpansionPanelProps, "expanded" \| "header">[]`	`[]`	An array of panel configurations for the `ExpansionPanel` components.

See ExpansionPanel for more details on the props that can be passed to each panel.

Tokens

Key	Default Value
`accordion.column.base.gap`	`var(--gpqiqd7)`
`accordion.column.base.@media.screen and (min-width: 640px).gap`	`var(--gpqiqd7)`
`accordion.column.base.@media.screen and (min-width: 1024px).gap`	`var(--gpqiqd7)`
`accordion.column.base.@media.screen and (min-width: 1366px).gap`	`var(--gpqiqd7)`