react-native-web/packages/react-native-web-docs/src/pages/docs/components/text-input.md

title, date, permalink, eleventyNavigation

title	date	permalink	eleventyNavigation
TextInput	Last Modified	/docs/text-input/index.html	key parent label TextInput Components Change

{% import "fragments/macros.html" as macro with context %}

:::lead 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

{% call macro.prop('...AccessibilityProps') %} The [accessibility props]({{ '/docs/accessibility' | url }}). {% endcall %}

{% call macro.prop('...PointerProps') %} The [PointerEvent props]({{ '/docs/interactions' | url }}). {% endcall %}

{% call macro.prop('...FocusProps') %} The [FocusEvent props]({{ '/docs/interactions' | url }}). {% endcall %}

{% call macro.prop('...KeyboardProps') %} The [KeyboardEvent props]({{ '/docs/interactions' | url }}). {% endcall %}

{% call macro.prop('autoCapitalize', '?string') %} Equivalent to HTMLElement.autocapitalize. {% endcall %}

{% call macro.prop('autoComplete', '?string') %} Equivalent to HTMLElement.autocomplete. {% endcall %}

{% call macro.prop('autoCorrect', '?boolean = true') %} A string indicating whether or not auto-correct behavior is on or off. Safari only. {% endcall %}

{% call macro.prop('autoFocus', '?boolean = false') %} If true, focuses the input on mount. Only the first form element in a document with auto-focus is focused. {% endcall %}

{% call macro.prop('blurOnSubmit', '?boolean') %} 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. {% endcall %}

{% call macro.prop('clearTextOnFocus', '?boolean = false') %} If true, clears the text field automatically when focused. {% endcall %}

{% call macro.prop('dataSet', '?Object') %} Equivalent to HTMLElement.dataset. {% endcall %}

{% call macro.prop('defaultValue', '?string') %} 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. {% endcall %}

{% call macro.prop('dir', '?("auto" | "ltr" | "rtl") = "auto"') %} Equivalent to HTMLElement.dir. {% endcall %}

{% call macro.prop('disabled', '?boolean = false') %} Equivalent to HTMLElement.disabled {% endcall %}

{% call macro.prop('enterKeyHint', '?string') %} Specifies what action label (or icon) to present for the enter key on virtual keyboards. Equivalent to HTMLElement.enterkeyhint {% endcall %}

{% call macro.prop('id', '?string') %} Equivalent to HTMLElement.id. {% endcall %}

{% call macro.prop('inputMode', '?string') %} 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.) {% endcall %}

{% call macro.prop('lang', '?string') %} Equivalent to HTMLElement.lang. This prop is used to infer writing direction if no dir is set. {% endcall %}

{% call macro.prop('maxLength', '?string') %} Equivalent to HTMLElement.maxlength. {% endcall %}

{% call macro.prop('multiline', '?boolean = false') %} If true, the text input can be multiple lines. {% endcall %}

{% call macro.prop('onChange', '?(e: ChangeEvent) => void') %} Equivalent to the React DOM ChangeEvent. {% endcall %}

{% call macro.prop('onChangeText', '?(text: string) => void') %} Called when the text content of the input changes. {% endcall %}

{% call macro.prop('onContentSizeChange', '?({ nativeEvent: { contentSize: { width, height } } }) => void') %} Callback that is called when the text input's content size changes. {% endcall %}

{% call macro.prop('onKeyPress', '?(e: KeyboardEvent) => void') %} Equivalent to the [onKeyDown prop]({{ '/docs/interactions' | url }}). {% endcall %}

{% call macro.prop('onLayout', '?({ nativeEvent: { layout: { x, y, width, height } } }) => void') %} This is invoked when a component is mounted and when its layout changes. x and y are the offsets from the parent node. {% endcall %}

{% call macro.prop('onScroll', '?(e: ScrollEvent) => void') %} Called during scrolling. {% endcall %}

{% call macro.prop('onSelectionChange', '?({ nativeEvent: { selection: { start, end } } }) => void') %} Callback that is called when the text input's selection changes. {% endcall %}

{% call macro.prop('onSubmitEditing', '?() => void') %} Callback that is called when the keyboard's submit button is pressed. When multiline={true}, this is only called if blurOnSubmit={true}. {% endcall %}

{% call macro.prop('placeholder', '?boolean') %} Text that appears in the form control when it has no value set. {% endcall %}

{% call macro.prop('placeholderTextColor', '?string') %} Equivalent to defining ::placeholder { color } via a CSS property. {% endcall %}

{% call macro.prop('readOnly', '?boolean = false') %} Equivalent to HTMLElement.readonly {% endcall %}

{% call macro.prop('rows', '?number = 1') %} Sets the number of lines for a multiline input. (Requires multiline to be true.) {% endcall %}

{% call macro.prop('secureTextEntry', '?boolean = false') %} Set to true for passwords and other sensitive data. Equivalent to HTMLInputElement "password" type. (Not available when multiline is true.) {% endcall %}

{% call macro.prop('selectTextOnFocus', '?boolean = false') %} If true, all text will automatically be selected on focus. {% endcall %}

{% call macro.prop('spellCheck', '?boolean') %} Equivalent to HTMLElement.spellcheck {% endcall %}

{% call macro.prop('style', '?Style') %} Set the styles of the view. TextInput supports typographic styles in addition to those of View. {% endcall %}

{% call macro.prop('testID', '?string') %} Set the test selector label (via data-testid). {% endcall %}

{% call macro.prop('value', '?string') %} The value of the input when using it as a controlled component. {% endcall %}

Instance methods

{% call macro.prop('blur', '() => void') %} Blur the underlying DOM input. {% endcall %}

{% call macro.prop('clear', '() => void') %} Clear the text from the underlying DOM input. {% endcall %}

{% call macro.prop('focus', '() => void') %} Focus the underlying DOM input. {% endcall %}

{% call macro.prop('isFocused', '() => boolean') %} Returns true if the input is currently focused; false otherwise. {% endcall %}

---

Examples

{{ macro.codesandbox('text-input') }}