Skip to main content
Version: Bleeding Edge 🚧

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
InputComponentReact Componentcomponent that will be rendered in place of the React Native TextInput
containerStyleView StyleStyle for container
disabledbooleandisables the input component
disabledInputStyleText Styledisabled styles that will be passed to the style props of the React Native TextInput
errorMessagestringError message to be displayed under the input field
errorPropsobjectprops to be passed to the React Native Text component used to display the error message
errorStyleText Styleadd styling to error message
inputContainerStyleView Stylestyling for Input Component Container
inputStyleText StyleStyle for Input Component
labelReactNodeadd a label on top of the input
labelPropsobjectprops 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
labelStyleText Stylestyling for the label; You can only use this if label is a string
leftIconIconNodedisplays an icon on the left
leftIconContainerStyleView Stylestyling for left Icon Component container
renderErrorMessagebooleanIf 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.
rightIconIconNodedisplays an icon on the right
rightIconContainerStyleView Stylestyling for right Icon Component container
shakeFunctionShake method

Playground

Loading...