rx.form
component is used to group inputs and submit them together.rx.input
, rx.checkbox
, or rx.switch
.The controls should have an id
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.{}
class FormState(rx.State):
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
def index():
return rx.vstack(
rx.form(
rx.vstack(
rx.input(
placeholder="First Name",
id="first_name",
),
rx.input(
placeholder="Last Name", id="last_name"
),
rx.hstack(
rx.checkbox("Checked", id="check"),
rx.switch("Switched", id="switch"),
),
rx.button("Submit", type_="submit"),
),
on_submit=FormState.handle_submit,
),
rx.divider(),
rx.heading("Results"),
rx.text(FormState.form_data.to_string()),
)
type_='submit'
.A form component.