Skip to main content

​
Import

from reflex_ui import accordion

​
Description

An accordion component that displays collapsible content panels with support for multiple open items and keyboard navigation.

​
Basic Usage

# High-level API
accordion(
    items=[
        {"trigger": "Section 1", "content": "Content 1"},
        {"trigger": "Section 2", "content": "Content 2"},
        {"trigger": "Section 3", "content": "Content 3"},
    ]
)

# With state binding
accordion(
    items=State.items,
    value=State.open_items,
    on_value_change=State.set_open_items
)

​
High-Level Props

​
items
Var[list[dict[str, str | Component]]] | list[dict[str, str | Component]]
required
List of dictionaries with ‘trigger’, ‘content’, and optional ‘value’ and ‘disabled’ keys.

​
Root Props

​
value
Var[list[Any]] | list[Any]
The controlled value of the item(s) that should be expanded.
​
default_value
Var[list[Any]] | list[Any]
The uncontrolled value of item(s) initially expanded.
​
multiple
Var[bool] | bool
default:"True"
Whether multiple items can be open at the same time.
​
disabled
Var[bool] | bool
default:"False"
Whether the component should ignore user interaction.
​
orientation
Literal['horizontal', 'vertical'] | Var[...]
default:"vertical"
The visual orientation of the accordion. Controls arrow key navigation.
​
loop_focus
Var[bool] | bool
default:"True"
Whether to loop keyboard focus back to the first item when reaching the end.
​
keep_mounted
Var[bool] | bool
default:"False"
Whether to keep the element in the DOM while the panel is closed.
​
hidden_until_found
Var[bool] | bool
default:"False"
Allows browser’s built-in page search to find and expand panel contents. Uses hidden="until-found".

​
Event Handlers

​
on_value_change
EventType[()] | EventType[list[str]]
Event handler called when an accordion item is expanded or collapsed. Provides the new value.

​
Item Props

When using the compositional API:
​
value
Var[str] | str
required
The value that identifies this item.
​
disabled
Var[bool] | bool
default:"False"
Whether this specific item should ignore user interaction.
​
on_open_change
EventType[()] | EventType[bool]
Event handler called when the panel is opened or closed.

​
Subcomponents

​
accordion.root

Groups all parts of the accordion. 
accordion.root(
    accordion.item(...),
    accordion.item(...),
    multiple=True,
    **props
) -> AccordionRoot

​
accordion.item

Groups an accordion header with the corresponding panel. 
accordion.item(
    accordion.header(
        accordion.trigger("Title")
    ),
    accordion.panel("Content"),
    value="item-1",
    **props
) -> AccordionItem

​
accordion.header

A heading that labels the corresponding panel. 
accordion.header(*children, **props) -> AccordionHeader

​
accordion.trigger

A button that opens and closes the corresponding panel. 
accordion.trigger(
    "Section Title",
    native_button=True,
    **props
) -> AccordionTrigger
​
native_button
Var[bool] | bool
default:"True"
Whether the component renders a native button element when using render prop.

​
accordion.panel

A collapsible panel with the accordion item contents. 
accordion.panel(
    "Panel content",
    keep_mounted=False,
    hidden_until_found=False,
    **props
) -> AccordionPanel
​
hidden_until_found
Var[bool] | bool
default:"False"
Allows browser’s page search to find and expand panel contents.
​
keep_mounted
Var[bool] | bool
default:"False"
Whether to keep the element in the DOM while closed.

​
Class Names Reference

accordion.class_names.ROOT          # Root container classes
accordion.class_names.ITEM          # Item container classes
accordion.class_names.HEADER        # Header classes
accordion.class_names.TRIGGER       # Trigger button classes
accordion.class_names.PANEL         # Panel classes
accordion.class_names.PANEL_DIV     # Panel content wrapper classes
accordion.class_names.TRIGGER_ICON  # Trigger icon classes

​
ROOT Class

"flex flex-col justify-center shadow-small border border-secondary-a4 divide-y divide-secondary-a4 overflow-hidden rounded-xl"

​
TRIGGER Class

"group relative flex w-full items-center justify-between gap-4 bg-secondary-1 hover:bg-secondary-3 px-6 py-4 text-md font-semibold text-secondary-12 transition-colors disabled:cursor-not-allowed disabled:bg-secondary-3 disabled:text-secondary-8 disabled:[&_svg]:text-secondary-8 [&_svg]:text-secondary-11"

​
PANEL Class

"h-[var(--accordion-panel-height)] overflow-hidden text-base text-secondary-11 font-medium transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 border-t border-secondary-a4"

​
TRIGGER_ICON Class

"size-4 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45"

​
Method Signatures

​
HighLevelAccordion.create

@classmethod
def create(
    cls,
    *children,
    items: Var[list[dict[str, Component | str]]] | list[dict[str, Component | str]] | None = None,
    value: Var[list[Any]] | list[Any] | None = None,
    default_value: Var[list[Any]] | list[Any] | None = None,
    multiple: Var[bool] | bool | None = None,
    disabled: Var[bool] | bool | None = None,
    orientation: Literal["horizontal", "vertical"] | Var[...] | None = None,
    loop_focus: Var[bool] | bool | None = None,
    on_value_change: EventType[()] | EventType[list[str]] | None = None,
    **props
) -> HighLevelAccordion

​
AccordionRoot.create

@classmethod
def create(
    cls,
    *children,
    value: Var[list[Any]] | list[Any] | None = None,
    default_value: Var[list[Any]] | list[Any] | None = None,
    multiple: Var[bool] | bool | None = None,
    disabled: Var[bool] | bool | None = None,
    orientation: Literal["horizontal", "vertical"] | Var[...] | None = None,
    on_value_change: EventType[()] | EventType[list[str]] | None = None,
    **props
) -> AccordionRoot

​
AccordionItem.create

@classmethod
def create(
    cls,
    *children,
    value: Var[str] | str | None = None,
    disabled: Var[bool] | bool | None = None,
    on_open_change: EventType[()] | EventType[bool] | None = None,
    **props
) -> AccordionItem

​
Return Types

  • HighLevelAccordion - Complete accordion with automatic structure
  • AccordionRoot - Root accordion container
  • AccordionItem - Individual accordion item
  • AccordionHeader - Item header wrapper
  • AccordionTrigger - Trigger button
  • AccordionPanel - Collapsible panel

Build docs developers (and LLMs) love

Get started for freeTalk to us