components:

- rx.radix.checkbox

HighLevelCheckbox: |

lambda **props: rx.radix.themes.checkbox("Basic Checkbox", **props)

import reflex as rx

Checkbox

Checkboxes allow users to select one or more items from a set.

Basic example

rx.checkbox()

The checkbox component takes a text prop, which is the text label associated with the checkbox.

The default_checked prop defines whether the checkbox is checked by default.

The gap prop determines the space between the checkbox and the text label.

rx.checkbox("Agree to Terms and Conditios", default_checked=True, spacing="2")

The size prop determines the size of the checkbox and the associated text label.

rx.checkbox("Agree to Terms and Conditios", size="3")

Disabled

The disabled prop disables the checkbox, by default it is False. A disabled checkbox does not respond to user interactions such as click and cannot be focused.

rx.hstack(
    rx.checkbox(),
    rx.checkbox(disabled=True),
)

Triggers

OnChange

The on_change trigger is called when the checkbox is clicked.

rx.checkbox("Agree to Terms and Conditios", default_checked=True, on_change=rx.window_alert("Checked!"))

The checkbox can also take other styling props such as color_scheme and variant.

rx.checkbox("Agree to Terms and Conditios", size="3", color_scheme="red", variant="soft")

Real World Example

rx.flex(
    rx.heading("Terms and Conditions"),
    rx.text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut  sem nec arcu 'pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.",
    ),
    rx.checkbox("I certify that I have read and agree to the terms and conditions for this reservation.", spacing="2", size="2", default_checked=True),
    rx.button("Book Reservation"),
    direction="column",
    align_items="start",
    border="1px solid #e2e8f0",
    background_color="#f7fafc",
    border_radius="15px",
    spacing="3",
    padding="1em",
)

checkbox.md 2.2 KB 文件历史 原始文件