# Accordion (/docs/accordion)





## API Reference [#api-reference]

<BaseUIReference href="https://base-ui.com/react/components/accordion" />

## Basic [#basic]

<Preview cssProperties="accordionPlaygroundCssProperties">
  <AccordionExample defaultValue="[&#x22;what-is-base-ui&#x22;]" />

  <Preview.Code>
    {`
          import {
            Accordion,
            AccordionItem,
            AccordionPanel,
            AccordionTrigger,
          } from "moduix";

          export function AccordionDemo() {
            return (
              <Accordion defaultValue={["what-is-base-ui"]}>
                {items.map((item) => (
                  <AccordionItem key={item.value} value={item.value}>
                    <AccordionTrigger>{item.title}</AccordionTrigger>
                    <AccordionPanel>
                      <div className={styles.panelContent}>{item.description}</div>
                    </AccordionPanel>
                  </AccordionItem>
                ))}
              </Accordion>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .panelContent {
            padding: var(--spacing-3);
          }
        `}
  </Preview.CSS>

  <Preview.Data>
    {`
          const items = [
            {
              value: "what-is-base-ui",
              title: "What is Base UI?",
              description:
                "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
            },
            {
              value: "getting-started",
              title: "How do I get started?",
              description:
                "Head to the Quick start guide in the docs. If you have used unstyled libraries before, you will feel at home.",
            },
            {
              value: "can-i-use-it",
              title: "Can I use it for my project?",
              description: "Of course. Base UI is free and open source.",
            },
          ];
        `}
  </Preview.Data>

  <Preview.CSSProperties>
    {(context) => <AccordionCssPropertiesPanel {...context} />}
  </Preview.CSSProperties>

  <Preview.CSSPlayground>
    {(context) => <AccordionCssPlaygroundPanel {...context} />}
  </Preview.CSSPlayground>
</Preview>

## Anatomy [#anatomy]

`Accordion` is composed as a stack of independent items. Keep the trigger and panel inside the same
`AccordionItem` so their state and accessibility wiring stay paired.

```text
Accordion
└─ AccordionItem[value]
   ├─ AccordionTrigger
   │  ├─ label
   │  └─ icon
   └─ AccordionPanel
      └─ content
```

