This is the pre-release documentation for gluestack-ui with NativeWind (alpha) version. For @gluestack-ui/themed(stable) documentation, refer to the latest release (v1).
This is an illustration of FormControl component.
<Box className="h-32 w-72">
<FormControl {...props}>
<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