Skip to main content
Version: 2.3.2

Input

Inputs allow users to enter text into a UI. They typically appear in forms and dialogs.

Input with placeholder
Placeholder
Input with Label and icons
Label with Icons

Usage#

import Icon from 'react-native-vector-icons/FontAwesome';import { Input } from 'react-native-elements';
<Input  placeholder='BASIC INPUT'/>
<Input  placeholder='INPUT WITH ICON'  leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}/>
<Input  placeholder='INPUT WITH CUSTOM ICON'  leftIcon={    <Icon      name='user'      size={24}      color='black'    />  }/>

 <Input   placeholder="Comment"   leftIcon={{ type: 'font-awesome', name: 'comment' }}   style={styles}   onChangeText={value => this.setState({ comment: value })}  />

<Input  placeholder='INPUT WITH ERROR MESSAGE'  errorStyle={{ color: 'red' }}  errorMessage='ENTER A VALID ERROR HERE'/>
<Input placeholder="Password" secureTextEntry={true} />

Props#

This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:


Reference#

containerStyle#

styling for view containing the label, the input and the error message

TypeDefault
View style (object)none

disabled#

disables the input component

TypeDefault
booleanfalse

disabledInputStyle#

disabled styles that will be passed to the style props of the React Native TextInput (optional)

TypeDefault
Text style (object)none

inputContainerStyle#

styling for Input Component Container (optional)

TypeDefault
View style (object)none

errorMessage#

adds error message (optional)

TypeDefault
stringnone

errorStyle#

add styling to error message (optional)

TypeDefault
objectnone

errorProps#

props to be passed to the React Native Text component used to display the error message (optional)

TypeDefault
{...Text props}none

inputStyle#

style that will be passed to the style props of the React Native TextInput (optional)

TypeDefault
objectnone

label#

add a label on top of the input (optional)

TypeDefault
string OR React element or componentnone

labelStyle#

styling for the label (optional); You can only use this if label is a string

TypeDefault
objectnone

labelProps#

props to be passed to the React Native Text component used to display the label or React Component used instead of simple string in label prop (optional)

TypeDefault
{...Text props} OR passed component propsnone

leftIcon#

displays an icon on the left (optional)

TypeDefault
{...Icon props}
OR
component
none

leftIconContainerStyle#

styling for left Icon Component container

TypeDefault
View style (object)none

placeholder#

Placeholder text for the input

TypeDefault
stringnone

rightIcon#

displays an icon on the right (optional)

TypeDefault
{...Icon props}
OR
component
none

rightIconContainerStyle#

styling for right Icon Component container

TypeDefault
View style (object)none

renderErrorMessage#

If the error message container should be rendered (take up vertical space). If false, when showing errorMessage, the layout will shift to add it at that time.

TypeDefault
booleantrue

InputComponent#

component that will be rendered in place of the React Native TextInput (optional)

TypeDefault
React Native ComponentTextInput

Styles explanation#

Input with a label and an error messageStyles explanation 

Interaction methods#

methoddescription
focusFocuses the Input
blurRemoves focus from the Input
clearClears the text in the Input
isFocusedReturns true or false if the Input is focused
setNativePropsSets props directly on the react native component
shakeShakes the input for error feedback

Calling methods on Input#

Store a reference to the Input in your component by using the ref prop provided by React (see docs):

const input = React.createRef();
<Input  ref={input}  .../>

You can then use the Input methods like this:

input.current.focus();input.current.blur();input.current.clear();input.current.isFocused();input.current.setNativeProps({ value: 'hello' });input.current.shake();