Поле

Объедините метки, элементы управления и текст справки для создания доступных полей формы и сгруппированных входных данных.

❯buridan add поле

Error: Reference Target 'поле' not found

Состав

поле.корень

Один элемент управления с меткой, вспомогательным текстом и проверкой.

field.root
├── field.label
├── Input / Textarea / switch.root / select.root
├── field.description
└── field.error

поле.группа

Связанные поля в одной группе. При необходимости используйте field.separator между разделами.

field.group
├── field.root
│   ├── field.label
│   ├── Input / Textarea / switch.root / select.root
│   ├── field.description
│   └── field.error
├── field.separator
└── field.root
    ├── field.label
    └── Input / Textarea / switch.root / select.root

поле.набор

Семантическая группировка с легендой и описанием, обычно содержащая field.group.

field.set
├── field.legend
├── field.description
└── field.group
    ├── field.root
    │   ├── field.label
    │   ├── Input / Textarea / switch.root / select.root
    │   ├── field.description
    │   └── field.error
    └── field.root
        ├── field.label
        └── Input / Textarea / switch.root / select.root

field.root — это основная оболочка для одного поля.
field.content — гибкий столбец, группирующий метку и описание. Не требуется, если у вас нет описания.
Оберните связанные поля field.group и используйте field.set с field.legend для семантической группировки.

Примеры

Общие

Демонстрирует объединение field.root, field.group, field.set, field.label, field.description и field.error.

Использованный реквизит: orientation на field.root; variant по field.legend; html_for на field.label; data_invalid на field.root.

import reflex as rx

from components.ui.button import button
from components.ui.checkbox import checkbox
from components.ui.field import field
from components.ui.input import input

# из компонентов.ui.select импорт выбрать
from components.ui.textarea import textarea

months = [
    {"label": "MM", "value": ""},
    {"label": "01", "value": "01"},
    {"label": "02", "value": "02"},
    {"label": "03", "value": "03"},
    {"label": "04", "value": "04"},
    {"label": "05", "value": "05"},
    {"label": "06", "value": "06"},
    {"label": "07", "value": "07"},
    {"label": "08", "value": "08"},
    {"label": "09", "value": "09"},
    {"label": "10", "value": "10"},
    {"label": "11", "value": "11"},
    {"label": "12", "value": "12"},
]

years = [
    {"label": "YYYY", "value": ""},
    {"label": "2024", "value": "2024"},
    {"label": "2025", "value": "2025"},
    {"label": "2026", "value": "2026"},
    {"label": "2027", "value": "2027"},
    {"label": "2028", "value": "2028"},
    {"label": "2029", "value": "2029"},
]


def field_demo() -> rx.Component:
    return rx.el.div(
        rx.el.form(
            field.group(
                field.set(
                    field.legend("Payment Method"),
                    field.description("All transactions are secure and encrypted"),
                    field.group(
                        field.root(
                            field.label("Name on Card", html_for="checkout-card-name"),
                            input(
                                id="checkout-card-name",
                                placeholder="Evil Rabbit",
                                required=True,
                            ),
                        ),
                        field.root(
                            field.label("Card Number", html_for="checkout-card-number"),
                            input(
                                id="checkout-card-number",
                                placeholder="1234 5678 9012 3456",
                                required=True,
                            ),
                            field.description("Enter your 16-digit card number"),
                        ),
                        rx.el.div(
                            field.root(
                                field.label("Month", html_for="checkout-exp-month"),
                                # выбрать.корень(
                                # выбрать.триггер(
                                # выбрать.значение(),
                                # выбрать.значок(),
                                # id="checkout-exp-месяц",
                                #     ),
                                # выбрать.портал(
                                # выбрать.позиционер(
                                # выбрать.всплывающее окно(
                                # выбрать.группа(
                                #                     *[
                                # выбрать.элемент(
                                #                             select.item_text(
                                # элемент["метка"]
                                #                             ),
                                # выбрать.item_indicator(),
                                # значение = элемент["значение"],
                                #                         )
                                # за товар в месяцах
                                #                     ]
                                #                 )
                                #             )
                                #         )
                                #     ),
                                # предметы = месяцы,
                                # default_value="ММ",
                                # ),
                            ),
                            field.root(
                                field.label("Year", html_for="checkout-exp-year"),
                                # выбрать.корень(
                                # выбрать.триггер(
                                # выбрать.значение(),
                                # выбрать.значок(),
                                #         id="checkout-exp-year",
                                #     ),
                                # выбрать.портал(
                                # выбрать.позиционер(
                                # выбрать.всплывающее окно(
                                # выбрать.группа(
                                #                     *[
                                # выбрать.элемент(
                                #                             select.item_text(
                                # элемент["метка"]
                                #                             ),
                                # выбрать.item_indicator(),
                                # значение = элемент["значение"],
                                #                         )
                                # за товар в формате
                                #                     ]
                                #                 )
                                #             )
                                #         )
                                #     ),
                                # предметы = годы,
                                # default_value="ГГГГ",
                                # ),
                            ),
                            field.root(
                                field.label("CVV", html_for="checkout-cvv"),
                                input(
                                    id="checkout-cvv",
                                    placeholder="123",
                                    required=True,
                                ),
                            ),
                            class_name="grid grid-cols-3 gap-4",
                        ),
                    ),
                ),
                field.separator(),
                field.set(
                    field.legend("Billing Address"),
                    field.description(
                        "The billing address associated with your payment method"
                    ),
                    field.group(
                        field.root(
                            checkbox.root(
                                checkbox.indicator(),
                                id="checkout-same-as-shipping",
                                default_checked=True,
                            ),
                            field.label(
                                "Same as shipping address",
                                html_for="checkout-same-as-shipping",
                                class_name="font-normal",
                            ),
                            orientation="horizontal",
                        )
                    ),
                ),
                field.set(
                    field.group(
                        field.root(
                            field.label("Comments", html_for="checkout-comments"),
                            textarea(
                                id="checkout-comments",
                                placeholder="Add any additional comments",
                                class_name="resize-none",
                            ),
                        )
                    )
                ),
                field.root(
                    button("Submit", type="submit"),
                    button("Cancel", variant="outline", type="button"),
                    orientation="horizontal",
                ),
            )
        ),
        class_name="w-full max-w-md my-10",
    )

