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>

Examples

Open multiple panels

You can set up the accordion to allow multiple panels to be open at the same time using the multiple prop.

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

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

loopFocus

boolean

true

Name: loopFocus
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

multiple

boolean

true

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

disabled

boolean

false

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

orientation

Orientation

'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 | undefined)

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Accordion.Root.State, ) => CSSProperties | undefined) | undefined

keepMounted

boolean

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

any

—

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: any
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

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 | undefined)

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Accordion.Item.State, ) => CSSProperties | undefined) | undefined

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 | undefined)

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Accordion.Item.State, ) => CSSProperties | undefined) | undefined

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

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 | undefined)

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Accordion.Item.State, ) => CSSProperties | undefined) | undefined

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

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 | undefined)

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Accordion.Panel.State, ) => CSSProperties | undefined) | undefined

keepMounted

boolean

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.