52 lines
1.2 KiB
Markdown
52 lines
1.2 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.FormControl
|
|
- rx.chakra.FormLabel
|
|
- rx.chakra.FormErrorMessage
|
|
- rx.chakra.FormHelperText
|
|
---
|
|
|
|
# Form Control
|
|
|
|
Form control provides context such as filled/focused/error/required for form inputs.
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
```python demo
|
|
rx.chakra.form_control(
|
|
rx.chakra.form_label("First Name", html_for="email"),
|
|
rx.chakra.checkbox("Example"),
|
|
rx.chakra.form_helper_text("This is a help text"),
|
|
is_required=True,
|
|
)
|
|
```
|
|
|
|
The example below shows a form error when then name length is 3 or less.
|
|
|
|
```python demo exec
|
|
import reflex as rx
|
|
|
|
class FormErrorState(rx.State):
|
|
name: str
|
|
|
|
@rx.var
|
|
def is_error(self) -> bool:
|
|
return len(self.name) <= 3
|
|
|
|
def form_state_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.form_control(
|
|
rx.chakra.input(placeholder="name", on_blur=FormErrorState.set_name),
|
|
rx.cond(
|
|
FormErrorState.is_error,
|
|
rx.chakra.form_error_message("Name should be more than four characters"),
|
|
rx.chakra.form_helper_text("Enter name"),
|
|
),
|
|
is_invalid=FormErrorState.is_error,
|
|
is_required=True,
|
|
)
|
|
)
|
|
```
|