Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Input
Show Code
Playground
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 Addons
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: ResponsiveValue<"outline" | "rounded" | (string & {}) | "unstyled" | "underlined" | "filled">
Default: 'outline'
isDisabled
If true, the input will be disabled.
Type: boolean
size
The size of the input.
Type: ResponsiveValue<number | "px" | "0" | (string & {}) | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "10" | "20" | "64" | ... 28 more ... | "5/6">
Default: 'md'
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
InputLeftElement
If given, adds the provided element to the left of the input.
Type: Element | Element[]
leftElement
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[]
rightElement
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.
Type: Omit<IInputProps, "_hover">
_focus
Passed props will be applied on focused state.
Type: Omit<IInputProps, "_focus">
_disabled
Passed props will be applied on disabled state.
Type: Omit<IInputProps, "_disabled">
_readOnly
Passed props will be applied on readOnly state.
Type: Omit<IInputProps, "_readOnly">
_invalid
Passed props will be applied on invalid state.
Type: Omit<IInputProps, "_hover">
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" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "10" | "20" | "64" | "0" | "container" | ... 28 more ... | (string & {})>
Default: 'md'
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of input.
Info: We can easily extend the input component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase