ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Disclosure

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

Official docs

Workshop order

Collapse the help center's 'Frequently asked questions' so only the questions show, and expand the answer when one is clicked.

An accordion stacks headings vertically, and clicking a heading expands the content beneath it. Use it to fold away content that would be too long fully expanded, such as FAQs or groups of settings. Put rx.accordion.item elements inside rx.accordion.root, and give each item a header (heading) and content.

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",
)

Try the props

All of these go on root. Switch type to multiple and several items can be open at once.

Try the props

type

collapsible

variant

color

radius

show_dividers

disabled

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"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

Turn collapsible off and clicking an open item again won't close it. variant and color_scheme set the background style and color.

Part	Prop	Values	Use
`root`	`type`	`"single"` (default) `"multiple"`	One open at a time, or several
`root`	`collapsible`	`True` / `False`	Allow closing an open item by clicking it again
`root`	`default_value`	An item's value (a list for multiple)	Items open at first
`root`	`value` + `on_value_change`	State value, event	Manage the open items with State
`root`	`disabled`	`True` / `False`	Make every item unclickable
`root`	`orientation`	`"vertical"` (default) `"horizontal"`	Arrow-key direction
`root`	`variant`	`"classic"` (default) `"soft"` `"surface"` `"outline"` `"ghost"`	Background style
`root`	`color_scheme` · `radius`	Radix color name, corner value	Color and corners
`root`	`show_dividers`	`True` / `False`	Dividers between items
`root`	`duration` · `easing`	Milliseconds (default 250), CSS easing	Expand and collapse animation
`item`	`header` · `content`	Text or a component	Heading and content
`item`	`value`	String	This item's name tag; random if omitted
`item`	`disabled`	`True` / `False`	Make just this item unclickable

Opening several

The default type, "single", opens one item at a time: open another and the previous one closes. With "multiple", several items can stay open together.

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"),
    type="multiple",
    collapsible=True,
    width="300px",
)

Items open at first

Give default_value an item's value and that item starts out open. That means you need to set value on the items yourself (otherwise Reflex generates a random one). With type="multiple", pass a list like ["item_1", "item_3"].

The second accordion item's content

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"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

Closing again, and blocking

With collapsible=True, clicking an open item again closes it. With False, once something is open, one item always stays open.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

disabled=True on root makes every item unclickable; on an item, only that item.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Orientation

orientation doesn't change the look, only keyboard behavior. The default "vertical" moves between headings with the up and down arrows; "horizontal" uses left and right. Click one of the headings below and try the arrow keys.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    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"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

Look and color

There are five variants. classic fills strongly with the theme color, soft fills lightly, surface and outline draw borders, and ghost draws no background.

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_scheme sets the accordion's color regardless of the theme.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Managing open items with State

Give value a State value and change it in on_value_change, and the server knows which item is open. You can also open a specific item or close them all from a button. When everything is closed, you get an empty string. content can hold components such as buttons, not just text.

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

    @rx.event
    def change_accordion(self, value: str | list[str]):
        self.value = value if isinstance(value, str) else ""

    @rx.event
    def open_accordion_item(self, value: str):
        self.value = value


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    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="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

Assembling the parts yourself

header= and content= are shortcuts. Reflex 0.10 also has the parts that make them up: rx.accordion.header, rx.accordion.trigger (the clickable area), rx.accordion.icon (the expand chevron) and rx.accordion.content, which you can assemble directly as children of an item. Use them for detailed changes such as putting an icon in the heading. These parts don't appear on the official docs page.

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

Filling the order

Set to multiple so several questions can be open together, and kept light with ghost and dividers.

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

Workshop notes

Put accordion.item(header=…, content=…) inside accordion.root.
type: single (default) · multiple; with collapsible=True, clicking again closes an item.
To use default_value or value, set value on the items yourself. For controlled use: value + on_value_change.
orientation only changes keyboard direction. Five variants, plus color_scheme and show_dividers.
For finer control over the look, assemble the header · trigger · icon · content parts (0.10).

← Previous

Disclosure · Tabs

Disclosure · Segmented Control

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.