---
title: Accordion
description: Collapsible content sections for progressive disclosure.
icon: bars-staggered
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

Accordions let users expand and collapse sections to reveal content progressively. Each `AccordionItem` has a clickable title and hidden content that appears on expand.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Accordion","multiple":false,"collapsible":true,"children":[{"type":"AccordionItem","title":"What is the Answer?","children":[{"content":"Forty-two. The Answer to the Ultimate Question of Life, the Universe, and Everything.","type":"Text"}]},{"type":"AccordionItem","title":"What is the Heart of Gold?","children":[{"content":"A starship powered by the Infinite Improbability Drive. It can pass through every conceivable point in every conceivable universe almost simultaneously.","type":"Text"}]},{"type":"AccordionItem","title":"What is Deep Thought?","children":[{"content":"A supercomputer designed to find the Answer to the Ultimate Question. It took 7.5 million years to compute: 42.","type":"Text"}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Accordion, AccordionItem, Text

with Accordion():
    with AccordionItem("What is the Answer?"):
        Text(
            "Forty-two. The Answer to the Ultimate "
            "Question of Life, the Universe, and "
            "Everything."
        )
    with AccordionItem("What is the Heart of Gold?"):
        Text(
            "A starship powered by the Infinite "
            "Improbability Drive. It can pass through "
            "every conceivable point in every "
            "conceivable universe almost simultaneously."
        )
    with AccordionItem("What is Deep Thought?"):
        Text(
            "A supercomputer designed to find the "
            "Answer to the Ultimate Question. It took "
            "7.5 million years to compute: 42."
        )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Accordion",
    "multiple": false,
    "collapsible": true,
    "children": [
      {
        "type": "AccordionItem",
        "title": "What is the Answer?",
        "children": [
          {
            "content": "Forty-two. The Answer to the Ultimate Question of Life, the Universe, and Everything.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "What is the Heart of Gold?",
        "children": [
          {
            "content": "A starship powered by the Infinite Improbability Drive. It can pass through every conceivable point in every conceivable universe almost simultaneously.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "What is Deep Thought?",
        "children": [
          {
            "content": "A supercomputer designed to find the Answer to the Ultimate Question. It took 7.5 million years to compute: 42.",
            "type": "Text"
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Default Open

Use `default_open_items` to expand items when the accordion first renders. Pass an index or title.

<ComponentPreview json={{"view":{"type":"Accordion","multiple":false,"collapsible":true,"defaultValues":["What is the Answer?"],"children":[{"type":"AccordionItem","title":"What is the Answer?","children":[{"content":"Forty-two. The Answer to the Ultimate Question of Life, the Universe, and Everything.","type":"Text"}]},{"type":"AccordionItem","title":"What is the Heart of Gold?","children":[{"content":"A starship powered by the Infinite Improbability Drive. It can pass through every conceivable point in every conceivable universe almost simultaneously.","type":"Text"}]},{"type":"AccordionItem","title":"What is Deep Thought?","children":[{"content":"A supercomputer designed to find the Answer to the Ultimate Question. It took 7.5 million years to compute: 42.","type":"Text"}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Accordion, AccordionItem, Text

with Accordion(default_open_items=0):
    with AccordionItem("What is the Answer?"):
        Text(
            "Forty-two. The Answer to the Ultimate "
            "Question of Life, the Universe, and "
            "Everything."
        )
    with AccordionItem("What is the Heart of Gold?"):
        Text(
            "A starship powered by the Infinite "
            "Improbability Drive. It can pass through "
            "every conceivable point in every "
            "conceivable universe almost simultaneously."
        )
    with AccordionItem("What is Deep Thought?"):
        Text(
            "A supercomputer designed to find the "
            "Answer to the Ultimate Question. It took "
            "7.5 million years to compute: 42."
        )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Accordion",
    "multiple": false,
    "collapsible": true,
    "defaultValues": ["What is the Answer?"],
    "children": [
      {
        "type": "AccordionItem",
        "title": "What is the Answer?",
        "children": [
          {
            "content": "Forty-two. The Answer to the Ultimate Question of Life, the Universe, and Everything.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "What is the Heart of Gold?",
        "children": [
          {
            "content": "A starship powered by the Infinite Improbability Drive. It can pass through every conceivable point in every conceivable universe almost simultaneously.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "What is Deep Thought?",
        "children": [
          {
            "content": "A supercomputer designed to find the Answer to the Ultimate Question. It took 7.5 million years to compute: 42.",
            "type": "Text"
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

You can also assign a stable `value` to items and reference them by name, which is useful when item order might change:

```python {1, 2}
with Accordion(default_open_items="faq"):
    with AccordionItem("FAQ", value="faq"):
        Text("Frequently asked questions...")
    with AccordionItem("Contact"):
        Text("Get in touch...")
```

## Multiple Open

Set `multiple=True` to allow more than one section open at a time.

<ComponentPreview json={{"view":{"type":"Accordion","multiple":true,"collapsible":true,"defaultValues":["Who is Arthur Dent?","Who is Ford Prefect?"],"children":[{"type":"AccordionItem","title":"Who is Arthur Dent?","children":[{"content":"An ordinary human from Earth, unexpectedly swept into the cosmos when his planet is demolished to make way for a hyperspace bypass.","type":"Text"}]},{"type":"AccordionItem","title":"Who is Ford Prefect?","children":[{"content":"A researcher for the Hitchhiker's Guide to the Galaxy, and Arthur's best friend. He's from a small planet somewhere in the vicinity of Betelgeuse.","type":"Text"}]},{"type":"AccordionItem","title":"What is the Guide?","children":[{"content":"A digital reference with the words 'Don't Panic' written in large, friendly letters on the cover.","type":"Text"}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Accordion, AccordionItem, Text

with Accordion(
    multiple=True,
    default_open_items=[0, 1]
):
    with AccordionItem("Who is Arthur Dent?"):
        Text(
            "An ordinary human from Earth, unexpectedly "
            "swept into the cosmos when his planet is "
            "demolished to make way for a hyperspace "
            "bypass."
        )
    with AccordionItem("Who is Ford Prefect?"):
        Text(
            "A researcher for the Hitchhiker's Guide "
            "to the Galaxy, and Arthur's best friend. "
            "He's from a small planet somewhere in the "
            "vicinity of Betelgeuse."
        )
    with AccordionItem("What is the Guide?"):
        Text(
            "A digital reference with the words "
            "'Don't Panic' written in large, friendly "
            "letters on the cover."
        )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Accordion",
    "multiple": true,
    "collapsible": true,
    "defaultValues": ["Who is Arthur Dent?", "Who is Ford Prefect?"],
    "children": [
      {
        "type": "AccordionItem",
        "title": "Who is Arthur Dent?",
        "children": [
          {
            "content": "An ordinary human from Earth, unexpectedly swept into the cosmos when his planet is demolished to make way for a hyperspace bypass.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "Who is Ford Prefect?",
        "children": [
          {
            "content": "A researcher for the Hitchhiker's Guide to the Galaxy, and Arthur's best friend. He's from a small planet somewhere in the vicinity of Betelgeuse.",
            "type": "Text"
          }
        ]
      },
      {
        "type": "AccordionItem",
        "title": "What is the Guide?",
        "children": [
          {
            "content": "A digital reference with the words 'Don't Panic' written in large, friendly letters on the cover.",
            "type": "Text"
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Accordion Parameters">
<ParamField body="default_open_items" type="int | str | list[int | str] | None" default="None">
  Initially expanded item(s). Pass an index to select by position, or a string to match by title.
</ParamField>

<ParamField body="multiple" type="bool" default="False">
  Allow multiple items to be open simultaneously.
</ParamField>

<ParamField body="collapsible" type="bool" default="True">
  Whether the open item can be collapsed.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="AccordionItem Parameters">
<ParamField body="title" type="str" required>
  Trigger label text. Can be passed as a positional argument.
</ParamField>

<ParamField body="value" type="str | None" default="None">
  Unique value identifying this item. Defaults to the title.
</ParamField>
</Card>

## Protocol Reference

```json Accordion
{
  "type": "Accordion",
  "children?": "[Component]",
  "let?": "object",
  "multiple?": false,
  "collapsible?": true,
  "default_open_items?": "number | string | Action[]",
  "defaultValues?": "Action[]",
  "cssClass?": "string"
}
```

```json AccordionItem
{
  "type": "AccordionItem",
  "children?": "[Component]",
  "let?": "object",
  "title": "string (required)",
  "value?": "string",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Accordion](/protocol/accordion), [AccordionItem](/protocol/accordion-item).
