Select

стилизованный собственный HTML-элемент выбора с последовательной интеграцией с системой дизайна.

❯buridan add select

Error: Reference Target 'выбрать' not found

Примеры

Базовый

Один родной <select> в паре с field.label. Использует wrapper_class_name, чтобы растянуть выделение на всю ширину его контейнера.

Использованный реквизит: id, name, default_value, wrapper_class_name на select; value на select.option; html_for на 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",
    )

Сгруппированные параметры

Опции организованы под заголовками select.optgroup, с отключенной, скрытой первой опцией, выступающей в качестве заполнителя — стандартный способ отображения текста заполнителя в собственном выборе без возможности выбора реального пустого значения.

Использованный реквизит: label на select.optgroup; value, disabled, hidden по select.option; id, name, default_value, wrapper_class_name на 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",
    )

Размеры

Два варианта размера рядом — sm для компактных макетов (панели инструментов, ячейки таблицы) и размер default для отдельных полей формы.

Использованный реквизит: size, default_value на select; value на 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",
    )

Макет формы

Два выбора сгруппированы под общим field.set с field.legend, показывая, как выборки составляются внутри более крупного раздела формы.

Использованный реквизит: id, name, default_value, wrapper_class_name на select; value на select.option; html_for на field.label.

Error: Reference Target 'выбрать_форму' not found

Отключено

Отключенный выбор с field.description, объясняющим, почему он заблокирован. Отключение визуального каскадирования для всего элемента управления с помощью стиля оболочки has-[select:disabled].

Использованный реквизит: id, default_value, disabled, wrapper_class_name на select; value на 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

выбрать

Основной компонент выбора. Вызов select(...) напрямую отображает собственный <select>, завернутый в позиционирование div со значком шеврона — select сам по себе является вызываемым (через NativeSelect.__call__), поэтому отдельный .root не требуется.

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

Опора	Тип	По умолчанию
`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`

Любой другой реквизит, принятый собственным HTML <select> (required, aria-invalid и т. д.), также передается напрямую.

выбор.опция

Представляет отдельный параметр в пределах выбора.

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

Опора	Тип	По умолчанию
`value`	`str`
`disabled`	`bool`	`False`
`hidden`	`bool`	`False`

выберите.optgroup

Группирует связанные параметры под помеченным заголовком.

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

Опора	Тип	По умолчанию
`label`	`str`
`disabled`	`bool`	`False`

External Tools

︲

On This Page