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>
  );
}

Anatomy

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>

API reference

Root

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

defaultValue

any[]

Name: defaultValue
Description: The uncontrolled value of the item(s) that should be initially expanded.

To render a controlled accordion, use the value prop instead.
Type: any[] | undefined

value

any[]

Name: value
Description: The controlled value of the item(s) that should be expanded.

To render an uncontrolled accordion, use the defaultValue prop instead.
Type: any[] | undefined

onValueChange

function

Name: onValueChange
Description: Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
Type: | (( value: any[], eventDetails: Accordion.Root.ChangeEventDetails, ) => void) | undefined

hiddenUntilFound

boolean

(default:

false

)

Name: hiddenUntilFound
Description: Allows the browser’s built-in page search to find and expand the panel contents.

Overrides the keepMounted prop and uses hidden="until-found" to hide the element without removing it from the DOM.
Type: boolean | undefined
Default: false

multiple

boolean

(default:

true

)

Name: multiple
Description: Whether multiple items can be open at the same time.
Type: boolean | undefined
Default: true

disabled

boolean

(default:

false

)

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

loop

boolean

(default:

true

)

Name: loop
Description: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Type: boolean | undefined
Default: true

orientation

Orientation

(default:

'vertical'

)

Name: orientation
Description: The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys.
Type: 'horizontal' | 'vertical' | undefined
Default: 'vertical'

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Accordion.Root.State) => string)

keepMounted

boolean

(default:

false

)

Name: keepMounted
Description: Whether to keep the element in the DOM while the panel is closed. This prop is ignored when hiddenUntilFound is used.
Type: boolean | undefined
Default: false

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Accordion.Root.State, ) => ReactElement)

data-orientation

Indicates the orientation of the accordion.

data-disabled

Present when the accordion is disabled.

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

Item

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

value

AccordionItemValue

Name: value
Description: A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state.
Type: AccordionItemValue
Example: <Accordion.Root value={['a']}> <Accordion.Item value="a" /> // initially open <Accordion.Item value="b" /> // initially closed </Accordion.Root>

onOpenChange

function

Name: onOpenChange
Description: Event handler called when the panel is opened or closed.
Type: | (( open: boolean, eventDetails: Accordion.Item.ChangeEventDetails, ) => void) | undefined

disabled

boolean

(default:

false

)

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Accordion.Item.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Accordion.Item.State, ) => ReactElement)

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.

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.

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Accordion.Item.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Accordion.Item.State, ) => ReactElement)

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.

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.

nativeButton

boolean

(default:

true

)

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Accordion.Item.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Accordion.Item.State, ) => ReactElement)

data-panel-open

Present when the accordion panel is open.

data-disabled

Present when the accordion item is disabled.

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.

hiddenUntilFound

boolean

(default:

false

)

Name: hiddenUntilFound
Description: Allows the browser’s built-in page search to find and expand the panel contents.

Overrides the keepMounted prop and uses hidden="until-found" to hide the element without removing it from the DOM.
Type: boolean | undefined
Default: false

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Accordion.Panel.State) => string)

keepMounted

boolean

(default:

false

)

Name: keepMounted
Description: Whether to keep the element in the DOM while the panel is closed. This prop is ignored when hiddenUntilFound is used.
Type: boolean | undefined
Default: false

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Accordion.Panel.State, ) => ReactElement)

data-open

Present when the accordion panel is open.

data-orientation

Indicates the orientation of the accordion.

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.

Attribute	Description
`data-open`	Present when the accordion panel is open.
`data-orientation`	Indicates the orientation of the accordion.
`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.

--accordion-panel-height

The accordion panel's height.

--accordion-panel-width

The accordion panel's width.