Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

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.

Basic Example

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

Styling

Type

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",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
        font_size="3em",
    ),
    collapsible=True,
    width="300px",
    type="multiple",
)

Default Value

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",
            font_size="3em",
            value="item_1",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            font_size="3em",
            value="item_2",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            font_size="3em",
            value="item_3",
        ),
        width="300px",
        default_value="item_2",
    ),
    direction="row",
    spacing="2",
)

Collapsible

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",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            font_size="3em",
        ),
        collapsible=True,
        width="300px",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            font_size="3em",
        ),
        collapsible=False,
        width="300px",
    ),
    direction="row",
    spacing="2",
)

Disable

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",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
        font_size="3em",
    ),
    collapsible=True,
    width="300px",
    disabled=True,
)

Orientation

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",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Second Item",
        content="The second accordion item's content",
        font_size="3em",
    ),
    rx.accordion.item(
        header="Third item",
        content="The third accordion item's content",
        font_size="3em",
    ),
    collapsible=True,
    width="300px",
    orientation="vertical",
)

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

Variant

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

Color Scheme

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",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            font_size="3em",
        ),
        collapsible=True,
        width="300px",
        color_scheme="grass",
    ),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
            font_size="3em",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
            font_size="3em",
        ),
        collapsible=True,
        width="300px",
        color_scheme="green",
    ),
    direction="row",
    spacing="2",
)

Value

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"),
                        font_size="3em",
                        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",
            font_size="2em",
            text_align="center",
        )
    )

AccordionItem

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

Styling

Value

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

Disable

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

API Reference

AccordionRoot

An accordion component.

Prop	Type	Description
`type`	Literal	The type of accordion (single or multiple).
`value`	Union	The value of the item to expand.
`default_value`	Union	The default value of the item to expand.
`collapsible`	bool	Whether or not the accordion is collapsible.
`disabled`	bool	Whether or not the accordion is disabled.
`dir`	Literal	The reading direction of the accordion when applicable.
`orientation`	Literal	The orientation of the accordion.
`variant`	Literal	The variant of the accordion.
`color_scheme`	Literal	The color scheme of the accordion.
`as_child`	bool	Change the default rendered element for the one passed as a child.

Valid Children

AccordionItem

Event Triggers

Trigger	Description
`on_value_change`	The on_change event handler is called when the value state of the component changes.

AccordionItem

An accordion component.

Prop	Type	Description
`value`	str	A unique identifier for the item.
`disabled`	bool	When true, prevents the user from interacting with the item.
`as_child`	bool	Change the default rendered element for the one passed as a child.

Valid Children

AccordionHeader
AccordionTrigger
AccordionContent

Event Triggers

See the full list of default event triggers

← Table Tabs →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Accordion

Basic Example

Styling

Type

Default Value

Collapsible

Disable

Orientation

Variant

Color Scheme

Value

AccordionItem

Styling

Value

Disable

API Reference

AccordionRoot

AccordionItem

Accordion

Basic Example

First Item.css-svt5ra{color:var(--current-color);}

Second Item

Third item

Styling

Type

First Item

Second Item

Third item

Default Value

First Item

Second Item

Third item

Collapsible

First Item

Second Item

Third item

First Item

Second Item

Third item

Disable

First Item

Second Item

Third item

Orientation

First Item

Second Item

Third item

First Item

Second Item

Third item

Variant

First Item

Second Item

Third item

First Item

Second Item

Third item

First Item

Second Item

Third item

First Item

Second Item

Third item

First Item

Second Item

Third item

Color Scheme

First Item

Second Item

Third item

First Item

Second Item

Third item

Value

Is it accessible?

Is it unstyled?

Is it finished?

AccordionItem

Styling

Value

First Item

Second Item

Third item

Disable

First Item

Second Item

Third item

API Reference

AccordionRoot

First Item

Second Item

Third item

Valid Children

Event Triggers

AccordionItem

First Item

Second Item

Third item