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
{}
ExpandCollapse
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
{}
ExpandCollapse
API Reference
rx.form
The Form component.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
as_child | bool | Change the default rendered element for the one passed as a child. |
accept | str | MIME types the server accepts for file upload. |
accept_charset | str | Character encodings to be used for form submission. |
action | str | URL where the form's data should be submitted. |
auto_complete | str | Whether the form should have autocomplete enabled. |
enc_type | str | Encoding type for the form data when submitted. |
method | str | HTTP method to use for form submission. |
name | str | Name of the form. |
no_validate | bool | Indicates that the form should not be validated on submit. |
target | str | Where to display the response after submitting the form. |
reset_on_submit | bool | If true, the form will be cleared after submit. |
handle_submit_unique_name | str | The name used to make this form's submit handler function unique. |