Version: 3.0.0-next.36

Input

The Input component is a component that is used to get user input in a text field.

Implements#

Import#

import {
Input,
InputGroup,
InputLeftAddon,
InputRightAddon,
} from 'native-base';

Examples#

Basic#

Input Sizes#

Input Variants#

Input Addons#

Input Elements#

Password Input#

Controlled Input#

Form Controlled#

Input Focused and Error Border Colors#

Props#

NameTypeDescriptionDefault
variantfilled, outline, rounded, underlined, unstyledThe variant of the input style to use.outline
isDisabledbooleanIf true, the input will be disabled.-
isInvalidbooleanIf true, the input will indicate an error.-
isReadOnlybooleanIf true, prevents the value of the input from being edited.-
size2xl, lg, md, sm, xl, xsThe size of the button.md
onChangefunctionCallback for on change on input value.-
placeholderstringThe placeholder attribute specifies a short hint that describes the expected value of an input field.-
isFullWidthbooleanIf true, the input element will span the full width of its parent-
focusBorderColorstringThe border color when the input is focused.-
errorBorderColorstringThe border color when isInvalid is set to true.-
ariaLabelstringAn accessible label for the input.-
InputLeftElementJSX.ElementIf given, adds the provided element to the left of the input.-
InputRightElementJSX.ElementIf given, adds the provided element to the right of the input.-
typepassword, string, textUsing the type password, user can mask the input.-
labelstringIf given, adds a floating label to the input.-
_labelTextPropsProps to be passed to label to change its text styling.-

Apart from these all the Native TextInput Props from React Native can be passed to Input.