Accordion

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt

Use this file to discover all available pages before exploring further.

​

Import

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

​

Basic Usage

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>Section 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      Content for section 1
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>Section 2</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      Content for section 2
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

​

Key Features

• Controlled or Uncontrolled: Use value and onValueChange for controlled state, or defaultValue for uncontrolled.
• Multiple Expansion: Set multiple prop to allow multiple panels to be open simultaneously.
• Keyboard Navigation: Full arrow key navigation with optional loopFocus behavior.
• Orientation Support: Configure as vertical or horizontal to control keyboard navigation.
• Accessibility: Built-in ARIA attributes and proper semantic structure.
• Keep Mounted: Control whether panels stay in the DOM when closed with keepMounted.
• Hidden Until Found: Enable browser’s page search to find and expand panels with hiddenUntilFound.

​

Components

​

Accordion.Root

• value - Controlled array of open item values
• defaultValue - Initial array of open item values (uncontrolled)
• onValueChange - Callback when items are expanded/collapsed
• multiple - Allow multiple items open at once (default: false)
• disabled - Disable all user interaction (default: false)
• orientation - Visual orientation: 'vertical' or 'horizontal' (default: 'vertical')
• loopFocus - Loop focus when reaching end with arrow keys (default: true)
• keepMounted - Keep panels in DOM when closed (default: false)
• hiddenUntilFound - Allow browser search to expand panels (default: false)

​

Accordion.Item

• value - Unique identifier for this item
• disabled - Disable this specific item
• onOpenChange - Callback when this item is opened/closed

​

Accordion.Header

​

Accordion.Trigger

• disabled - Disable the trigger button
• nativeButton - Use native button behavior (default: true)

​

Accordion.Panel

• keepMounted - Keep this panel in DOM when closed
• hiddenUntilFound - Allow browser search for this panel

​

Styling Example

<Accordion.Root className="accordion">
  <Accordion.Item className="accordion-item">
    <Accordion.Header className="accordion-header">
      <Accordion.Trigger className="accordion-trigger">
        Section 1
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel className="accordion-panel">
      Content for section 1
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

.accordion-item[data-open] .accordion-trigger {
  /* Styles when item is open */
}

.accordion-panel {
  overflow: hidden;
  transition: height 200ms;
}

.accordion-panel[data-starting-style],
.accordion-panel[data-ending-style] {
  height: 0;
}

.accordion-panel[data-open] {
  height: var(--accordion-panel-height);
}

​

Multiple Panels

<Accordion.Root multiple defaultValue={['item-1', 'item-2']}>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Section 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content 1</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>Section 2</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content 2</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>