Select

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

Installation

Command to install the Select component.

buridan add select

uv run buridan add select

python -m buridan add select

Component Guide

Use the following to build the Select component.

from components.ui.select import select

select(
    select.option(),
    select.optgroup(
        select.option(),
        select.option(),
    ),
    select.optgroup(
        select.option(),
        select.option(),
    ),
)

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`

External Tools

︲

On This Page