Form

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