Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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.

PropTypeDescriptionValues
valuestr

State var to bind the select.

default_valuestr

The default value of the select.

placeholderstr

The placeholder text.

error_border_colorstr

The border color when the select is invalid.

focus_border_colorstr

The border color when the select is focused.

is_disabledbool

If true, the select will be disabled.

is_invalidbool

If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have data-invalid set to true - The form element (e.g, Input) will have aria-invalid set to true

is_requiredbool

If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have aria-required set to true

variantLiteral

"outline" | "filled" | "flushed" | "unstyled"

sizestr

The size of the select.

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting