TextInput API

API reference docs for theTextInputcomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

PropTypeDescriptionDefault
adornmentStart?React.ReactNodeSlot to render start adornment._
adornmentEnd?React.ReactNodeSlot to render end adornment_
aria-activedescendant?stringIdentifies the currently active element when DOM focus is on the text input._
aria-autocomplete?"none" | "inline" | "list" | "both"Indicates whether inputting text field can show suggested values and how those suggestions appear._
aria-controls?stringIdentifies the element(s) that the text input controls._
aria-expanded?booleanIndicates whether the element, or another grouping element it controls, is currently expanded or collapsed._
aria-haspopup?boolean [ "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" ]Indicates the availability of a popup related to the text input._
autoComplete?stringIndicates if autocomplete is enabled for the input field._
autoCorrect?'on' | 'off'Indicates if auto-correction is turned on for the input._
autoFocus?booleanAutomatically sets focus on the input field when it appears_
defaultValue?string | number | readonly string[] | undefinedThe initial value of the text input._
disabled?booleanWhen true, the input becomes uneditable, makes it read-only, and blocks interaction.false
inputMode?"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefinedIt specifies the type of virtual keyboard to display, helping users enter the correct type of data more easily._
name?string | undefinedIdentifier for the input, used in form submissions._
onBlur?functionA function that executes when the input loses focus._
onChange?functionA function that executes when the input's value changes._
onFocus?functionA function that triggered when the input receives focus._
onKeyDown?functionA function that called when a key is pressed while the input is focused._
onClick?functionA function that called when Textinput is clicked._
onPaste?functionA function that executes when content is pasted into the input._
pattern?stringRegular expression pattern the input's value must match for validation._
placeholder?stringPlaceholder text displayed when the input is empty._
role?stringARIA role for the input._
spellCheck?booleanIndicates if the input value should be checked for spelling errors._
type?'email' | 'password' | 'search' | 'tel' | 'text' | 'url'Type of the input element._
value?string | number | readonly string[] | undefinedDefines the default or current value of the input field._
focusContainerRef?React.Ref<HTMLDivElement>Reference to the wrapper FocusContainer element._