70 lines
1.5 KiB
Markdown
70 lines
1.5 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Checkbox
|
|
---
|
|
|
|
# Checkbox
|
|
|
|
A checkbox is a common way to toggle boolean value.
|
|
The checkbox component can be used on its own or in a group.
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
```python demo
|
|
rx.chakra.checkbox("Check Me!")
|
|
```
|
|
|
|
Checkboxes can range in size and styles.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo exec
|
|
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,
|
|
)
|
|
)
|
|
```
|