Library
/
Chakra
/
Forms
/
Checkbox
A checkbox is a common way to toggle boolean value. The checkbox component can be used on its own or in a group.
rx.chakra.checkbox("Check Me!")Checkboxes can range in size and styles.
rx.chakra.hstack(
rx.chakra.checkbox(
"Example", color_scheme="green", size="sm"
),
rx.chakra.checkbox(
"Example", color_scheme="blue", size="sm"
),
rx.chakra.checkbox(
"Example", color_scheme="yellow", size="md"
),
rx.chakra.checkbox(
"Example", color_scheme="orange", size="md"
),
rx.chakra.checkbox(
"Example", color_scheme="red", size="lg"
),
)Checkboxes can also have different visual states.
rx.chakra.hstack(
rx.chakra.checkbox(
"Example",
color_scheme="green",
size="lg",
is_invalid=True,
),
rx.chakra.checkbox(
"Example",
color_scheme="green",
size="lg",
is_disabled=True,
),
)Checkboxes can be hooked up to a state using the on_change prop.
Unchecked
import reflex as rx
class CheckboxState(rx.State):
checked: bool = False
def toggle(self):
self.checked = not self.checked
def checkbox_state_example():
return rx.chakra.hstack(
rx.cond(
CheckboxState.checked,
rx.chakra.text("Checked", color="green"),
rx.chakra.text("Unchecked", color="red"),
),
rx.chakra.checkbox(
"Example",
on_change=CheckboxState.set_checked,
),
)The Checkbox component is used in forms when a user needs to select multiple values from several options.
Event Triggers
Did you find this useful?
No
Yes
