FormControl

Provide context to form elements, such as invalid, disabled, or required states.
Installation
API Reference
Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
This is an illustration of FormControl component.
size
isDisabled
isReadOnly
isRequired
function App() {
const [isInvalid, setIsInvalid] = React.useState(false)
const [inputValue, setInputValue] = React.useState("12345")
const handleSubmit = () => {
if (inputValue.length < 6) {
setIsInvalid(true)
} else {
setIsInvalid(false)
}
}
return (
<VStack className="w-full max-w-[300px] rounded-md border border-background-200 p-4">
<FormControl
isInvalid={isInvalid}
size="md"
isDisabled={false}
isReadOnly={false}
isRequired={false}
>
<FormControlLabel>
<FormControlLabelText>Password</FormControlLabelText>
</FormControlLabel>
<Input className="my-1" size={props.size}>
<InputField
type="password"
placeholder="password"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</Input>
<FormControlHelper>
<FormControlHelperText>
Must be atleast 6 characters.
</FormControlHelperText>
</FormControlHelper>
<FormControlError>
<FormControlErrorIcon as={AlertCircleIcon} />
<FormControlErrorText>
Atleast 6 characters are required.
</FormControlErrorText>
</FormControlError>
</FormControl>
<Button className="w-fit self-end mt-4" size="sm" onPress={handleSubmit}>
<ButtonText>Submit</ButtonText>
</Button>
</VStack>
)
}

Installation

Run the following command:

npx gluestack-ui add form-control

API Reference

To use this component in your project, include the following import statement in your file.
import { FormControl } from "@/components/ui/form-control"
anatomy-image
export default () => (
<FormControl>
<FormControlLabel>
<FormControlLabelText />
</FormControlLabel>
<FormControlHelper>
<FormControlHelperText />
</FormControlHelper>
<FormControlError>
<FormControlErrorIcon />
<FormControlErrorText />
</FormControlError>
</FormControl>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

FormControl

It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
isInvalid
bool
false
When true, invalid state.
isRequired
bool
false
If true, astrick gets activated.
isDisabled
bool
false
Disabled state true.
isReadOnly
bool
false
To manually set read-only state.
isDisabled
bool
false
To manually set disable to the FormControl.

FormControlLabel

It inherits all the properties of React Native's View component.

FormControlLabelText

It inherits all the properties of React Native's Text component.

FormControlHelper

It inherits all the properties of React Native's View component.

FormControlHelperText

It inherits all the properties of React Native's Text component.

FormControlError

It inherits all the properties of React Native's View component.

FormControlErrorIcon

It inherits all the properties of gluestack Style's AsForwarder component.

FormControlErrorText

It inherits all the properties of React Native's Text component.

Features

  • Keyboard support for actions.
  • Support for hover, focus and active states.
  • Option to add your styles or use the default styles.

Props

FormControl component is created using View component from react-native. It extends all the props supported by React Native View.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Form Control with Radio

The Radio Component can be incorporated within the FormControl.
function App() {
const [values, setValues] = React.useState("Mango")
return (
<FormControl>
<FormControlLabel>
<FormControlLabelText>Favourite fruit</FormControlLabelText>
</FormControlLabel>
<RadioGroup className="my-2" value={values} onChange={setValues}>
<VStack space="sm">
<Radio size="sm" value="Mango">
<RadioIndicator>
<RadioIcon as={CircleIcon} />
</RadioIndicator>
<RadioLabel>Mango</RadioLabel>
</Radio>
<Radio size="sm" value="Apple">
<RadioIndicator>
<RadioIcon as={CircleIcon} />
</RadioIndicator>
<RadioLabel>Apple</RadioLabel>
</Radio>
<Radio size="sm" value="Orange">
<RadioIndicator>
<RadioIcon as={CircleIcon} />
</RadioIndicator>
<RadioLabel>Orange</RadioLabel>
</Radio>
</VStack>
</RadioGroup>
<FormControlHelper>
<FormControlHelperText>
Choose the fruit you like the most
</FormControlHelperText>
</FormControlHelper>
</FormControl>
)
}

Form Control with Checkbox

The Checkbox Component can be incorporated within the FormControl.
function App() {
const [values, setValues]