Field

A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

cossbyCcoss

Loading preview...

import { Field, FieldDescription, FieldLabel } from "@/components/ui/component";
import { Input } from "@/components/ui/input";
export default function FieldDisabledDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm">
        <Field disabled>
          <FieldLabel>Email</FieldLabel>
          <Input disabled placeholder="Enter your email" type="email" />
          <FieldDescription>This field is currently disabled.</FieldDescription>
        </Field>
      </div>
    </div>
  );
}