Skip to main content
Version: 4.0.0-rc.3

Input

Import

import { Input } from "@rneui/themed";

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

note

Includes all React Native TextInput, View props.

NameTypeDefaultDescription
InputComponentComponentType<{}> or ForwardRefExoticComponent<any>
containerStyleView Style
disabledboolean
disabledInputStyleText Style
errorMessagestring
errorPropsobject
errorStyleText Style
inputContainerStyleView Style
inputStyleText Style
labelReactNode
labelPropsobject
labelStyleText Style
leftIconIconNode
leftIconContainerStyleView Style
renderErrorMessageboolean
rightIconIconNode
rightIconContainerStyleView Style
shakeFunction

Playground

Loading...