Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

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

{}

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.

Results

{}

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