> For the complete documentation index, see [llms.txt](https://docs.frayme.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frayme.ai/components/components/layout/accordion.md).

# Accordion

Collapsible sections. Items as \[{title, content}]. Type 'single' (default) or 'multiple'. Bind `openIndexes` with { $bindState } so the agent (or a sibling control) can read which section indexes are currently expanded from spec.state.

## Example

```json
{
  "root": "accordion",
  "elements": {
    "accordion": {
      "type": "Accordion",
      "props": {
        "items": [
          {
            "title": "Shipping",
            "content": "Ships in 2-3 business days."
          },
          {
            "title": "Returns",
            "content": "Free returns within 30 days."
          },
          {
            "title": "Warranty",
            "content": "Covered for 1 year from purchase."
          }
        ],
        "type": "single",
        "defaultOpenIndex": null,
        "variant": null,
        "size": null,
        "radius": null,
        "radiusValue": null,
        "borderColor": null,
        "accent": null,
        "mutedColor": null,
        "chevronIcon": null,
        "openIndexes": null
      }
    }
  }
}
```

## Props

| Prop               | Type                                       | Description                                                                                                                                                                                                                                                                      |
| ------------------ | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `items`            | `({ title: string, content: string })[]`   | The sections as \[{title, content}] — both plain strings (content is NOT a child slot), e.g. \[{"title":"Shipping","content":"Ships in 2-3 business days."}]. For rich child components use Collapsible instead.                                                                 |
| `type`             | `"single" \| "multiple"`                   | Expansion mode: single (opening one section closes the others, default) · multiple (sections open and close independently).                                                                                                                                                      |
| `defaultOpenIndex` | `number \| number[]`                       | Item index (or indices, with type:multiple) expanded by default. Omit to start fully collapsed.                                                                                                                                                                                  |
| `variant`          | `"bordered" \| "separated" \| "ghost"`     | Container chrome: bordered (boxed, default) · separated (gapped cards) · ghost (borderless).                                                                                                                                                                                     |
| `size`             | `"sm" \| "md" \| "lg"`                     | Section density — padding + font size of each trigger (the panel body padding follows), and the caret glyph size (14/16/18): sm · md (default) · lg.                                                                                                                             |
| `radius`           | `"none" \| "sm" \| "md" \| "lg" \| "full"` | Corner radius of the boxed container (variant:bordered) AND of each item card (variant:separated); default md.                                                                                                                                                                   |
| `radiusValue`      | `string \| number`                         | Exact corner radius of the container and of each separated item card (e.g. "12px" / "1rem"). Overrides the `radius` enum, which is the default.                                                                                                                                  |
| `borderColor`      | `string`                                   | Border color of the outer box AND the dividers between sections (each card edge on variant:separated); default the border token.                                                                                                                                                 |
| `accent`           | `string`                                   | Open-item title + caret color. Names a specific color for the active section.                                                                                                                                                                                                    |
| `mutedColor`       | `string`                                   | Secondary/muted text colour — the expanded panel body copy (default the muted-foreground token).                                                                                                                                                                                 |
| `chevronIcon`      | `string`                                   | Expand/collapse caret glyph — an icon NAME from the closed registry (e.g. "chevron-down", "plus"). Unknown/omitted → the default ▾ caret. Never raw SVG.                                                                                                                         |
| `openIndexes`      | `number[]`                                 | Indexes of the currently-expanded sections, mirrored back here into (bindable) spec.state on every toggle. Bind with { $bindState } so a Button/agent can read which sections are open; with type:single it holds at most one index. Seeds from `defaultOpenIndex` when omitted. |

## Events

### change

A section was expanded or collapsed; params carry {openIndexes} — the full resolved array of currently-expanded item indexes (with type:single it holds at most one).

| Key     | Type      | Description                                           |
| ------- | --------- | ----------------------------------------------------- |
| `value` | `unknown` | Optional. The new value after the change.             |
| `name`  | `string`  | Optional. The control’s machine name when it has one. |

See [Events](/components/events.md) for the full payload contract.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frayme.ai/components/components/layout/accordion.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.