Reflex Logo
Docs Logo
Library

/

Forms

/

Form

High Level

Low Level

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'.

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.

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-
as_child
bool
-
accept
str
-
accept_charset
str
-
action
str
-
auto_complete
str
-
enc_type
str
-
method
str
-
name
str
-
no_validate
bool
-
target
str
-
reset_on_submit
bool
-
handle_submit_unique_name
str
-

Event Triggers

See the full list of default event triggers
TriggerDescription
on_submitFired when the form is submitted.
on_clear_server_errorsFired when the errors are cleared.

rx.form.root

The root component of a radix form.

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-
as_child
bool
-
accept
str
-
accept_charset
str
-
action
str
-
auto_complete
str
-
enc_type
str
-
method
str
-
name
str
-
no_validate
bool
-
target
str
-
reset_on_submit
bool
-
handle_submit_unique_name
str
-

Event Triggers

See the full list of default event triggers
TriggerDescription
on_submitFired when the form is submitted.
on_clear_server_errorsFired when the errors are cleared.

rx.form.field

A form field component.

PropType | ValuesDefaultInteractive
as_child
bool
-
name
str
-
server_invalid
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
as_child
bool
-
name
str
-
match
"badInput" | "patternMismatch" | ...
-
force_match
bool
-

rx.form.submit

A form submit component.

PropType | ValuesDefaultInteractive
as_child
bool
-

Built with Reflex