FormControl

By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
Installation
API Reference
This is an illustration of FormControl component.
<Box className="h-32 w-72">
<FormControl>
<FormControlLabel className="mb-1">
<FormControlLabelText>Password</FormControlLabelText>
</FormControlLabel>
<Input>
<InputField type="password" defaultValue="12345" placeholder="password" />
</Input>
<FormControlHelper>
<FormControlHelperText>
Must be at least 6 characters.
</FormControlHelperText>
</FormControlHelper>
<FormControlError>
<FormControlErrorIcon size={10} as={AlertCircleIcon} />
<FormControlErrorText>
At least 6 characters are required.
</FormControlErrorText>
</FormControlError>
</FormControl>
</Box>

Form Control with Radio

The Radio Component can be incorporated within the FormControl.
<FormControl>
<FormControlLabel>
<FormControlLabelText>Favourite fruit</FormControlLabelText>
</FormControlLabel>
<RadioGroup className="my-2">
<VStack space="sm">
<Radio size="sm" value="Mango">
<RadioIndicator>
<RadioIcon>
<CircleIcon />
</RadioIcon>
</RadioIndicator>
<RadioLabel>Mango</RadioLabel>
</Radio>
<Radio size="sm" value="Apple">
<RadioIndicator>
<RadioIcon>
<CircleIcon />
</RadioIcon>
</RadioIndicator>
<RadioLabel>Apple</RadioLabel>
</Radio>
<Radio size="sm" value="Orange">
<RadioIndicator>
<RadioIcon>
<CircleIcon />
</RadioIcon>
</RadioIndicator>
<RadioLabel>Orange</RadioLabel>
</Radio>
</VStack>
</RadioGroup>
<FormControlHelper>
<FormControlHelperText>
Choose the fruit you like the most
</FormControlHelperText>
</FormControlHelper>
</FormControl>

Installation

Run the following command:

npx gluestack-ui add form-control