;
};
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
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"
}
]
}
]
}
}
```
## Default Open
Use `default_open_items` to expand items when the accordion first renders. Pass an index or title.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"
}
]
}
]
}
}
```
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} theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"
}
]
}
]
}
}
```
## API Reference
Initially expanded item(s). Pass an index to select by position, or a string to match by title.
Allow multiple items to be open simultaneously.
Whether the open item can be collapsed.
Additional Tailwind CSS classes.
Trigger label text. Can be passed as a positional argument.
Unique value identifying this item. Defaults to the title.
## Protocol Reference
```json Accordion theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Accordion",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"multiple?": false,
"collapsible?": true,
"default_open_items?": "number | string | number[]",
"defaultValues?": "string[]",
"cssClass?": "string"
}
```
```json AccordionItem theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "AccordionItem",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"title": "string (required)",
"value?": "string",
"cssClass?": "string"
}
```
For the complete protocol schema, see [Accordion](/protocol/accordion), [AccordionItem](/protocol/accordion-item).