# Accordion

Keep optional details available without lengthening the main path.

import { AccordionItem, Accordions } from '@prosefly/astro-components';

Use accordions for supporting details, troubleshooting notes, FAQs, or advanced
options. Do not hide required steps in an accordion; readers should be able to
complete the main task by scanning the visible page.

`Accordions` uses a light-DOM custom element around native `details` and
`summary` elements. Groups initialize when inserted and release listeners when
removed, including during Astro page transitions. Reconnecting a group preserves
its open state, and nested groups manage their own items independently.

## Import

```mdx
import { AccordionItem, Accordions } from '@prosefly/astro-components';
```

## Basic Usage

<Accordions>
  <AccordionItem title="Can I use these components without a Prosefly theme?">
    Yes. Import them directly from `@prosefly/astro-components` in any Astro or
    MDX page, and register `@prosefly/astro-components/integration` when you want
    the shared Markdown, icon, and gallery setup.
  </AccordionItem>
  <AccordionItem title="Do Prosefly themes need extra component configuration?">
    No. [Dahlia](https://astro-theme-dahlia.prosefly.dev/) and
    [Lotus](https://astro-theme-lotus.prosefly.dev/) register the shared
    `proseflyComponents()` integration automatically.
  </AccordionItem>
</Accordions>

```mdx
<Accordions>
  <AccordionItem title="Can I use these components without a Prosefly theme?">
    Yes. Import them directly from `@prosefly/astro-components` in any Astro or
    MDX page, and register `@prosefly/astro-components/integration` when you want
    the shared Markdown, icon, and gallery setup.
  </AccordionItem>
  <AccordionItem title="Do Prosefly themes need extra component configuration?">
    No. [Dahlia](https://astro-theme-dahlia.prosefly.dev/) and
    [Lotus](https://astro-theme-lotus.prosefly.dev/) register the shared
    `proseflyComponents()` integration automatically.
  </AccordionItem>
</Accordions>
```

## Multiple Open Items

By default, opening one item closes the others. Set `multiple` when several
answers should remain open for comparison.

<Accordions multiple defaultValue={['requirements', 'limits']}>
  <AccordionItem title="Requirements" value="requirements">
    Use Astro v7 or newer and enable MDX in the project that renders the docs.
  </AccordionItem>
  <AccordionItem title="Limits" value="limits">
    Accordions are for optional detail. Keep required setup steps visible.
  </AccordionItem>
  <AccordionItem title="Disabled item" disabled>
    Disabled items remain visible but cannot be opened by the interaction
    script.
  </AccordionItem>
</Accordions>

```mdx
<Accordions multiple defaultValue={['requirements', 'limits']}>
  <AccordionItem title="Requirements" value="requirements">
    Use Astro v7 or newer and enable MDX in the project that renders the docs.
  </AccordionItem>
  <AccordionItem title="Limits" value="limits">
    Accordions are for optional detail. Keep required setup steps visible.
  </AccordionItem>
  <AccordionItem title="Disabled item" disabled>
    Disabled items remain visible but cannot be opened by the interaction
    script.
  </AccordionItem>
</Accordions>
```

## Props

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Accordions` | `multiple` | `boolean` | Allows more than one item to stay open. |
| `Accordions` | `defaultValue` | `string \| string[]` | Opens matching item values on load. |
| `AccordionItem` | `title` | `string` | Required summary text. |
| `AccordionItem` | `value` | `string` | Stable item value, defaults to `id` or `title`. |
| `AccordionItem` | `defaultOpen` | `boolean` | Opens the item before client behavior runs. |
| `AccordionItem` | `disabled` | `boolean` | Marks the item as disabled. |