Version: Next

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<IFormControlLabelProps> Passed props will be applied on disabled state. -
_invalid IBoxProps<IFormControlLabelProps> 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<IFormControlLabelProps> Passed props will be applied on disabled state. -
rightIcon Element | Element[] The right icon element to use in the FormControl.ErrorMessage. -
leftIcon Element | Element[] The left icon element to use in the FormControl.ErrorMessage. -
startIcon Element | Element[] The start icon element to use in the FormControl.ErrorMessage. -
endIcon Element | Element[] The end icon element to use in the FormControl.ErrorMessage. -
_stack IStackProps Props to be passed to the HStack used inside of FormControl.ErrorMessage. -

FormControlErrorMessage implements FormControl, Box

FormControl.HelperText#

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

FormControlHelperText implements FormControl, Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of formControl
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>
)
}
Read more about extending component theme here.