Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Checkbox

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

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 Conditions",
    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 Conditions", size="3")

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),
)

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",
)

Terms and Conditions

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.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",
)

A checkbox component with a label.

PropTypeDescriptionValues
textstr

The text label for the checkbox.

spacingLiteral

The gap between the checkbox and the label.

sizeLiteral

The size of the checkbox "1" - "3".

as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

variantLiteral

Variant of checkbox: "classic" | "surface" | "soft"

color_schemeLiteral

Override theme color for checkbox

high_contrastbool

Whether to render the checkbox with higher contrast color against background

default_checkedbool

Whether the checkbox is checked by default

checkedbool

Whether the checkbox is checked

disabledbool

Whether the checkbox is disabled

requiredbool

Whether the checkbox is required

namestr

The name of the checkbox control when submitting the form.

valuestr

The value of the checkbox control when submitting the form.

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

← ButtonDebounce →

Did you find this useful?