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.
{}
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 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",
),
)
Displays a list of options for the user to pick from, triggered by a button.
Used to group multiple items.
No component specific props
The component that contains the select items.
Used to render the label of a group, it isn't focusable using arrow keys.
No component specific props
Used to visually separate items in the Select.
No component specific props
Did you find this useful?