Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Select

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

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

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

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

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

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

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

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

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

High level wrapper for the Select component.

PropTypeDescriptionValues
itemsList

The items of the select.

placeholderstr

The placeholder of the select.

labelstr

The label of the select.

color_schemeLiteral

The color of the select.

high_contrastbool

Whether to render the select with higher contrast color against background.

variantLiteral

The variant of the select.

radiusLiteral

The radius of the select.

widthstr

The width of the select.

positionLiteral

The positioning mode to use. Default is "item-aligned".

sizeLiteral

The size of the select: "1" | "2" | "3"

default_valuestr

The value of the select when initially rendered. Use when you do not need to control the state of the select.

valuestr

The controlled value of the select. Should be used in conjunction with on_change.

default_openbool

The open state of the select when it is initially rendered. Use when you do not need to control its open state.

openbool

The controlled open state of the select. Must be used in conjunction with on_open_change.

namestr

The name of the select control when submitting the form.

disabledbool

When True, prevents the user from interacting with select.

requiredbool

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

Event Triggers

TriggerDescription
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.

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

PropTypeDescriptionValues
sizeLiteral

The size of the select: "1" | "2" | "3"

default_valuestr

The value of the select when initially rendered. Use when you do not need to control the state of the select.

valuestr

The controlled value of the select. Should be used in conjunction with on_change.

default_openbool

The open state of the select when it is initially rendered. Use when you do not need to control its open state.

openbool

The controlled open state of the select. Must be used in conjunction with on_open_change.

namestr

The name of the select control when submitting the form.

disabledbool

When True, prevents the user from interacting with select.

requiredbool

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

Event Triggers

TriggerDescription
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.

The button that toggles the select.

PropTypeDescriptionValues
variantLiteral

Variant of the select trigger

color_schemeLiteral

The color of the select trigger

radiusLiteral

The radius of the select trigger

placeholderstr

The placeholder of the select trigger

Event Triggers

No component specific event triggers

The component that pops out when the select is open.

PropTypeDescriptionValues
variantLiteral

The variant of the select content

color_schemeLiteral

The color of the select content

high_contrastbool

Whether to render the select content with higher contrast color against background

positionLiteral

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.

sideLiteral

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_offsetint

The distance in pixels from the anchor. Only available when position is set to popper.

alignLiteral

The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.

align_offsetint

The vertical distance in pixels from the anchor. Only available when position is set to popper.

Event Triggers

TriggerDescription
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.

Used to group multiple items.

Props

No component specific props

Event Triggers

No component specific event triggers

The component that contains the select items.

PropTypeDescriptionValues
valuestr

The value given as data when submitting a form with a name.

disabledbool

Whether the select item is disabled

Event Triggers

No component specific event triggers

Used to render the label of a group, it isn't focusable using arrow keys.

Props

No component specific props

Event Triggers

No component specific event triggers

Used to visually separate items in the Select.

Props

No component specific props

Event Triggers

No component specific event triggers

← RadioGroupSlider →

Did you find this useful?