Form

1"use client";
2 
3import { useRender } from "@base-ui/react/use-render";
4import * as React from "react";
5import {
6  Controller,
7  FormProvider,
8  useFormContext,
9  useFormState,
10  type ControllerProps,
11  type FieldPath,
12  type FieldValues,
13} from "react-hook-form";
14 
15import { cn } from "@/lib/utils";
16import { Label } from "@/registry/components/ui/label";
17 
18const Form = FormProvider;
19 
20type FormFieldContextValue<
21  TFieldValues extends FieldValues = FieldValues,
22  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
23> = {
24  name: TName;
25};
26 
27const FormFieldContext = React.createContext<FormFieldContextValue>(
28  {} as FormFieldContextValue
29);
30 
31const FormField = <
32  TFieldValues extends FieldValues = FieldValues,
33  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
34>({
35  ...props
36}: ControllerProps<TFieldValues, TName>) => {
37  return (
38    <FormFieldContext.Provider value={{ name: props.name }}>
39      <Controller {...props} />
40    </FormFieldContext.Provider>
41  );
42};
43 
44const useFormField = () => {
45  const fieldContext = React.useContext(FormFieldContext);
46  const itemContext = React.useContext(FormItemContext);
47  const { getFieldState } = useFormContext();
48  const formState = useFormState({ name: fieldContext.name });
49  const fieldState = getFieldState(fieldContext.name, formState);
50 
51  if (!fieldContext) {
52    throw new Error("useFormField should be used within <FormField>");
53  }
54 
55  const { id } = itemContext;
56 
57  return {
58    id,
59    name: fieldContext.name,
60    formItemId: `${id}-form-item`,
61    formDescriptionId: `${id}-form-item-description`,
62    formMessageId: `${id}-form-item-message`,
63    ...fieldState,
64  };
65};
66 
67type FormItemContextValue = {
68  id: string;
69};
70 
71const FormItemContext = React.createContext<FormItemContextValue>(
72  {} as FormItemContextValue
73);
74 
75function FormItem({ className, ...props }: React.ComponentProps<"div">) {
76  const id = React.useId();
77 
78  return (
79    <FormItemContext.Provider value={{ id }}>
80      <div
81        data-slot="form-item"
82        className={cn("grid gap-2", className)}
83        {...props}
84      />
85    </FormItemContext.Provider>
86  );
87}
88 
89function FormLabel({
90  className,
91  ...props
92}: React.ComponentProps<typeof Label>) {
93  const { error, formItemId } = useFormField();
94 
95  return (
96    <Label
97      data-slot="form-label"
98      data-error={!!error}
99      className={cn("data-[error=true]:text-destructive", className)}
100      htmlFor={formItemId}
101      {...props}
102    />
103  );
104}
105 
106function FormControl({
107// … truncated