```tsx
<Accordion defaultValue={['shipping']}>
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping details</AccordionTrigger>
    <AccordionPanel>
      <div className={styles.panelContent}>Delivery times, prices, and tracking options.</div>
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

| Part               | Role                                                                                                             |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `Accordion`        | Root state machine. Controls open values, keyboard navigation, `multiple`, `disabled`, and `orientation`.        |
| `AccordionItem`    | One collapsible row. Its `value` identifies the row for `defaultValue`, controlled `value`, and change handlers. |
| `AccordionTrigger` | Semantic heading and interactive button. It opens or closes the matching panel and renders a default icon.       |
| `AccordionPanel`   | The collapsible content region. Put padding/content wrappers inside it so panel height animations stay clean.    |

`AccordionTrigger` renders the Base UI header internally so the common composition stays compact.
Use `classNames.header`, `classNames.icon`, `slotProps.header`, and `slotProps.icon` when you need
to style or customize those internal slots. `AccordionHeader` and `AccordionTriggerIcon` are still
exported for advanced manual composition, but most projects do not need them.

## Composition [#composition]

Use `Accordion` for root state and behavior props such as `value`, `defaultValue`,
`onValueChange`, `multiple`, `disabled`, `orientation`, and `loopFocus`. Use `keepMounted`
or `hiddenUntilFound` on the root or panel when closed content must stay in the DOM.

Style the public parts with `className` on `Accordion`, `AccordionItem`, `AccordionTrigger`,
and `AccordionPanel`. `AccordionTrigger` also accepts `icon`, `hideIcon`, `classNames`, and
`slotProps` for the internal header and icon slots. All Base UI behavior props such as `render`,
`keepMounted`, and `hiddenUntilFound` pass through to the matching primitive part.

## Examples [#examples]

### Multiple [#multiple]

Use the `multiple` prop to allow multiple items to be open at the same time.

<Preview>
  <AccordionExample defaultValue="[&#x22;what-is-base-ui&#x22;, &#x22;can-i-use-it&#x22;]" />

  <Preview.Code>
    {`
          import {
            Accordion,
            AccordionItem,
            AccordionPanel,
            AccordionTrigger,
          } from "moduix";

          export function MultipleAccordionDemo() {
            return (
              <Accordion multiple defaultValue={["what-is-base-ui", "can-i-use-it"]}>
                {items.map((item) => (
                  <AccordionItem key={item.value} value={item.value}>
                    <AccordionTrigger>{item.title}</AccordionTrigger>
                    <AccordionPanel>
                      <div className={styles.panelContent}>{item.description}</div>
                    </AccordionPanel>
                  </AccordionItem>
                ))}
              </Accordion>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .panelContent {
            padding: var(--spacing-3);
          }
        `}
  </Preview.CSS>

  <Preview.Data>
    {`
          const items = [
            {
              value: "what-is-base-ui",
              title: "What is Base UI?",
              description:
                "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
            },
            {
              value: "getting-started",
              title: "How do I get started?",
              description:
                "Head to the Quick start guide in the docs. If you have used unstyled libraries before, you will feel at home.",
            },
            {
              value: "can-i-use-it",
              title: "Can I use it for my project?",
              description: "Of course. Base UI is free and open source.",
            },
          ];
        `}
  </Preview.Data>
</Preview>

### Controlled [#controlled]

Control the open panels from React state when the accordion needs to coordinate with other UI.

<Preview>
  <ControlledAccordionExample />

  <Preview.Code>
    {`
          import {
            Accordion,
            AccordionItem,
            AccordionPanel,
            AccordionTrigger,
          } from "moduix";
          import { useState } from "react";

          export function ControlledAccordionDemo() {
            const [value, setValue] = useState(["getting-started"] as string[])

            return (
              <Accordion value={value} onValueChange={setValue}>
                {items.map((item) => (
                  <AccordionItem key={item.value} value={item.value}>
                    <AccordionTrigger>{item.title}</AccordionTrigger>
                    <AccordionPanel>
                      <div className={styles.panelContent}>{item.description}</div>
                    </AccordionPanel>
                  </AccordionItem>
                ))}
              </Accordion>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .panelContent {
            padding: var(--spacing-3);
          }
        `}
  </Preview.CSS>

  <Preview.Data>
    {`
          const items = [
            {
              value: "what-is-base-ui",
              title: "What is Base UI?",
              description:
                "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
            },
            {
              value: "getting-started",
              title: "How do I get started?",
              description:
                "Head to the Quick start guide in the docs. If you have used unstyled libraries before, you will feel at home.",
            },
            {
              value: "can-i-use-it",
              title: "Can I use it for my project?",
              description: "Of course. Base UI is free and open source.",
            },
          ];
        `}
  </Preview.Data>
</Preview>

### Disabled Item [#disabled-item]

Set `disabled` on an item to keep it visible while preventing interaction.

<Preview>
  <DisabledItemAccordionExample />

  <Preview.Code>
    {`
          import {
            Accordion,
            AccordionItem,
            AccordionPanel,
            AccordionTrigger,
          } from "moduix";

          export function DisabledItemAccordionDemo() {
            return (
              <Accordion defaultValue={["what-is-base-ui"]}>
                {items.map((item) => (
                  <AccordionItem
                    key={item.value}
                    value={item.value}
                    disabled={item.value === "getting-started"}
                  >
                    <AccordionTrigger>{item.title}</AccordionTrigger>
                    <AccordionPanel>
                      <div className={styles.panelContent}>{item.description}</div>
                    </AccordionPanel>
                  </AccordionItem>
                ))}
              </Accordion>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .panelContent {
            padding: var(--spacing-3);
          }
        `}
  </Preview.CSS>

  <Preview.Data>
    {`
          const items = [
            {
              value: "what-is-base-ui",
              title: "What is Base UI?",
              description:
                "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
            },
            {
              value: "getting-started",
              title: "How do I get started?",
              description:
                "Head to the Quick start guide in the docs. If you have used unstyled libraries before, you will feel at home.",
            },
            {
              value: "can-i-use-it",
              title: "Can I use it for my project?",
              description: "Of course. Base UI is free and open source.",
            },
          ];
        `}
  </Preview.Data>
</Preview>

### Custom Icon [#custom-icon]

Pass `icon` to replace the default visual marker and style the icon slot with `classNames.icon`.

<Preview>
  <CustomStylesAccordionExample />

  <Preview.Code>
    {`
          import {
            Accordion,
            AccordionItem,
            AccordionPanel,
            AccordionTrigger,
            ChevronDownIcon,
          } from "moduix";

          export function CustomStylesAccordionDemo() {
            return (
              <Accordion defaultValue={["what-is-base-ui"]}>
                {items.map((item) => (
                  <AccordionItem key={item.value} value={item.value}>
                    <AccordionTrigger
                      icon={<ChevronDownIcon />}
                      classNames={{ icon: styles.customIcon }}
                    >
                      {item.title}
                    </AccordionTrigger>
                    <AccordionPanel>
                      <div className={styles.panelContent}>{item.description}</div>
                    </AccordionPanel>
                  </AccordionItem>
                ))}
              </Accordion>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .panelContent {
            padding: var(--spacing-3);
          }

          .customIcon {
            --accordion-icon-open-transform: rotate(180deg);
          }
        `}
  </Preview.CSS>

  <Preview.Data>
    {`
          const items = [
            {
              value: "what-is-base-ui",
              title: "What is Base UI?",
              description:
                "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
            },
            {
              value: "getting-started",
              title: "How do I get started?",
              description:
                "Head to the Quick start guide in the docs. If you have used unstyled libraries before, you will feel at home.",
            },
            {
              value: "can-i-use-it",
              title: "Can I use it for my project?",
              description: "Of course. Base UI is free and open source.",
            },
          ];
        `}
  </Preview.Data>
</Preview>