Флажок

элемент управления, который позволяет пользователю переключаться между отмеченным и не отмеченным.

❯buridan add флажок

Error: Reference Target 'флажок' not found

Примеры

Базовый

Соедините флажок с field.root и field.label для правильного расположения и маркировки. id checkbox.root — это то, на что должен указывать html_for.

Использованный реквизит: id, default_checked на checkbox.root; html_for на field.label.

Accept terms and conditions

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_basic():
    return rx.el.div(
        field.root(
            checkbox.root(
                checkbox.indicator(),
                id="terms-checkbox-basic",
            ),
            field.label(
                "Accept terms and conditions",
                html_for="terms-checkbox-basic",
            ),
            orientation="horizontal",
        ),
        class_name="mx-auto max-w-sm",
    )

Описание

Используйте field.description для вспомогательного текста под меткой.

Использованный реквизит: id, default_checked на checkbox.root; html_for на field.label.

Error: Reference Target 'описание_флажка' not found

Отключено

Используйте параметр disabled, чтобы предотвратить взаимодействие — стиль оболочки has-[:disabled] автоматически затемняет его, дополнительный атрибут данных не требуется.

Использованный реквизит: id, disabled на checkbox.root; html_for на field.label.

Enable notifications

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_disabled() -> rx.Component:
    return rx.el.div(
        field.root(
            checkbox.root(
                checkbox.indicator(),
                id="toggle-checkbox-disabled",
                name="toggle-checkbox-disabled",
                disabled=True,
            ),
            field.label(
                "Enable notifications",
                html_for="toggle-checkbox-disabled",
            ),
            orientation="horizontal",
            data_disabled=True,
        ),
        class_name="mx-auto w-56",
    )

Группа

Используйте несколько field.root внутри fieldset, чтобы создать список флажков.

Использованный реквизит: id, default_checked на checkbox.root; html_for на field.label.

Error: Reference Target 'группа_флажков' not found

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

флажок.корень

Отображает <label>, обертывающим визуально скрытый <input type="checkbox">, и индикатор — щелчок в любом месте корня переключает его, без необходимости дополнительной проводки JS.

checkbox.root(
    checkbox.indicator(),
    id="terms",
    default_checked=True,
)

Опора	Тип	По умолчанию
`id`	`str`	автоматически передается на вход
`checked`	`bool`
`default_checked`	`bool`
`disabled`	`bool`	`False`
`required`	`bool`	`False`
`name`	`str`
`value`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

Если дочерние элементы не переданы, автоматически отображается checkbox.indicator() по умолчанию (значок галочки).

флажок.индикатор

Значок галочки, отображаемый, когда флажок установлен, через peer-checked:grid — подключение в стиле fallback_id/menu_id не требуется, это прямой аналог входа.

checkbox.indicator(hi("Tick02Icon"))

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

Если дочерние элементы не передаются, по умолчанию используется hi("Tick02Icon").

External Tools

︲

On This Page