This is an illustration of FormControl component.
size
isDisabled
isInvalid
isReadOnly
isRequired
<Box className="h-32 w-72">
<FormControl
size="md"
isDisabled={false}
isInvalid={false}
isReadOnly={false}
isRequired={false}
>
<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 as={AlertCircleIcon} />
<FormControlErrorText>
At least 6 characters are required.
</FormControlErrorText>
</FormControlError>
</FormControl>
</Box>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/form-control

Step 2: Copy and paste the following code into your project.

import { Text, View } from "react-native"
import React from "react"
import { createFormControl } from "@gluestack-ui/form-control"
import { cssInterop } from "nativewind"
import {
tva,
withStyleContext,
useStyleContext,
} from "@gluestack-ui/nativewind-utils"
const formControlStyle = tva({
base: "flex flex-col",
})
const formControlErrorIconStyle = tva({
base: "fill-none text-error-700",
variants: {
size: {
"2xs": "h-3 w-3",
xs: "h-3.5 w-3.5",
sm: "h-4 w-4",
md: "h-4.5 w-4.5",
lg: "h-5 w-5",
xl: "h-6 w-6",
},
},
})
const formControlErrorStyle = tva({
base: "flex flex-row justify-start items-center mt-1 gap-1",
})
const formControlErrorTextStyle = tva({
base: "text-error-700",
variants: {
isTruncated: {
true: "web:truncate",
},
bold: {
true: "font-bold",
},
underline: {
true: "underline",
},
strikeThrough: {
true: "line-through",
},
size: {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl",
},
sub: {
true: "text-xs",
},
italic: {
true: "italic",
},
highlight: {
true: "bg-yellow-500",
},
},
})
const formControlHelperStyle = tva({
base: "flex flex-row justify-start items-center mt-1",
})
const formControlHelperTextStyle = tva({
base: "text-typography-500",
variants: {
isTruncated: {
true: "web:truncate",
},
bold: {
true: "font-bold",
},
underline: {
true: "underline",
},
strikeThrough: {
true: "line-through",
},
size: {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl",
},
sub: {
true: "text-xs",
},
italic: {
true: "italic",
},
highlight: {
true: "bg-yellow-500",
},
},
})
const formControlLabelStyle = tva({
base: "flex flex-row justify-start items-center mb-1",
})
const formControlLabelTextStyle = tva({
base: "font-medium text-typography-900",
variants: {
isTruncated: {
true: "web:truncate",
},
bold: {
true: "font-bold",
},
underline: {
true: "underline",
},
strikeThrough: {
true: "line-through",
},
size: {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl",
},
sub: {
true: "text-xs",
},
italic: {
true: "italic",
},
highlight: {
true: "bg-yellow-500",
},
},
})
const formControlLabelAstrickStyle = tva({
variants: {
isTruncated: {
true: "web:truncate",
},
bold: {
true: "font-bold",
},
underline: {
true: "underline",
},
strikeThrough: {
true: "line-through",
},
size: {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl",
},
sub: {
true: "text-xs",
},
italic: {
true: "italic",
},
highlight: {
true: "bg-yellow-500",
},
},
})
export const UIFormControl = createFormControl({
Root: withStyleContext(View),
Error: View,
ErrorText: Text,
ErrorIcon: View,
Label: View,
LabelText: Text,
LabelAstrick: Text,
Helper: View,
HelperText: Text,
})
cssInterop(UIFormControl, { className: "style" })
cssInterop(UIFormControl.Error, { className: "style" })
cssInterop(UIFormControl.Error.Text, { className: "style" })
cssInterop(UIFormControl.Error.Icon, { className: "style" })
cssInterop(UIFormControl.Label, { className: "style" })
cssInterop(UIFormControl.Label.Text, { className: "style" })
cssInterop(UIFormControl.Label.Astrick, { className: "style" })
cssInterop(UIFormControl.Helper, { className: "style" })
cssInterop(UIFormControl.Helper.Text, { className: "style" })
const FormControl = ({ className, size = "md", ...props }: any) => {
return (
<UIFormControl
className={formControlStyle({ class: className })}
context={{ size }}
/>
)
}
const FormControlError = ({ className, ...props }: any) => {
return (
<UIFormControl.Error
className={formControlErrorStyle({ class: className })}
{...props}
/>
)
}
const FormControlErrorText = ({ className, size, ...props }: any) => {
const { size: parentSize } = useStyleContext()
return (
<UIFormControl.Error.Text
className={formControlErrorTextStyle({
parentVariants: { size: parentSize },
size,
class: className,
})}
{...props}
/>
)
}
const FormControlErrorIcon = ({ className, size, ...props }: any) => {
const { size: parentSize } = useStyleContext()
return (
<UIFormControl.Error.Icon
className={formControlErrorIconStyle({
parentVariants: { size: parentSize },
size,
class: className,
})}
{...props}
/>
)
}
const FormControlLabel = ({ className, ...props }: any) => {
return (
<UIFormControl.Label
className={formControlLabelStyle({ class: className })}
{...props}
/>
)
}
const FormControlLabelText = ({ className, size, ...props }: any) => {
const { size: parentSize } = useStyleContext()
return (
<UIFormControl.Label.Text
className={formControlLabelTextStyle({
parentVariants: { size: parentSize },
size,
class: className,
})}
{...props}
/>
)
}
const FormControlLabelAstrick = ({ className, size, ...props }: any) => {
const { size: parentSize } = useStyleContext()
return (
<UIFormControl.Label.Astrick
className={formControlLabelAstrickStyle({
parentVariants: { size: parentSize },
size,
class: className,
})}
{...props}
/>
)
}
const FormControlHelper = ({ className, ...props }: any) => {
return (
<UIFormControl.Helper
className={formControlHelperStyle({
class: className,
})}
{...props}
/>
)
}
const FormControlHelperText = ({ className, size, ...props }: any) => {
const { size: parentSize } = useStyleContext()
return (
<UIFormControl.Helper.Text
className={formControlHelperTextStyle({
parentVariants: { size: parentSize },
size,
class: className,
})}
{...props}
/>
)
}
FormControl.displayName = "FormControl"
FormControlError.displayName = "FormControlError"
FormControlErrorText.displayName = "FormControlErrorText"
FormControlErrorIcon.displayName = "FormControlErrorIcon"
FormControlLabel.displayName = "FormControlLabel"
FormControlLabelText.displayName = "FormControlLabelText"
FormControlLabelAstrick.displayName = "FormControlLabelAstrick"
FormControlHelper.displayName = "FormControlHelper"
FormControlHelperText.displayName = "FormControlHelperText"
export {
FormControl,
FormControlError,
FormControlErrorText,
FormControlErrorIcon,
FormControlLabel,
FormControlLabelText,
FormControlLabelAstrick,
FormControlHelper,
FormControlHelperText,
}

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { FormControl } from '@/components/ui/FormControl';
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.