Адаптивный макет

Вертикальные поля: ориентация по умолчанию объединяет метки, элементы управления и вспомогательный текст — идеально подходит для макетов, ориентированных на мобильные устройства.
Горизонтальные поля: установите orientation="horizontal" в field.root, чтобы выровнять метку и элемент управления рядом. Соедините с field.content, чтобы описания были согласованными.
Адаптивные поля: установите orientation="responsive" для автоматического макета столбцов внутри родительских элементов с поддержкой контейнеров.

Проверка и ошибки

Добавьте data_invalid="true" к field.root, чтобы перевести весь блок в состояние ошибки.
Добавьте aria_invalid="true" на вход для вспомогательных технологий.
Отрисовывайте field.error сразу после элемента управления или внутри field.content, чтобы сообщения об ошибках были выровнены по полю.

field.root(
    field.label("Email", html_for="email"),
    input(id="email", type="email", aria_invalid="true"),
    field.error("Enter a valid email address."),
    data_invalid="true",
)

Справочник по API

поле.набор

Контейнер, который отображает семантический fieldset с предустановками интервалов.

Опора	Тип	По умолчанию
`class_name`	`str`

field.set(
    field.legend("Delivery"),
    field.group(),
)

поле.легенда

Элемент легенды для field.set. Переключитесь на вариант "label", чтобы обеспечить соответствие стандартному размеру этикетки.

Опора	Тип	По умолчанию
`variant`	`Literal["legend", "label"]`	`"legend"`
`class_name`	`str`

field.legend("Notification Preferences", variant="label")

field.legend имеет два варианта: legend и label. Вариант label применяет стандартные размеры и выравнивание меток ввода, что полезно, если вы объединяете вложенные наборы полей.

поле.группа

Оболочка макета, которая объединяет компоненты field.root и позволяет выполнять запросы к контейнерам для адаптивных ориентаций.

Опора	Тип	По умолчанию
`class_name`	`str`

field.group(
    field.root(),
    field.root(),
    class_name="@container/field-group flex flex-col gap-6",
)

поле.корень

Основная оболочка для одного поля. Обеспечивает управление ориентацией, недопустимые стили состояния и конфигурации интервалов.

Опора	Тип	По умолчанию
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`class_name`	`str`
`data_invalid`	`str`

field.root(
    field.label("Remember me", html_for="remember"),
    switch.root(id="remember"),
    orientation="horizontal",
)

поле.содержание

Столбец Flex, который группирует элементы управления и описания, когда метка находится рядом с элементом управления. Не требуется, если у вас нет блока описания макета.

Опора	Тип	По умолчанию
`class_name`	`str`

field.root(
    checkbox.root(id="notifications"),
    field.content(
        field.label("Notifications", html_for="notifications"),
        field.description("Email, SMS, and push options."),
    ),
)

поле.метка

Метка, стилизованная как для прямого ввода, так и для вложенных дочерних элементов field.

Опора	Тип	По умолчанию
`html_for`	`str`
`class_name`	`str`

field.label("Email", html_for="email")

поле.заголовок

Отображает отдельный заголовок с соответствующими свойствами оформления метки внутри узла field.content.

Опора	Тип	По умолчанию
`class_name`	`str`

field.content(
    field.title("Enable Touch ID"),
    field.description("Unlock your device faster."),
)

поле.описание

Вспомогательный текстовый слот, который автоматически выравнивает длинные строки при использовании в горизонтальных конфигурациях.

Опора	Тип	По умолчанию
`class_name`	`str`

field.description("We never share your email with anyone.")

поле.разделитель

Правило визуального разделителя, используемое для разделения разделов или категорий внутри компонента-обертки field.group. Принимает необязательное встроенное дочернее содержимое.

Опора	Тип	По умолчанию
`class_name`	`str`

field.separator("Or continue with")

поле.ошибка

Доступный блок-контейнер типографики уведомлений об ошибках, настраиваемый автоматически с использованием стандартных переменных макета состояния приложения (role="alert").

Опора	Тип	По умолчанию
`class_name`	`str`

field.error("Invalid passcode combination provided.")