HTML Form Elements

Form-related HTML elements are available through the rx.el namespace.

API Reference

Shared HTML props

Components linked to this section accept these HTML props. Component-specific additions and overrides are listed below.

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.

rx.el.fieldset

Display the fieldset element.

Props

Prop	Type	Description
`disabled`	`bool`	Disables all the form control descendants of the fieldset.
`form`	`str`	Associates the fieldset with a form (by id).
`name`	`str`	Name of the fieldset, used for scripting.

Event Triggers

See the full list of default event triggers

rx.el.form

Display the form element.

Props

Prop	Type	Description
`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.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_submit`	Fired when the form is submitted.

rx.el.label

Display the label element.

Props

Prop	Type	Description
`html_for`	`str`	ID of a form control with which the label is associated.
`form`	`str`	Associates the label with a form (by id).

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.legend

Display the legend element.

Props

No component specific props

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.meter

Display the meter element.

Props

Prop	Type	Description
`form`	`str`	Associates the meter with a form (by id).
`high`	`Union[str, int, float]`	High limit of range (above this is considered high value).
`low`	`Union[str, int, float]`	Low limit of range (below this is considered low value).
`max`	`Union[str, int, float]`	Maximum value of the range.
`min`	`Union[str, int, float]`	Minimum value of the range.
`optimum`	`Union[str, int, float]`	Optimum value in the range.
`value`	`Union[str, int, float]`	Current value of the meter.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.optgroup

Display the optgroup element.

Props

Prop	Type	Description
`disabled`	`bool`	Disables the optgroup.
`label`	`str`	Label for the optgroup.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.option

Display the option element.

Props

Prop	Type	Description
`disabled`	`bool`	Disables the option.
`label`	`str`	Label for the option, if the text is not the label.
`selected`	`bool`	Indicates that the option is initially selected.
`value`	`Union[str, int, float]`	Value to be sent as form data.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.output

Display the output element.

Props

Prop	Type	Description
`html_for`	`str`	Associates the output with one or more elements (by their IDs).
`form`	`str`	Associates the output with a form (by id).
`name`	`str`	Name of the output element for form submission.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.progress

Display the progress element.

Props

Prop	Type	Description
`form`	`str`	Associates the progress element with a form (by id).
`max`	`Union[str, int, float]`	Maximum value of the progress indicator.
`value`	`Union[str, int, float]`	Current value of the progress indicator.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.select

Display the select element.

Props

Prop	Type	Description
`auto_complete`	`str`	Whether the form control should have autocomplete enabled.
`auto_focus`	`bool`	Automatically focuses the select when the page loads.
`disabled`	`bool`	Disables the select control.
`form`	`str`	Associates the select with a form (by id).
`multiple`	`bool`	Indicates that multiple options can be selected.
`name`	`str`	Name of the select, used when submitting the form.
`required`	`bool`	Indicates that the select control must have a selected option.
`size`	`Union[str, int]`	Number of visible options in a drop-down list.
`value`	`str`	The controlled value of the select, read only unless used with on_change.
`default_value`	`str`	The default value of the select when initially rendered.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_change`	Fired when the select value changes.

rx.el.textarea

Display the textarea element.

Props

Prop	Type	Description
`auto_complete`	`str`	Whether the form control should have autocomplete enabled.
`auto_focus`	`bool`	Automatically focuses the textarea when the page loads.
`auto_height`	`bool`	Automatically fit the content height to the text (use min-height with this prop).
`cols`	`Union[str, int]`	Visible width of the text control, in average character widths.
`default_value`	`str`	The default value of the textarea when initially rendered.
`dirname`	`str`	Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted.
`disabled`	`bool`	Disables the textarea.
`enter_key_submit`	`bool`	Enter key submits form (shift-enter adds new line).
`form`	`str`	Associates the textarea with a form (by id).
`max_length`	`Union[str, int]`	Maximum number of characters allowed in the textarea.
`min_length`	`Union[str, int]`	Minimum number of characters required in the textarea.
`name`	`str`	Name of the textarea, used when submitting the form.
`placeholder`	`str`	Placeholder text in the textarea.
`read_only`	`bool`	Indicates whether the textarea is read-only.
`required`	`bool`	Indicates that the textarea is required.
`rows`	`Union[str, int]`	Visible number of lines in the text control.
`value`	`str`	The controlled value of the textarea, read only unless used with on_change.
`wrap`	`str`	How the text in the textarea is to be wrapped when submitting the form.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_change`	Fired when the input value changes.
`on_key_down`	Fired when a key is pressed down.
`on_key_up`	Fired when a key is released.

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

HTML Form Elements

API Reference

Shared HTML props

Props

rx.el.fieldset

Props

Event Triggers

rx.el.form

Props

Event Triggers

rx.el.label

Props

Event Triggers

rx.el.legend

Props

Event Triggers

rx.el.meter

Props

Event Triggers

rx.el.optgroup

Props

Event Triggers

rx.el.option

Props

Event Triggers

rx.el.output

Props

Event Triggers

rx.el.progress

Props

Event Triggers

rx.el.select

Props

Event Triggers

rx.el.textarea

Props

Event Triggers