Input | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 allows a user to provide input in a text field.
Show Code
Playground
Examples
Basic
Playground
Input Sizes
Playground
Input Variants
Playground
Input Addons
Playground
Input Elements
Playground
Password Input
Playground
Controlled Input
Playground
Form Controlled
Playground
Props
Input
size
The size of the input.
Type: ThemeComponentSizeType<"Input">
Default: 'md'
variant
The variant of the input style to use.
Type: ResponsiveValue<"outline" | "underlined" | "rounded" | "filled" | "unstyled" | (string & {})>
Default: 'outline'
isHovered
If true, the input will be hovered.
Type: boolean
isFocused
If true, the input will be focused.
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[]
leftElement
If given, adds the provided element to the left of the input.
Type: Element | Element[]
rightElement
If given, adds the provided element to the right of the input.
Type: Element | Element[]
isInvalid
If true, the input will indicate an error.
Type: boolean
isDisabled
If true, the input will be disabled.
Type: boolean
isRequired
This will set aria-required="true" on web when passed in formcontrol.
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
type
Using the type password, user can mask the input.
Type: "text" | "password"
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
_hover
Passed props will be applied on hovered state.
Type: Partial<IInputProps>
_focus
Passed props will be applied on focused state.
Type: Partial<IInputProps>
_disabled
Passed props will be applied on disabled state.
Type: Partial<IInputProps>
_readOnly
Passed props will be applied on readOnly state.
Type: Partial<IInputProps>
_invalid
Passed props will be applied on invalid state.
Type: Partial<IInputProps>
_input
props are passed to InputBase component
Type: Partial<IInputProps>
_stack
Props to be passed to the Stack used inside.
Type: Partial<IStackProps>
focusOutlineColor
This prop allows you to change outlineColor when input is in the focused state
Type: ColorType
invalidOutlineColor
This prop allows you to change outlineColor when input is in invalid state
Type: ColorType
Input.Group
variant
The variant of the input style to use.
Type: string
Default: 'outline'
size
The size of the input.
Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "2.5" | "lg" | "1" | "2xl" | "1.5" | "10" | "20" | ... 27 more ... | (string & {})>
Default: '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