Form

Forms are used to collect information from your users. Forms group the inputs and submit them together.

Basic Example

Here is an example of a form collecting an email address, with built-in validation on the email. If email entered is invalid, the form cannot be submitted. Note that the form.submit button is not automatically disabled. It is still clickable, but does not submit the form data. After successful submission, an alert window shows up and the form is cleared. There are a few flex containers used in the example to control the layout of the form components.

In this example, the rx.input has an attribute type="email" and the form.message has the attribute match="typeMismatch". Those are required for the form to validate the input by its type. The prop as_child="True" is required when using other components to construct a Form component. This example has used rx.input to construct the Form Control and button the Form Submit.

Form Anatomy

form.root(
    form.field(
        form.label(...),
        form.control(...),
        form.message(...),
    ),
    form.submit(...),
)

A Form Root (form.root) contains all the parts of a form. The Form Field (form.field), Form Submit (form.submit), etc should all be inside a Form Root. A Form Field can contain a Form Label (form.label), a Form Control (form.control), and a Form Message (form.message). A Form Label is a label element. A Form Control is where the user enters the input or makes selections. By default, the Form Control is a input. Using other form components to construct the Form Control is supported. To do that, set the prop as_child=True on the Form Control.

The Form Message is a validation message which is automatically wired (functionality and accessibility). When the Form Control determines the input is invalid, the Form Message is shown. The match prop is to enable client side validation. To perform server side validation, both the force_match prop of the Form Control and the server_invalid prop of the Form Field are set together.

The Form Submit is by default a button that submits the form. To use another button component as a Form Submit, include that button as a child inside form.submit and set the prop as_child=True.

The on_submit prop of the Form Root accepts an event handler. It is called with the submitted form data dictionary. To clear the form after submission, set the reset_on_submit=True prop.

Data Submission

As previously mentioned, the various pieces of data in the form are submitted together as a dictionary. The form control or the input components must have the name attribute. This name is the key to get the value from the form data dictionary. If no validation is needed, the form type components such as Checkbox, Radio Groups, TextArea can be included directly under the Form Root instead of inside a Form Control.

box1 checkbox

1
2
3
box5 switch
box6 slider

Results

Validation

Server side validation is done through Computed Vars on the State. The Var should return a boolean flag indicating when input is invalid. Set that Var on both the server_invalid prop of form.field and the force_match prop of form.message. There is an example how to do that in the Final Example.

Final Example

The final example shows a form that collects username and email during sign-up and validates them using server side validation. When server side validation fails, messages are displayed in red to show what is not accepted in the form, and the submit button is disabled. After submission, the collected form data is displayed in texts below the form and the form is cleared.

Username cannot be empty
A valid Email is required

Username submitted:

Email submitted:

API Reference

rx.form

The Form component.

Test
PropType | ValuesDefaultInteractive
as_child
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_submitFunction 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 Fired when the errors are cleared.

rx.form.root

The root component of a radix form.

Please enter a valid email
PropType | ValuesDefaultInteractive
as_child
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_submitFunction 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 Fired when the errors are cleared.

rx.form.field

A form field component.

PropType | ValuesDefaultInteractive
name
str
server_invalid
bool
as_child
bool

rx.form.control

A form control component.

PropType | ValuesDefaultInteractive
as_child
bool

rx.form.label

A form label component.

PropType | ValuesDefaultInteractive
as_child
bool

rx.form.message

A form message component.

PropType | ValuesDefaultInteractive
name
str
match
"badInput" | "patternMismatch" | ...
force_match
bool
as_child
bool

rx.form.submit

A form submit component.

PropType | ValuesDefaultInteractive
as_child
bool