Skip to main content
Version: 4.0.0-beta.0

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

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();

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

errorMessage

adds error message (optional)

TypeDefault
stringnone

errorProps

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

TypeDefault
{...Text props}none

errorStyle

add styling to error message (optional)

TypeDefault
objectnone

InputComponent

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

TypeDefault
React Native ComponentTextInput

inputContainerStyle

styling for Input Component Container (optional)

TypeDefault
View style (object)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

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

labelStyle

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

TypeDefault
objectnone

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

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

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

Styles explanation

Input with a label and an error messageStyles explanation