TextInput
Accessible single- and multi-line text input via a keyboard.
Supports features such as auto-complete, auto-focus, placeholder text, and event callbacks. Note: some props are exclusive to or excluded from multiline
.
import { TextInput } from 'react-native-web';
<TextInput {...props} />;
API
Props
The accessibility props.
The PointerEvent props.
The FocusEvent props.
The KeyboardEvent props.
A string indicating whether or not auto-correct behavior is on or off. Safari only.
If true
, focuses the input on mount. Only the first form element in a document with auto-focus is focused.
If true
, the text field will blur when submitted. The default value is true
for single-line fields and false
for multiline fields. Note, for multiline fields setting blurOnSubmit
to true
means that pressing return will blur the field and trigger the onSubmitEditing
event instead of inserting a newline into the field.
If true
, clears the text field automatically when focused.
The initial value of the input. Useful for simple use-cases where you don’t want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Specifies what action label (or icon) to present for the enter key on virtual keyboards. Equivalent to HTMLElement.enterkeyhint
Hints at the type of data that might be entered by the user while editing the element or its contents. Equivalent to HTMLElement.inputMode. Safari iOS requires an ancestral <form action>
element to display the search keyboard. (Not available when multiline is true.)
Equivalent to HTMLElement.lang. This prop is used to infer writing direction if no dir
is set.
If true
, the text input can be multiple lines.
Equivalent to the React DOM ChangeEvent
.
Called when the text content of the input changes.
Callback that is called when the text input’s content size changes.
This is invoked when a component is mounted and when its layout changes. x
and y
are the offsets from the parent node.
Called during scrolling.
Callback that is called when the text input’s selection changes.
Callback that is called when the keyboard’s submit button is pressed. When multiline={true}
, this is only called if blurOnSubmit={true}
.
Text that appears in the form control when it has no value set.
Equivalent to defining ::placeholder { color }
via a CSS property.
Sets the number of lines for a multiline input. (Requires multiline
to be true
.)
Set to true
for passwords and other sensitive data. Equivalent to HTMLInputElement “password” type
. (Not available when multiline
is true
.)
If true
, all text will automatically be selected on focus.
Set the styles of the view. TextInput
supports typographic styles in addition to those of View
.
Set the test selector label (via data-testid
).
The value of the input when using it as a controlled component.
Instance methods
Blur the underlying DOM input.
Clear the text from the underlying DOM input.
Focus the underlying DOM input.
Returns true
if the input is currently focused; false
otherwise.