Input
The input component is an input field that users can type into.
Basic Example
The on_blur event handler is called when focus has left the input for example, it’s called when the user clicks outside of a focused text input.
Hello World!
The on_change event handler is called when the value of input has changed.
Hello World!
Behind the scenes, the input component is implemented as a debounced input to avoid sending individual state updates per character to the backend while the user is still typing. This allows a state variable to directly control the value prop from the backend without the user experiencing input lag.
Input Types
The type prop controls how the input is rendered (e.g. plain text, password, file picker).
It accepts the same values as the native HTML <input type> attribute, such as:
"text"(default)"password""email""number""file""checkbox""radio""date""time""url""color"
and several others. See the MDN reference for the full list.
Submitting a form using input
The name prop is needed to submit with its owning form as part of a name/value pair.
When the required prop is True, it indicates that the user must input text before the owning form can be submitted.
The type is set here to password. The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read. The type prop can take any value of email, file, password, text and several others. Learn more here.
Example Form
Results:
{}ExpandCollapse
To learn more about how to use forms in the Form docs.
Setting a value without using a State var
Set the value of the specified reference element, without needing to link it up to a State var. This is an alternate way to modify the value of the input.
API Reference
rx.input
Captures user input with an optional slot for buttons and icons.
disabledsizevariantcolor_schemeradiusProps
| 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. |
accept | str | Accepted types of files when the input is file type. |
alt | str | Alternate text for input type="image". |
auto_complete | bool | Whether the input should have autocomplete enabled. |
auto_focus | bool | Automatically focuses the input when the page loads. |
capture | "user""environment" | Captures media from the user (camera or microphone). |
checked | bool | Indicates whether the input is checked (for checkboxes and radio buttons). |
default_checked | bool | The initial value (for checkboxes and radio buttons). |
default_value | str | The value of the input when initially rendered. |
disabled | bool | Disables the input. |
form | str | Associates the input with a form (by id). |
form_action | str | URL to send the form data to (for type="submit" buttons). |
form_enc_type | str | How the form data should be encoded when submitting to the server (for type="submit" buttons). |
form_method | str | HTTP method to use for sending form data (for type="submit" buttons). |
form_no_validate | bool | Bypasses form validation when submitting (for type="submit" buttons). |
form_target | str | Specifies where to display the response after submitting the form (for type="submit" buttons). |
list | str | References a datalist for suggested options. |
max | Union[str, int, float] | Specifies the maximum value for the input. |
max_length | int | Specifies the maximum number of characters allowed in the input. |
min_length | int | Specifies the minimum number of characters required in the input. |
min | Union[str, int, float] | Specifies the minimum value for the input. |
multiple | bool | Indicates whether multiple values can be entered in an input of the type email or file. |
name | str | Name of the input, used when sending form data. |
pattern | str | Regex pattern the input's value must match to be valid. |
placeholder | str | Placeholder text in the input. |
read_only | bool | Indicates whether the input is read-only. |
required | bool | Indicates that the input is required. |
size | "1""2""3" | Text field size "1" - "3". |
src | str | URL for image inputs. |
step | Union[str, int, float] | Specifies the legal number intervals for an input. |
type | str | Specifies the type of input. |
value | Union[str, int, float] | Value of the input. |
variant | "classic""surface""soft" | Variant of text field: "classic" | "surface" | "soft". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Override theme color for text field. |
radius | "none""small""medium""large""full" | Override theme radius for text field: "none" | "small" | "medium" | "large" | "full". |