Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Disclosure

/

Accordion

An accordion is a vertically stacked set of interactive headings that each reveal an associated section of content. The accordion component is made up of accordion, which is the root of the component and takes in an accordion.item, which contains all the contents of the collapsible section.

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    width="300px",
)

We use the type prop to determine whether multiple items can be opened at once. The allowed values for this prop are single and multiple where single will only open one item at a time. The default value for this prop is single.

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    collapsible=True,
    width="300px",
    type="multiple",
)

We use the default_value prop to specify which item should open by default. The value for this prop should be any of the unique values set by an accordion.item.

The second accordion item's content

rx.flex(
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
            value="item_1",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            value="item_2",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            value="item_3",
        ),
        width="300px",
        default_value="item_2",
    ),
    direction="row",
    spacing="2",
)

We use the collapsible prop to allow all items to close. If set to False, an opened item cannot be closed.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        width="300px",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=False,
        width="300px",
    ),
    direction="row",
    spacing="2",
)

We use the disabled prop to prevent interaction with the accordion and all its items.

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    collapsible=True,
    width="300px",
    disabled=True,
)

We use orientation prop to set the orientation of the accordion to vertical or horizontal. By default, the orientation will be set to vertical. Note that, the orientation prop wont change the visual orientation but the functional orientation of the accordion. This means that for vertical orientation, the up and down arrow keys moves focus between the next or previous item, while for horizontal orientation, the left or right arrow keys moves focus between items.

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    collapsible=True,
    width="300px",
    orientation="vertical",
)

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    collapsible=True,
    width="300px",
    orientation="horizontal",
)

rx.flex(
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        variant="classic",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        variant="soft",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        variant="outline",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        variant="surface",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        variant="ghost",
    ),
    direction="row",
    spacing="2",
)

We use the color_scheme prop to assign a specific color to the accordion background, ignoring the global theme.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        width="300px",
        color_scheme="grass",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        collapsible=True,
        width="300px",
        color_scheme="green",
    ),
    direction="row",
    spacing="2",
)

We use the value prop to specify the controlled value of the accordion item that we want to activate. This property should be used in conjunction with the on_value_change event argument.

class AccordionState(rx.State):
    """The app state."""

    value: str = "item_1"
    item_selected: str

    def change_value(self, value):
        self.value = value
        self.item_selected = f"{value} selected"


def index() -> rx.Component:
    return rx.theme(
        rx.container(
            rx.text(AccordionState.item_selected),
            rx.flex(
                rx.accordion.root(
                    rx.accordion.item(
                        header="Is it accessible?",
                        content=rx.button("Test button"),
                        value="item_1",
                    ),
                    rx.accordion.item(
                        header="Is it unstyled?",
                        content="Yes. It's unstyled by default, giving you freedom over the look and feel.",
                        value="item_2",
                    ),
                    rx.accordion.item(
                        header="Is it finished?",
                        content="It's still in beta, but it's ready to use in production.",
                        value="item_3",
                    ),
                    collapsible=True,
                    width="300px",
                    value=AccordionState.value,
                    on_value_change=lambda value: AccordionState.change_value(
                        value
                    ),
                ),
                direction="column",
                spacing="2",
            ),
            padding="2em",
            text_align="center",
        )
    )

The accordion item contains all the parts of a collapsible section.

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
        value="item_1",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
        value="item_2",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
        value="item_3",
    ),
    collapsible=True,
    width="300px",
)

rx.accordion.root(
    rx.accordion.item(
        header="First Item",
        content="The first accordion item's content",
        disabled=True,
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
    ),
    collapsible=True,
    width="300px",
    color_scheme="blue",
)

An accordion component.

PropTypeDescriptionValues
typeLiteral

The type of accordion (single or multiple).

valueUnion

The value of the item to expand.

default_valueUnion

The default value of the item to expand.

collapsiblebool

Whether or not the accordion is collapsible.

disabledbool

Whether or not the accordion is disabled.

dirLiteral

The reading direction of the accordion when applicable.

orientationLiteral

The orientation of the accordion.

radiusLiteral

The radius of the accordion corners.

durationint

The time in milliseconds to animate open and close

easingstr

The easing function to use for the animation.

show_dividersbool

Whether to show divider lines between items.

color_schemeLiteral

The color scheme of the component.

variantLiteral

The variant of the component.

as_childbool

Change the default rendered element for the one passed as a child.

Valid Children

  • AccordionItem

Event Triggers

TriggerDescription
on_value_change

Fired when the opened the accordions changes.

An accordion component.

PropTypeDescriptionValues
valuestr

A unique identifier for the item.

disabledbool

When true, prevents the user from interacting with the item.

color_schemeLiteral

The color scheme of the component.

variantLiteral

The variant of the component.

as_childbool

Change the default rendered element for the one passed as a child.

Valid Children

  • AccordionHeader
  • AccordionTrigger
  • AccordionContent
← TableTabs →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting