TextInput
This component provides single and multi-line text input capabilities.

Styles

  • Text Styles
  • Flexbox Styles
  • View Styles
  • Transform Styles

Props

Name
Type
Description
accessibilityLabel
boolean
  • Text to be used by screen readers
accessibilityId
string
  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated
  • You can assign this property and check instance.props.accessibilityId
  • For example accessibilityId is used in View's FocusArbitrator callback
allowFontScaling
boolean
  • Should fonts be scaled according to system setting?
  • Android and iOS only
autoCapitalize
'none' | 'sentences' |'words' |'characters'
  • Auto-capitalization mode
autoCorrect
boolean
  • Should auto-correction be applied to contents?
autoFocus
boolean
  • Should be focused when the component is mounted, see also View's arbitrateFocus property
  • WARNING: autoFocus=true means that this TextInput's requestFocus() method will be called, however calling requestFocus() might have no effect (for example the input is disabled), the application has to handle this either while setting this property or in the View's FocusArbitrator callback
blurOnSubmit
boolean
  • Should focus be lost after submitting?
clearButtonMode
'never' | 'while-editing' | 'unless-editing' | 'always'
  • iOS and Windows only property for controlling when the clear button should appear on the right side of the text view
  • Default behavior dependends on platform: equivalent to 'never' on iOS, and 'always' on Windows
defaultValue
string
  • Initial value that will change when the user starts typing
disableFullscreenUI
boolean
  • Disable full screen editor mode?
editable
boolean
  • Can text be edited by the user?
keyboardAppearance
'default' | 'light' | 'dark'
  • iOS-only prop for controlling the keyboard appearance
keyboardType
'default' | 'numeric' | 'email-address' | 'number-pad'
  • On-screen keyboard type to display
maxLength
number
  • Maximum character count
multiline
boolean
  • Should the control support multiple lines of text?
onBlur
() => void
  • Called when the control loses focus
onChangeText
(newValue: string) => void
  • Called when the text value changes
onFocus
() => void
  • Called when the control obtains focus
onKeyPress
(e: KeyboardEvent) => void
  • Called on a key event
onPaste
(e: ClipboardEvent) => void
  • Called when text is pasted into the control (not currently supported on iOS or Android)
onScroll
(newScrollLeft: number, newScrollTop: number) => void
  • Called when the selection scrolls due to overflow
onSelectionChange
(start: number, end: number) => void
  • Called when the selection range or insertion point location changes
onSubmitEditing
() => void
  • Called when the text input submit button is pressed; invalid if multiline is true
placeholder
string
  • Placeholder text to dislpay when input is empty
placeholderTextColor
color
  • Color of placeholder text
returnKeyType
'done' | 'go' | 'next' | 'search' | 'send'
  • iOS and android prop for controlling return key type
secureTextEntry
boolean
  • Obscure the text input (for passwords)?
spellCheck
boolean
  • Should spell checking be applied to contents?
style
TextInputStyleRuleSet | TextInputStyleRuleSet[]
  • See below for supported styles
testId
string
  • ID that can be used to identify the instantiated element for testing purposes
title
string
  • Text for a tooltip
value
string
  • If defined, the control value is forced to match this value
  • If undefined, control value can be modified by the user
Copy link
On this page
Styles
Props