FormControl | NativeBase | Universal Components for React and React Native

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
nativeID
If provided, this prop is passed to its children.
Type: string
isInvalid
If true, this prop is passed to its children.
Type: boolean
isRequired
If true, this prop is passed to its children.
Type: boolean
isDisabled
If true, this prop is passed to its children.
Type: boolean
isReadOnly
If true, this prop is passed to its children.
Type: boolean
FormControl.Label
_disabled
Passed props will be applied on disabled state.
Type: Partial<IBoxProps<IFormControlLabelProps>>
_invalid
Passed props will be applied on invalid state.
Type: Partial<IBoxProps<IFormControlLabelProps>>
htmlFor
Reflects the value of the 'for' content property.
Type: string
_astrick
Props applied to astrick text
Type: Partial<ITextProps>
FormControl.ErrorMessage
_disabled
Passed props will be applied on disabled state.
Type: Partial<IBoxProps<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: Partial<IStackProps>
FormControl.HelperText
_disabled
Passed props will be applied on disabled state.
Type: Partial<IBoxProps<IFormControlLabelProps>>
_invalid
Passed props will be applied on invalid state.
Type: Partial<IBoxProps<IFormControlLabelProps>>
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the formControl.
Info: We can easily extend the formControl component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase