FormControl | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
FormControl
FormControl is used to form elements by providing context such as isInvalid, isDisabled, and isRequired.
Show Code
Playground
Examples
Basic
Playground
Custom Style
Playground
Props
FormControl
FormControl.Label
_disabled
Passed props will be applied on disabled state.
Type: InterfaceBoxProps<IFormControlLabelProps>
_invalid
Passed props will be applied on invalid state.
Type: InterfaceBoxProps<IFormControlLabelProps>
htmlFor
Reflects the value of the 'for' content property.
Type: string
_astrick
Props applied to astrick text
Type: InterfaceTextProps
FormControl.ErrorMessage
_disabled
Passed props will be applied on disabled state.
Type: InterfaceBoxProps<IFormControlLabelProps>
rightIcon
The right icon element to use in the FormControl.ErrorMessage.
Type: Element | Element[]
leftIcon
The left icon element to use in the FormControl.ErrorMessage.
Type: Element | Element[]
startIcon
The start icon element to use in the FormControl.ErrorMessage.
Type: Element | Element[]
endIcon
The end icon element to use in the FormControl.ErrorMessage.
Type: Element | Element[]
_stack
Props to be passed to the HStack used inside of FormControl.ErrorMessage.
Type: InterfaceStackProps
FormControl.HelperText
_disabled
Passed props will be applied on disabled state.
Type: InterfaceBoxProps<IFormControlLabelProps>
_invalid
Passed props will be applied on invalid state.
Type: InterfaceBoxProps<IFormControlLabelProps>
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of formControl.
Info: We can easily extend the formControl component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase