Form

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