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.

Agree to Terms and Conditions

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.

Agree to Terms and Conditions

rx.checkbox("Agree to Terms and Conditions", 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.

Agree to Terms and Conditios

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.

Agree to Terms and Conditios

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

Real World Example

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.

I certify that I have read and agree to the terms and conditions for this reservation.

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

API Reference

HighLevelCheckbox

A checkbox component with a label.

Basic Checkbox

Prop	Type	Description
`text`	str	The text label for the checkbox.
`spacing`	Literal	The gap between the checkbox and the label.
`size`	Literal	The size of the checkbox "1" - "3".
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`variant`	Literal	Variant of checkbox: "classic" \| "surface" \| "soft"
`color_scheme`	Literal	Override theme color for checkbox
`high_contrast`	bool	Whether to render the checkbox with higher contrast color against background
`default_checked`	bool	Whether the checkbox is checked by default
`checked`	bool	Whether the checkbox is checked
`disabled`	bool	Whether the checkbox is disabled
`required`	bool	Whether the checkbox is required
`name`	str	The name of the checkbox control when submitting the form.
`value`	str	The value of the checkbox control when submitting the form.