Version: 3.0.7

FormControl

FormControl provides context such as isInvalid, isDisabled, and isRequired to form elements.

Examples#

Basic#

Custom Style#

Props#

FormControl#

Name Type Description Default
nativeID string If provided, this prop is passed to its children. -
isInvalid boolean If true, this prop is passed to its children. -
isRequired boolean If true, this prop is passed to its children. -
isDisabled boolean If true, this prop is passed to its children. -
isReadOnly boolean If true, this prop is passed to its children. -

FormControl implements Box

FormControl.Label#

Name Type Description Default
_disabled IBoxProps Passed props will be applied on disabled state. -
_invalid IBoxProps Passed props will be applied on invalid state. -
htmlFor string Reflects the value of the 'for' content property. -

FormControlLabel implements FormControl, Box

FormControl.ErrorMessage#

Name Type Description Default
_disabled IBoxProps Passed props will be applied on disabled state. -

FormControlErrorMessage implements FormControl, Box

FormControl.HelperText#

Name Type Description Default
_disabled IBoxProps Passed props will be applied on disabled state. -
_invalid IBoxProps Passed props will be applied on invalid state. -

FormControlHelperText implements FormControl, Box

Styling#

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