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 rc.vstack(
        rc.heading(SelectState.option),
        rc.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 rc.vstack(
        rc.heading(MultiSelectState.option),
        rc.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.

rc.vstack(
    rc.select(
        options, placeholder="Select an example.", size="xs"
    ),
    rc.select(
        options, placeholder="Select an example.", size="sm"
    ),
    rc.select(
        options, placeholder="Select an example.", size="md"
    ),
    rc.select(
        options, placeholder="Select an example.", size="lg"
    ),
)
rc.vstack(
    rc.select(
        options,
        placeholder="Select an example.",
        variant="outline",
    ),
    rc.select(
        options,
        placeholder="Select an example.",
        variant="filled",
    ),
    rc.select(
        options,
        placeholder="Select an example.",
        variant="flushed",
    ),
    rc.select(
        options,
        placeholder="Select an example.",
        variant="unstyled",
    ),
)
rc.select(
    options,
    placeholder="Select an example.",
    color="white",
    bg="#68D391",
    border_color="#38A169",
)

rc.Select

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.

PropType | ValuesDefault
value
str
default_value
str
placeholder
str
error_border_color
str
focus_border_color
str
is_disabled
bool
is_invalid
bool
is_required
bool
variant
"outline" | "filled" | "flushed" | ...
size
str
name
str

Event Triggers

See the full list of default event triggers
TriggerDescription
on_change Fired when the value changes.