Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Form

Forms are used to collect user input. The rx.form component is used to group inputs and submit them together.

The form component's children can be form controls such as rx.input, rx.checkbox, rx.slider, rx.textarea, rx.radio_group, rx.select or rx.switch. The controls should have a 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.

Results

{}

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.vstack(
        rx.form(
            rx.vstack(
                rx.input(
                    placeholder="First Name",
                    name="first_name",
                ),
                rx.input(
                    placeholder="Last Name",
                    name="last_name",
                ),
                rx.hstack(
                    rx.checkbox("Checked", name="check"),
                    rx.switch("Switched", name="switch"),
                ),
                rx.button("Submit", type="submit"),
            ),
            on_submit=FormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.heading("Results"),
        rx.text(FormState.form_data.to_string()),
    )

When using the form you must include a button or input with type='submit'.

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.

Results

{}

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.vstack(
        rx.form(
            rx.vstack(
                rx.foreach(
                    DynamicFormState.form_fields,
                    lambda field, idx: rx.input(
                        placeholder=DynamicFormState.form_field_placeholders[
                            idx
                        ],
                        name=field,
                    ),
                ),
                rx.button("Submit", type="submit"),
            ),
            on_submit=DynamicFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.form(
            rx.hstack(
                rx.input(
                    placeholder="New Field",
                    name="new_field",
                ),
                rx.button("+", type="submit"),
            ),
            on_submit=DynamicFormState.add_field,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.heading("Results"),
        rx.text(DynamicFormState.form_data.to_string()),
    )

The Form component.

Test
PropTypeDescriptionValues
reset_on_submitbool

If true, the form will be cleared after submit.

handle_submit_unique_namestr

The name used to make this form's submit handler function unique.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

TriggerDescription
on_submit

Function or event handler called when the user submits a form. For example, it is called when the user clicks on a submit button.

on_clear_server_errors

The on_clear_server_errors event handler is called when the form is submitted or reset and the server errors need to be cleared.

The root component of a radix form.

Please enter a valid email
PropTypeDescriptionValues
reset_on_submitbool

If true, the form will be cleared after submit.

handle_submit_unique_namestr

The name used to make this form's submit handler function unique.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

TriggerDescription
on_submit

Function or event handler called when the user submits a form. For example, it is called when the user clicks on a submit button.

on_clear_server_errors

The on_clear_server_errors event handler is called when the form is submitted or reset and the server errors need to be cleared.

A form field component.

PropTypeDescriptionValues
namestr

The name of the form field, that is passed down to the control and used to match with validation messages.

server_invalidbool

Flag to mark the form field as invalid, for server side validation.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

A form control component.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

A form label component.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

A form message component.

PropTypeDescriptionValues
namestr

Used to target a specific field by name when rendering outside of a Field part.

matchLiteral

Used to indicate on which condition the message should be visible.

force_matchbool

Forces the message to be shown. This is useful when using server-side validation.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

A form submit component.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

← EditorInput →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting