Accordion

A set of collapsible panels with headings.

import * as React from 'react';
import { Accordion } from '@base-ui/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/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.

defaultValueValue[]—

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: Value[] | undefined

valueValue[]—

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: Value[] | undefined

onValueChangefunction—

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

hiddenUntilFoundbooleanfalse

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

loopFocusbooleantrue

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

multiplebooleanfalse

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

disabledbooleanfalse

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

orientationOrientation'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'

classNamestring | 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<Value>, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Accordion.Root.State<Value>, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

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

renderReactElement | 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<Value>, ) => ReactElement) | undefined

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.

Accordion.Root.PropsHide

Re-Export of Root props as AccordionRootProps

Accordion.Root.StateHide

type AccordionRootState<TValue = any> = {
  /** The current value. */
  value: TValue[];
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** The component orientation. */
  orientation: 'horizontal' | 'vertical';
}

Accordion.Root.ChangeEventReasonHide

type AccordionRootChangeEventReason = 'trigger-press' | 'none'

Accordion.Root.ChangeEventDetailsHide

type AccordionRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

Accordion.Root.ValueHide

type AccordionRootValue<TValue = any> = TValue[]

Item

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

valueany—

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 | undefined
Example: <Accordion.Root value={['a']}> <Accordion.Item value="a" /> // initially open <Accordion.Item value="b" /> // initially closed </Accordion.Root>

onOpenChangefunction—

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

disabledbooleanfalse

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

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

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Accordion.Item.State, ) => React.CSSProperties | undefined) | undefined

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

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.

Accordion.Item.PropsHide

Re-Export of Item props as AccordionItemProps

Accordion.Item.StateHide

type AccordionItemState = {
  /** The item index. */
  index: number;
  /** Whether the component is open. */
  open: boolean;
  /** The current value. */
  value: any[];
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** The component orientation. */
  orientation: 'horizontal' | 'vertical';
}

Accordion.Item.ChangeEventReasonHide

type AccordionItemChangeEventReason = 'trigger-press' | 'none'

Accordion.Item.ChangeEventDetailsHide

type AccordionItemChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

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

classNamestring | 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.Header.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Accordion.Header.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | 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.Header.State, ) => ReactElement) | undefined

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.

Accordion.Header.StateHide

type AccordionHeaderState = {
  /** The item index. */
  index: number;
  /** Whether the component is open. */
  open: boolean;
  /** The current value. */
  value: any[];
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** The component orientation. */
  orientation: 'horizontal' | 'vertical';
}

Trigger

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

nativeButtonbooleantrue

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 (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | 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.Trigger.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Accordion.Trigger.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | 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.Trigger.State, ) => ReactElement) | undefined

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.

Accordion.Trigger.PropsHide

Re-Export of Trigger props as AccordionTriggerProps

Accordion.Trigger.StateHide

type AccordionTriggerState = {
  /** The item index. */
  index: number;
  /** Whether the component is open. */
  open: boolean;
  /** The current value. */
  value: any[];
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** The component orientation. */
  orientation: 'horizontal' | 'vertical';
}

Panel

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

hiddenUntilFoundbooleanfalse

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

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

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Accordion.Panel.State, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

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

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

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.

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

Accordion.Panel.PropsHide

Re-Export of Panel props as AccordionPanelProps

Accordion.Panel.StateHide

type AccordionPanelState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** The item index. */
  index: number;
  /** Whether the component is open. */
  open: boolean;
  /** The current value. */
  value: any[];
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** The component orientation. */
  orientation: 'horizontal' | 'vertical';
}

Accordion

What is Base UI?

How do I get started?

Can I use it for my project?

What is Base UI?

How do I get started?

Can I use it for my project?

Accordion.Root.PropsHide

Accordion.Root.StateHide

Accordion.Root.ChangeEventReasonHide

Accordion.Root.ChangeEventDetailsHide

Accordion.Root.ValueHide

Accordion.Item.PropsHide

Accordion.Item.StateHide

Accordion.Item.ChangeEventReasonHide

Accordion.Item.ChangeEventDetailsHide

Accordion.Header.PropsHide

Accordion.Header.StateHide

Accordion.Trigger.PropsHide

Accordion.Trigger.StateHide

Accordion.Panel.PropsHide

Accordion.Panel.StateHide