Docs
Form Control

Form Control

A versatile form field wrapper component that handles labels, validation messages, and layout.

Open in
We'll never share your email with anyone else.

Username is already taken

Password strength: Strong

Password is weak

Checking availability...

Installation

Add the component

Update the imports

Update your import paths to match your project setup.

Usage

import { FormControl } from "@/components/ui/form-control";
import { Input } from "@/components/ui/input";
 
export function FormControlExample() {
  return (
    <FormControl 
      name="email"
      label="Email"
      caption="We'll never share your email with anyone else."
    >
      <Input 
        id="email"
        placeholder="Enter your email"
        type="email"
      />
    </FormControl>
  );
}

Props

FormControl

PropTypeDescription
namestringUnique identifier for the form control.
labelReactNodeThe label text for the form control.
labelRightReactNodeOptional content to display at the right side of the label.
errorReactNodeError message to display below the form control.
successReactNodeSuccess message to display below the form control.
warningReactNodeWarning message to display below the form control.
loadingReactNodeLoading message to display below the form control.
captionReactNodeHelper text to display below the form control.
controlLeftReactNodeOptional content to display on the left side below the form control.
childrenReactNodeThe form input component(s) to wrap.
classNamestringAdditional classes to apply to the form control container.
validationPosition"left" | "right"Position of validation messages. Defaults to "left".
validationClassNamestringAdditional classes to apply to validation messages.
captionClassNamestringAdditional classes to apply to the caption.
labelClassNamestringAdditional classes to apply to the label.

Examples

With Error Message

<FormControl 
  name="username"
  label="Username"
  error="Username is already taken"
>
  <Input 
    id="username"
    placeholder="Enter a username"
  />
</FormControl>

With Success Message

<FormControl 
  name="password"
  label="Password"
  success="Password strength: Strong"
>
  <Input 
    id="password"
    placeholder="Enter a password"
    type="password"
  />
</FormControl>

With Warning Message

<FormControl 
  name="password"
  label="Password"
  warning="Password is weak"
>
  <Input 
    id="password"
    placeholder="Enter a password"
    type="password"
  />
</FormControl>

With Loading State

<FormControl 
  name="username"
  label="Username"
  loading="Checking availability..."
>
  <Input 
    id="username"
    placeholder="Enter a username"
  />
</FormControl>

With Right Aligned Validation

<FormControl 
  name="email"
  label="Email"
  error="Please enter a valid email address"
  validationPosition="right"
>
  <Input 
    id="email"
    placeholder="Enter your email"
    type="email"
  />
</FormControl>
Dropdown MenuGlass Label