Skip to main content

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
Copy

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
Copy

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
Copy

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.

PropDefaultDescription
defaultIndexundefinedNumber | Array\<Number\>

The index of the panel to be open by default

multiplefalseBoolean

Whether to allow multiple panels to be open at the same time

dividerfalseBoolean

Whether to show a divider between panels

Accordion.Panel

PropDefaultDescription
headerString | React.Element

The header of the panel

headerIconFunction

The icon to show in the header

arrowIconFunction

The icon to show in the header