111 lines
3.6 KiB
Markdown
111 lines
3.6 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Form
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Form
|
|
|
|
Forms are used to collect user input. The `rx.chakra.form` component is used to group inputs and submit them together.
|
|
|
|
The form component's children can be form controls such as `rx.chakra.input`, `rx.chakra.checkbox`, or `rx.chakra.switch`. The controls should have an `name` attribute that is used to identify the control in the form data. The `on_submit` event trigger submits the form data as a dictionary to the `handle_submit` event handler.
|
|
|
|
The form is submitted when the user clicks the submit button or presses enter on the form controls.
|
|
|
|
```python demo exec
|
|
class FormState(rx.State):
|
|
form_data: dict = {}
|
|
|
|
def handle_submit(self, form_data: dict):
|
|
"""Handle the form submit."""
|
|
self.form_data = form_data
|
|
|
|
|
|
def form_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.form(
|
|
rx.chakra.vstack(
|
|
rx.chakra.input(placeholder="First Name", name="first_name"),
|
|
rx.chakra.input(placeholder="Last Name", name="last_name"),
|
|
rx.chakra.hstack(
|
|
rx.chakra.checkbox("Checked", name="check"),
|
|
rx.chakra.switch("Switched", name="switch"),
|
|
),
|
|
rx.chakra.button("Submit", type_="submit"),
|
|
),
|
|
on_submit=FormState.handle_submit,
|
|
reset_on_submit=True,
|
|
),
|
|
rx.chakra.divider(),
|
|
rx.chakra.heading("Results"),
|
|
rx.chakra.text(FormState.form_data.to_string()),
|
|
)
|
|
```
|
|
|
|
```md alert warning
|
|
# When using the form you must include a button or input with `type_='submit'`.
|
|
```
|
|
|
|
## Dynamic Forms
|
|
|
|
Forms can be dynamically created by iterating through state vars using `rx.foreach`.
|
|
|
|
This example allows the user to add new fields to the form prior to submit, and all
|
|
fields will be included in the form data passed to the `handle_submit` function.
|
|
|
|
```python demo exec
|
|
class DynamicFormState(rx.State):
|
|
form_data: dict = {}
|
|
form_fields: list[str] = ["first_name", "last_name", "email"]
|
|
|
|
@rx.cached_var
|
|
def form_field_placeholders(self) -> list[str]:
|
|
return [
|
|
" ".join(w.capitalize() for w in field.split("_"))
|
|
for field in self.form_fields
|
|
]
|
|
|
|
def add_field(self, form_data: dict):
|
|
new_field = form_data.get("new_field")
|
|
if not new_field:
|
|
return
|
|
field_name = new_field.strip().lower().replace(" ", "_")
|
|
self.form_fields.append(field_name)
|
|
|
|
def handle_submit(self, form_data: dict):
|
|
self.form_data = form_data
|
|
|
|
|
|
def dynamic_form():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.form(
|
|
rx.chakra.vstack(
|
|
rx.foreach(
|
|
DynamicFormState.form_fields,
|
|
lambda field, idx: rx.chakra.input(
|
|
placeholder=DynamicFormState.form_field_placeholders[idx],
|
|
name=field,
|
|
),
|
|
),
|
|
rx.chakra.button("Submit", type_="submit"),
|
|
),
|
|
on_submit=DynamicFormState.handle_submit,
|
|
reset_on_submit=True,
|
|
),
|
|
rx.chakra.form(
|
|
rx.chakra.hstack(
|
|
rx.chakra.input(placeholder="New Field", name="new_field"),
|
|
rx.chakra.button("+", type_="submit"),
|
|
),
|
|
on_submit=DynamicFormState.add_field,
|
|
reset_on_submit=True,
|
|
),
|
|
rx.chakra.divider(),
|
|
rx.chakra.heading("Results"),
|
|
rx.chakra.text(DynamicFormState.form_data.to_string()),
|
|
)
|
|
```
|