Select

A styled native HTML select element with consistent design system integration.

❯buridan add select

Component Guide

Use the following to build the Select component.

from components.ui.select import select

select.root(
    select.trigger(
        select.value(),
        select.icon(),
    ),
    select.portal(
        select.positioner(
            select.popup(
                select.group(
                    select.group_label(),
                    select.item(
                        select.item_text(),
                        select.item_indicator(),
                    ),
                ),
                select.separator(),
            ),
        ),
    ),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/core/hugeicon.py

components/ui/select.py

Examples

Basic

A single native <select> paired with a field.label. Uses wrapper_class_name to stretch the select to the full width of its container.

Props used: id, name, default_value, wrapper_class_name on select; value on select.option; html_for on field.label.

import reflex as rx

from components.ui.field import field
from components.ui.select import select


def select_basic() -> rx.Component:
    return rx.el.div(
        field.root(
            field.label("Favorite fruit", html_for="fruit-basic"),
            select(
                select.option("Apple", value="apple"),
                select.option("Banana", value="banana"),
                select.option("Blueberry", value="blueberry"),
                select.option("Grapes", value="grapes"),
                select.option("Pineapple", value="pineapple"),
                id="fruit-basic",
                name="fruit",
                default_value="apple",
                wrapper_class_name="w-full",
            ),
        ),
        class_name="mx-auto max-w-sm",
    )

Grouped options

Options organized under select.optgroup headings, with a disabled, hidden first option acting as a placeholder — the standard way to show placeholder text in a native select without a real empty value being selectable.

Props used: label on select.optgroup; value, disabled, hidden on select.option; id, name, default_value, wrapper_class_name on select.

import reflex as rx

from components.ui.field import field
from components.ui.select import select


def select_optgroup() -> rx.Component:
    return rx.el.div(
        field.root(
            field.label("Ingredient", html_for="ingredient-select"),
            select(
                select.option(
                    "Select an ingredient", value="", disabled=True, hidden=True
                ),
                select.optgroup(
                    select.option("Apple", value="apple"),
                    select.option("Banana", value="banana"),
                    select.option("Blueberry", value="blueberry"),
                    label="Fruits",
                ),
                select.optgroup(
                    select.option("Carrot", value="carrot"),
                    select.option("Potato", value="potato"),
                    select.option("Broccoli", value="broccoli"),
                    label="Vegetables",
                ),
                id="ingredient-select",
                name="ingredient",
                default_value="",
                wrapper_class_name="w-full",
            ),
        ),
        class_name="mx-auto max-w-sm",
    )

Sizes

Two size variants side by side — sm for compact layouts (toolbars, table cells) and the default size for standalone form fields.

Props used: size, default_value on select; value on select.option.

import reflex as rx

from components.ui.select import select


def select_sizes() -> rx.Component:
    return rx.el.div(
        select(
            select.option("Small", value="sm"),
            select.option("Medium", value="md"),
            select.option("Large", value="lg"),
            default_value="md",
            size="sm",
        ),
        select(
            select.option("Small", value="sm"),
            select.option("Medium", value="md"),
            select.option("Large", value="lg"),
            default_value="md",
        ),
        class_name="mx-auto flex max-w-sm items-center gap-4",
    )

Form layout

Two selects grouped under a shared field.set with a field.legend, showing how selects compose inside a larger form section.

Props used: id, name, default_value, wrapper_class_name on select; value on select.option; html_for on field.label.

Shipping details

import reflex as rx

from components.ui.field import field
from components.ui.select import select


def select_form() -> rx.Component:
    return field.set(
        field.legend("Shipping details"),
        field.group(
            field.root(
                field.label("Country", html_for="shipping-country"),
                select(
                    select.option("United States", value="us"),
                    select.option("Canada", value="ca"),
                    select.option("United Kingdom", value="uk"),
                    select.option("Germany", value="de"),
                    id="shipping-country",
                    name="country",
                    default_value="us",
                    wrapper_class_name="w-full",
                ),
            ),
            field.root(
                field.label("Timezone", html_for="shipping-timezone"),
                select(
                    select.option("Pacific Time (PT)", value="pt"),
                    select.option("Mountain Time (MT)", value="mt"),
                    select.option("Central Time (CT)", value="ct"),
                    select.option("Eastern Time (ET)", value="et"),
                    id="shipping-timezone",
                    name="timezone",
                    default_value="et",
                    wrapper_class_name="w-full",
                ),
            ),
        ),
        class_name="mx-auto max-w-sm",
    )

Disabled

A disabled select with a field.description explaining why it's locked. Disabling cascades visually to the whole control via the wrapper's has-[select:disabled] styling.

Props used: id, default_value, disabled, wrapper_class_name on select; value on select.option.

import reflex as rx

from components.ui.field import field
from components.ui.select import select


def select_disabled() -> rx.Component:
    return rx.el.div(
        field.root(
            field.label("Country", html_for="country-disabled"),
            select(
                select.option("United States", value="us"),
                select.option("Canada", value="ca"),
                select.option("Mexico", value="mx"),
                id="country-disabled",
                default_value="us",
                disabled=True,
                wrapper_class_name="w-full",
            ),
            field.description("This field is currently locked."),
        ),
        class_name="mx-auto max-w-sm",
    )

API Reference

select

The main select component. Calling select(...) directly renders the native <select> wrapped in a positioning div with the chevron icon — select is itself callable (via NativeSelect.__call__), so no separate .root is needed.

select(
    select.option("Option 1", value="option1"),
    select.option("Option 2", value="option2"),
)

Prop	Type	Default
`size`	`Literal["default", "sm"]`	`"default"`
`wrapper_class_name`	`str`	`""`
`class_name`	`str`	`""`
`data_slot`	`str`	`"native-select"`
`disabled`	`bool`	`False`
`value` / `default_value`	`str`
`name`	`str`
`id`	`str`
`on_change`	`EventHandler`

Any other prop accepted by a native HTML <select> (required, aria-invalid, etc.) is also passed straight through.

select.option

Represents an individual option within the select.

select.option("Apple", value="apple")
select.option("Sold out", value="oos", disabled=True)

Prop	Type	Default
`value`	`str`
`disabled`	`bool`	`False`
`hidden`	`bool`	`False`

select.optgroup

Groups related options together under a labeled heading.

select.optgroup(
    select.option("Apple", value="apple"),
    select.option("Banana", value="banana"),
    label="Fruits",
)

Prop	Type	Default
`label`	`str`
`disabled`	`bool`	`False`