Library
/
Chakra
/
Forms
/
Select
The Select component is used to create a list of options, which allows a user to select one or more options from it.
No selection yet.
from typing import List
options: List[str] = ["Option 1", "Option 2", "Option 3"]
class SelectState(rx.State):
option: str = "No selection yet."
def basic_select_example():
return rx.chakra.vstack(
rx.chakra.heading(SelectState.option),
rx.chakra.select(
options,
placeholder="Select an example.",
on_change=SelectState.set_option,
color_schemes="twitter",
),
)Select can also have multiple options selected at once.
from typing import List
options: List[str] = ["Option 1", "Option 2", "Option 3"]
class MultiSelectState(rx.State):
option: List[str] = []
def multiselect_example():
return rx.chakra.vstack(
rx.chakra.heading(MultiSelectState.option),
rx.chakra.select(
options,
placeholder="Select examples",
is_multi=True,
on_change=MultiSelectState.set_option,
close_menu_on_select=False,
color_schemes="twitter",
),
)The component can also be customized and styled as seen in the next examples.
rx.chakra.vstack(
rx.chakra.select(
options, placeholder="Select an example.", size="xs"
),
rx.chakra.select(
options, placeholder="Select an example.", size="sm"
),
rx.chakra.select(
options, placeholder="Select an example.", size="md"
),
rx.chakra.select(
options, placeholder="Select an example.", size="lg"
),
)rx.chakra.vstack(
rx.chakra.select(
options,
placeholder="Select an example.",
variant="outline",
),
rx.chakra.select(
options,
placeholder="Select an example.",
variant="filled",
),
rx.chakra.select(
options,
placeholder="Select an example.",
variant="flushed",
),
rx.chakra.select(
options,
placeholder="Select an example.",
variant="unstyled",
),
)rx.chakra.select(
options,
placeholder="Select an example.",
color="white",
bg="#68D391",
border_color="#38A169",
)Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.
Event Triggers
Did you find this useful?
No
Yes
