Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Disclosure

/

Accordion

Accordions allow you to hide and show content in a container under a header.

Accordion consist of an outer accordion component and inner accordion items. Each item has a optional button and panel. The button is used to toggle the panel's visibility.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text(
                "This is an example of an accordion component."
            )
        ),
    ),
    allow_toggle=True,
    width="100%",
)

An accordion can have multiple items.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example 1"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text(
                "This is an example of an accordion component."
            )
        ),
    ),
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example 2"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text(
                "This is an example of an accordion component."
            )
        ),
    ),
    allow_multiple=True,
    bg="black",
    color="white",
    width="100%",
)

You can create multilevel accordions by nesting accordions within the outer accordion panel.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.accordion_icon(),
            rx.chakra.heading("Outer"),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.accordion(
                rx.chakra.accordion_item(
                    rx.chakra.accordion_button(
                        rx.chakra.accordion_icon(),
                        rx.chakra.heading("Inner"),
                    ),
                    rx.chakra.accordion_panel(
                        rx.chakra.badge(
                            "Inner Panel",
                            variant="solid",
                            color_scheme="green",
                        ),
                    ),
                )
            ),
        ),
    ),
    width="100%",
)

You can also create an accordion using the shorthand syntax. Pass a list of tuples to the items prop. Each tuple should contain a label and a panel.

rx.chakra.accordion(
    items=[
        ("Label 1", rx.chakra.center("Panel 1")),
        ("Label 2", rx.chakra.center("Panel 2")),
    ],
    width="100%",
)

The wrapper that uses cloneElement to pass props to AccordionItem children.

PropTypeDescriptionValues
allow_multiplebool

If true, multiple accordion items can be expanded at once.

allow_togglebool

If true, any expanded accordion item can be collapsed again.

default_indexOptional

The initial index(es) of the expanded accordion item(s).

indexUnion

The index(es) of the expanded accordion item

reduce_motionbool

If true, height animation and transitions will be disabled.

Event Triggers

See the full list of default event triggers

A single accordion item.

PropTypeDescriptionValues
id_str

A unique id for the accordion item.

is_disabledbool

If true, the accordion item will be disabled.

is_focusablebool

If true, the accordion item will be focusable.

The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading.

Props

No component specific props

The container for the details to be revealed.

Props

No component specific props

A chevron-down icon that rotates based on the expanded/collapsed state.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting