Skip to main content

Accordion

A Shadcn accordion: a vertical list of sections that expand to show their content.

Example:

shad.Accordion(
    items=[
        shad.AccordionItem(
            value="a11y",
            title="Is it accessible?",
            content=ft.Text("Yes. It adheres to the WAI-ARIA design pattern."),
        ),
    ]
)
Accordion
Accordion

Inherits: LayoutControl

Properties

  • items - The sections of this accordion.
  • multiple - Whether several items can be expanded at the same time.
  • value - The value of each expanded item.

Events

  • on_change - Called when the user expands or collapses an item.

Example​

Shadcn Accordion​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft

FAQ = [
    ("a11y", "Is it accessible?", "Yes. It adheres to the WAI-ARIA design pattern."),
    (
        "styled",
        "Is it styled?",
        "Yes. It comes with default styles that match the other components.",
    ),
    (
        "animated",
        "Is it animated?",
        "Yes. It's animated by default, but you can disable it if you prefer.",
    ),
]


def main(page: ft.Page):
    page.title = "Shadcn Accordion"

    def handle_change(e: ft.Event[shad.Accordion]):
        status.value = f"Expanded: {', '.join(e.control.value) or 'none'}"

    status = ft.Text("Expanded: none")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                width=420,
                controls=[
                    shad.Accordion(
                        on_change=handle_change,
                        items=[
                            shad.AccordionItem(
                                value=value, title=title, content=ft.Text(answer)
                            )
                            for value, title, answer in FAQ
                        ],
                    ),
                    status,
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
accordion
Expanding Is it styled?

Properties​

itemsclass-attributeinstance-attribute​

items: list[AccordionItem] = field(default_factory=list)

The sections of this accordion.

multipleclass-attributeinstance-attribute​

multiple: bool = False

Whether several items can be expanded at the same time.

valueclass-attributeinstance-attribute​

value: list[str] = field(default_factory=list)

The value of each expanded item.

Unless multiple is True, at most one item is expanded.

Events​

on_changeclass-attributeinstance-attribute​

on_change: ControlEventHandler[Accordion] | None = None

Called when the user expands or collapses an item.

The data property of the event handler argument contains the new value.