Intro

Gallery

Hosting

Components

New

Learn

Components

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

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	Description
`items`	List	The items of the select.
`placeholder`	str	The placeholder of the select.
`label`	str	The label of the select.
`color_scheme`	Literal	The color of the select.
`high_contrast`	bool	Whether to render the select with higher contrast color against background.
`variant`	Literal	The variant of the select.
`radius`	Literal	The radius of the select.
`width`	str	The width of the select.
`position`	Literal	The positioning mode to use. Default is "item-aligned".
`size`	Literal	The size of the select: "1" \| "2" \| "3"
`default_value`	str	The value of the select when initially rendered. Use when you do not need to control the state of the select.
`value`	str	The controlled value of the select. Should be used in conjunction with on_change.
`default_open`	bool	The open state of the select when it is initially rendered. Use when you do not need to control its open state.
`open`	bool	The controlled open state of the select. Must be used in conjunction with on_open_change.
`name`	str	The name of the select control when submitting the form.
`disabled`	bool	When True, prevents the user from interacting with select.
`required`	bool	When True, indicates that the user must select a value before the owning form can be submitted.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.
`on_change`	The on_change event handler is called when the value or checked state of the component changes.

SelectRoot

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

Prop	Type	Description
`size`	Literal	The size of the select: "1" \| "2" \| "3"
`default_value`	str	The value of the select when initially rendered. Use when you do not need to control the state of the select.
`value`	str	The controlled value of the select. Should be used in conjunction with on_change.
`default_open`	bool	The open state of the select when it is initially rendered. Use when you do not need to control its open state.
`open`	bool	The controlled open state of the select. Must be used in conjunction with on_open_change.
`name`	str	The name of the select control when submitting the form.
`disabled`	bool	When True, prevents the user from interacting with select.
`required`	bool	When True, indicates that the user must select a value before the owning form can be submitted.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.
`on_change`	The on_change event handler is called when the value or checked state of the component changes.

SelectTrigger

The button that toggles the select.

Prop	Type	Description
`variant`	Literal	Variant of the select trigger
`color_scheme`	Literal	The color of the select trigger
`radius`	Literal	The radius of the select trigger
`placeholder`	str	The placeholder of the select trigger

Event Triggers

See the full list of default event triggers

SelectContent

The component that pops out when the select is open.

Prop	Type	Description
`variant`	Literal	The variant of the select content
`color_scheme`	Literal	The color of the select content
`high_contrast`	bool	Whether to render the select content with higher contrast color against background
`position`	Literal	The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.
`side`	Literal	The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. Only available when position is set to popper.
`side_offset`	int	The distance in pixels from the anchor. Only available when position is set to popper.
`align`	Literal	The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.
`align_offset`	int	The vertical distance in pixels from the anchor. Only available when position is set to popper.

Event Triggers

Trigger	Description
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.