Version: 3.2.1

Input

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

Examples#

Basic#

Input Sizes#

Input Variants#

Input Elements#

Password Input#

Controlled Input#

Form Controlled#

Props#

Input#

Name Type Description Default
isInvalid boolean If true, the input will indicate an error. -
variant ResponsiveValue<"outline" | "rounded" | (string & {}) | "unstyled" | "underlined" | "filled"> The variant of the input style to use. outline
isDisabled boolean If true, the input will be disabled. -
size ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})> The size of the input. md
isRequired boolean This will set aria-required="true" on web when passed in formcontrol. -
isReadOnly boolean If true, prevents the value of the input from being edited. -
isFullWidth boolean If true, the input element will span the full width of its parent -
InputLeftElement Element | Element[] If given, adds the provided element to the left of the input. -
leftElement Element | Element[] If given, adds the provided element to the left of the input. -
InputRightElement Element | Element[] If given, adds the provided element to the right of the input. -
rightElement Element | Element[] If given, adds the provided element to the right of the input. -
type string Using the type password, user can mask the input. -
wrapperRef any Ref to be passed to Icon's wrapper Box -
_hover Omit<IInputProps, "_hover"> Passed props will be applied on hovered state. -
_focus Omit<IInputProps, "_focus"> Passed props will be applied on focused state. -
_disabled Omit<IInputProps, "_disabled"> Passed props will be applied on disabled state. -
_readOnly Omit<IInputProps, "_readOnly"> Passed props will be applied on readOnly state. -
_invalid Omit<IInputProps, "_hover"> Passed props will be applied on invalid state. -

Input implements PlatformProps, View, ColorProps, LayoutProps, BorderProps, TypographyProps, ShadowProps, PositionProps, FlexProps, BackgroundProps

Input.Group#

Name Type Description Default
variant string The variant of the input style to use. outline
size ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})> The size of the input. md

InputGroup implements Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of input
We can easily extend the input component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Input: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.