Input | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Input
The Input component is a component that is used to get user input in a text field.
Examples
Basic
Playground
Input Sizes
Playground
Input Variants
Playground
Input Elements
Playground
Password Input
Playground
Controlled Input
Playground
Form Controlled
Playground
Props
Input
isInvalid
If true, the input will indicate an error.
Type: boolean
variant
The variant of the input style to use.
Type: "outline" | "filled" | "underlined" | "unstyled" | "rounded"
Default:
Copy
outline
isDisabled
If true, the input will be disabled.
Type: boolean
size
The size of the input.
Type: string
Default:
Copy
md
isRequired
Type: boolean
isReadOnly
If true, prevents the value of the input from being edited.
Type: boolean
isFullWidth
If true, the input element will span the full width of its parent
Type: boolean
InputLeftElement
If given, adds the provided element to the left of the input.
Type: Element | Element[]
InputRightElement
If given, adds the provided element to the right of the input.
Type: Element | Element[]
type
Using the type password, user can mask the input.
Type: string
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
_hover
Passed props will be applied on hovered state.
_focus
Passed props will be applied on focused state.
_disabled
Passed props will be applied on disabled state.
_invalid
Passed props will be applied on invalid state.
Input.Group
variant
The variant of the input style to use.
Type: string
Default:
Copy
outline
size
The size of the input.
Type: string
Default:
Copy
md
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the input.
Info: We can easily extend the input component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase