Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Forms

Select

High Level

Low Level

Select

Displays a list of options for the user to pick from—triggered by a button.

Basic Example

rx.select(["Apple", "Orange", "Banana", "Grape", "Pear"])

Disabling

To prevent the user from interacting with select, set the disabled prop to True.

rx.select(
    ["Apple", "Orange", "Banana", "Grape", "Pear"],
    disabled=True,
)

Setting Defaults

It is possible to set several default values when constructing a select.

Can set the placeholder prop, which is the content that will be rendered when no value or no default_value is set.

Can set the label prop, which is a label in the select.

rx.select(
    ["Apple", "Orange", "Banana", "Grape", "Pear"],
    placeholder="Selection of Fruits",
    label="Fruits",
)

Can set the default_value prop, which is the value of the select when initially rendered.

rx.select(
    ["Apple", "Orange", "Banana", "Grape", "Pear"],
    default_value="Orange",
)

Simple Styling

Can set the color, variant and radius to easily style the select.

rx.select(
    ["Apple", "Orange", "Banana", "Grape", "Pear"],
    color="pink",
    variant="soft",
    radius="full",
    width="100%",
    default_value="apple",
)

High control of select component (value and open changes)

The on_change event is called when the value of the select changes. In this example we set the value prop to change the select value using a button in this case.

class SelectState3(rx.State):
    values: list[str] = ["apple", "grape", "pear"]

    value: str = "apple"

    def change_value(self):
        """Change the select value var."""
        self.value = random.choice(self.values)


def select_example3():
    return rx.vstack(
        rx.select(
            SelectState3.values,
            value=SelectState3.value,
            on_change=SelectState3.set_value,
        ),
        rx.button(
            "Change Value",
            on_click=SelectState3.change_value,
        ),
    )

The on_open_change event handler acts in a similar way to the on_change and is called when the open state of the select changes.

rx.select(
    ["apple", "grape", "pear"],
    on_change=rx.window_alert(
        "on_change event handler called"
    ),
)

Submitting a form using select

The name prop is needed to submit with its owning form as part of a name/value pair.

When the required prop is True, it indicates that the user must select a value before the owning form can be submitted.

Results

{}

class FormSelectState1(rx.State):
    form_data: dict = {}

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data


def form_select1():
    return rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.select(
                    ["apple", "grape", "pear"],
                    default_value="apple",
                    name="select",
                ),
                rx.button("Submit", type="submit"),
                width="100%",
            ),
            on_submit=FormSelectState1.handle_submit,
            reset_on_submit=True,
            width="100%",
        ),
        rx.divider(width="100%"),
        rx.heading("Results"),
        rx.text(FormSelectState1.form_data.to_string()),
        width="100%",
    )

Real World Example

Reflex Swag

$99

Reflex swag with a sense of nostalgia, as if they carry whispered tales of past adventures

Color

Size

rx.card(
    rx.vstack(
        rx.image(
            src="/reflex_banner.png",
            width="100%",
            height="auto",
        ),
        rx.flex(
            rx.heading("Reflex Swag", size="4", mb="1"),
            rx.heading("$99", size="6", mb="1"),
            direction="row",
            justify="between",
            width="100%",
        ),
        rx.text(
            "Reflex swag with a sense of nostalgia, as if they carry whispered tales of past adventures",
            size="2",
            mb="1",
        ),
        rx.divider(width="100%"),
        rx.flex(
            rx.flex(
                rx.text(
                    "Color",
                    size="2",
                    mb="1",
                    color_scheme="gray",
                ),
                rx.select(
                    ["light", "dark"], default_value="light"
                ),
                direction="column",
            ),
            rx.flex(
                rx.text(
                    "Size",
                    size="2",
                    mb="1",
                    color_scheme="gray",
                ),
                rx.select(
                    [
                        "24",
                        "26",
                        "28",
                        "30",
                        "32",
                        "34",
                        "36",
                    ],
                    default_value="30",
                ),
                direction="column",
            ),
            rx.flex(
                rx.text(
                    ".",
                    size="2",
                ),
                rx.button("Add to cart"),
                direction="column",
            ),
            direction="row",
            justify="between",
            width="100%",
        ),
        width="20vw",
    ),
)

API Reference

HighLevelSelect

High level wrapper for the Select component.

Prop	Type	Default Value	Values
`items`	List
`placeholder`	str
`label`	str
`color_scheme`	Literal
`high_contrast`	bool
`variant`	Literal
`radius`	Literal
`width`	str
`position`	Literal
`size`	Union[Literal, Breakpoints]
`default_value`	str
`value`	str
`default_open`	bool
`open`	bool
`name`	str
`disabled`	bool
`required`	bool

Event Triggers

Trigger	Description
`on_change`	Props to rename Fired when the value of the select changes.
`on_open_change`	Fired when the select is opened or closed.

SelectRoot

Displays a list of options for the user to pick from, triggered by a button.

Prop	Type	Default Value	Values
`size`	Union[Literal, Breakpoints]
`default_value`	str
`value`	str
`default_open`	bool
`open`	bool
`name`	str
`disabled`	bool
`required`	bool

Event Triggers

Trigger	Description
`on_change`	Props to rename Fired when the value of the select changes.
`on_open_change`	Fired when the select is opened or closed.

SelectTrigger

The button that toggles the select.

Prop	Type	Default Value	Values
`variant`	Literal
`color_scheme`	Literal
`radius`	Literal
`placeholder`	str

Event Triggers

See the full list of default event triggers

SelectContent

The component that pops out when the select is open.

Prop	Type	Default Value	Values
`variant`	Literal
`color_scheme`	Literal
`high_contrast`	bool
`position`	Literal
`side`	Literal
`side_offset`	int
`align`	Literal
`align_offset`	int

Event Triggers

Trigger	Description
`on_close_auto_focus`	Fired when the select content is closed.
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when a pointer down event happens outside the select content.