Components

Form

Form wrapper that coordinates field validation and returned errors.

Composition

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/form.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/form.json

Primary installed source

src/registry/sources/control-ui/ui/form.tsx

"use client";

import { Form as FormPrimitive } from "@base-ui/react/form";

import type { ComponentProps } from "react";

import { cn } from "@/components/control-ui/lib/cn";

export type FormErrors = Record<string, string | string[]>;

export type FormProps = ComponentProps<"form"> & {

errors?: FormErrors;

validationMode?: "onSubmit" | "onBlur" | "onChange";

};

// Merges externally-returned errors, keyed by Field name, onto matching FieldError.

export function Form({ className, ...props }: FormProps) {

return (

<FormPrimitive

data-control-ui="form"

data-control-family="field"

data-field-kind="form"

data-slot="root"

className={cn("flex w-full flex-col", className)}

{...props}

/>

);

}