Accordion

Accordions allow you to reduce vertical space by creating collapsible sections in your content while also organizing and grouping information.

Basic example

main.tsx

data.tsx

import { Accordion } from '@fluid-design/fluid-ui';
import { data } from './data';
function Example() {
  return (
    <Accordion defaultIndex={1}>
      {data.map((item, index) => (
        <Accordion.Panel key={index} header={item.title}>
          {item.details}
        </Accordion.Panel>
      ))}
    </Accordion>
  );
}

Multiple Panels

It's possible to have multiple panels open at the same time by adding the multiple prop. This will disable auto closing of panels when opening another one. You can pass an array of numbers to defaultIndex to open multiple panels by default.

Multiple panels

main.tsx

import { Accordion } from '@fluid-design/fluid-ui';
import { data } from './data';
function Example() {
  return (
    <Accordion defaultIndex={[0, 1]} multiple>
      {data.map((item, index) => (
        <Accordion.Panel key={index} header={item.title}>
          {item.details}
        </Accordion.Panel>
      ))}
    </Accordion>
  );
}

With Icons

You can use headerIcon to add an icon to the header. The icon needs to be a function, you can import them from libraries such as react-icons or heroicons.

Custom icons

main.tsx

import { Accordion } from '@fluid-design/fluid-ui';
import { data } from './data';
function Example() {
  return (
    <Accordion defaultIndex={1}>
      {dataWithIcons.map((item, index) => (
        <Accordion.Panel
          key={index}
          header={item.title}
          iconStart={item.Icon}
        >
          {item.details}
        </Accordion.Panel>
      ))}
    </Accordion>
  );
}

Component API

Accordion

The wrapper for the accordion panels.

Prop	Default	Description
`defaultIndex`	`undefined`	`Number \| Array\<Number\>` The index of the panel to be open by default
`multiple`	`false`	`Boolean` Whether to allow multiple panels to be open at the same time
`divider`	`false`	`Boolean` Whether to show a divider between panels

Accordion.Panel

Prop	Default	Description
`header`		`String \| React.Element` The header of the panel
`headerIcon`		`Function` The icon to show in the header
`arrowIcon`		`Function` The icon to show in the header