Version: 3.0.0-next.36


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



import {
} from 'native-base';



Input Sizes#

Input Variants#

Input Addons#

Input Elements#

Password Input#

Controlled Input#

Form Controlled#

Input Focused and Error Border Colors#


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
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.