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",
)Did you find this useful?
