Accordion

A set of collapsible panels with headings.

import * as React from 'react';
import { Accordion } from '@base-ui-components/react/accordion';
import styles from './index.module.css';

export default function ExampleAccordion() {
  return (
    <Accordion.Root className={styles.Accordion}>
      <Accordion.Item className={styles.Item}>
        <Accordion.Header className={styles.Header}>
          <Accordion.Trigger className={styles.Trigger}>
            What is Base UI?
            <PlusIcon className={styles.TriggerIcon} />
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel className={styles.Panel}>
          <div className={styles.Content}>
            Base UI is a library of high-quality unstyled React components for design
            systems and web apps.
          </div>
        </Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item className={styles.Item}>
        <Accordion.Header className={styles.Header}>
          <Accordion.Trigger className={styles.Trigger}>
            How do I get started?
            <PlusIcon className={styles.TriggerIcon} />
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel className={styles.Panel}>
          <div className={styles.Content}>
            Head to the “Quick start” guide in the docs. If you’ve used unstyled
            libraries before, you’ll feel at home.
          </div>
        </Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item className={styles.Item}>
        <Accordion.Header className={styles.Header}>
          <Accordion.Trigger className={styles.Trigger}>
            Can I use it for my project?
            <PlusIcon className={styles.TriggerIcon} />
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel className={styles.Panel}>
          <div className={styles.Content}>
            Of course! Base UI is free and open source.
          </div>
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

function PlusIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg viewBox="0 0 12 12" fill="currentcolor" {...props}>
      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
    </svg>
  );
}

API reference

Import the component and assemble its parts:

Anatomy

import { Accordion } from '@base-ui-components/react/accordion';

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger />
    </Accordion.Header>
    <Accordion.Panel />
  </Accordion.Item>
</Accordion.Root>

Root

Groups all parts of the accordion. Renders a <div> element.

Prop	Type	Default
`defaultValue`	`array`	`undefined`
`value`	`array`	`undefined`
`onValueChange`	`(value) => void`	`undefined`
`hiddenUntilFound`	`boolean`	`false`
`openMultiple`	`boolean`	`true`
`disabled`	`boolean`	`false`
`loop`	`boolean`	`true`
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-disabled`	Present when the accordion is disabled.

Item

Groups an accordion header with the corresponding panel. Renders a <div> element.

Prop	Type	Default
`onOpenChange`	`(open) => void`	`undefined`
`disabled`	`boolean`	`false`
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-open`	Present when the accordion item is open.
`data-disabled`	Present when the accordion item is disabled.
`data-index`	Indicates the index of the accordion item.

Header

A heading that labels the corresponding panel. Renders an <h3> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-open`	Present when the accordion item is open.
`data-disabled`	Present when the accordion item is disabled.
`data-index`	Indicates the index of the accordion item.

Trigger

A button that opens and closes the corresponding panel. Renders a <button> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-panel-open`	Present when the accordion panel is open.
`data-disabled`	Present when the accordion item is disabled.

Panel

A collapsible panel with the accordion item contents. Renders a <div> element.

Prop	Type	Default
`hiddenUntilFound`	`boolean`	`false`
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-open`	Present when the accordion panel is open.
`data-disabled`	Present when the accordion item is disabled.
`data-index`	Indicates the index of the accordion item.
`data-starting-style`	Present when the panel is animating in.
`data-ending-style`	Present when the panel is animating out.

CSS Variable	Description
`--accordion-panel-height`	The accordion panel's height.
`--accordion-panel-width`	The accordion panel's width.