Skip to main content
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

​
Default Open

Use default_open_items to expand items when the accordion first renders. Pass an index or title. You can also assign a stable value to items and reference them by name, which is useful when item order might change: 
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.

​
API Reference

Accordion Parameters

​
default_open_items
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.
​
multiple
bool
default:"False"
Allow multiple items to be open simultaneously.
​
collapsible
bool
default:"True"
Whether the open item can be collapsed.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

AccordionItem Parameters

​
title
str
required
Trigger label text. Can be passed as a positional argument.
​
value
str | None
default:"None"
Unique value identifying this item. Defaults to the title.

​
Protocol Reference

Accordion
{
  "type": "Accordion",
  "children?": "[Component]",
  "multiple?": false,
  "collapsible?": true,
  "default_open_items?": "number | string | Action[]",
  "defaultValues?": "Action[]",
  "cssClass?": "string"
}
AccordionItem
{
  "type": "AccordionItem",
  "children?": "[Component]",
  "title": "string (required)",
  "value?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Accordion, AccordionItem.