"use client"; import type * as LabelPrimitive from "@radix-ui/react-label"; import { Slot } from "@radix-ui/react-slot"; import * as React from "react"; import { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext, useFormState, } from "react-hook-form"; import { Label } from "@/components/registry/primitives/core/label"; import { cn } from "@/lib/registry/cn"; const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName; }; const FormFieldContext = React.createContext( {} as FormFieldContextValue, ); const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( ); }; FormField.displayName = "FormField"; const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); if (!fieldContext?.name) { throw new Error("useFormField must be used within "); } const { getFieldState } = useFormContext(); const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); const { id } = itemContext; return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }; }; type FormItemContextValue = { id: string; }; const FormItemContext = React.createContext( {} as FormItemContextValue, ); function FormItem({ className, ...props }: React.ComponentProps<"div">) { const id = React.useId(); return (

); } FormItem.displayName = "FormItem"; function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField(); return ( ); } FormLabel.displayName = "FormLabel"; function FormControl({ ...props }: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } FormControl.displayName = "FormControl"; function FormDescription({ className, ...props }: React.ComponentProps<"p">) { const { formDescriptionId } = useFormField(); return (

); } FormDescription.displayName = "FormDescription"; function FormMessage({ className, ...props }: React.ComponentProps<"p">) { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message ?? "") : props.children; if (!body) { return null; } return (

{body}

); } FormMessage.displayName = "FormMessage"; export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };

Form

Showcase

Form