Form

1"use client";
2 
3import { useRender } from "@base-ui/react/use-render";
4import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { Label } from "@/registry/components/ui/label";
9 
10const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
11 
12const { useAppForm } = createFormHook({
13  fieldComponents: {
14    Label: FieldLabel,
15    Control: FieldControl,
16    Description: FieldDescription,
17    Message: FieldMessage,
18  },
19  formComponents: {
20    Item: FormItem,
21  },
22  fieldContext,
23  formContext,
24});
25 
26const useFormField = () => {
27  const itemContext = React.useContext(FormItemContext);
28  const fieldContext = useFieldContext();
29 
30  if (!fieldContext) {
31    throw new Error("useFormField should be used within <field.Container>");
32  }
33 
34  const { id } = itemContext;
35 
36  return {
37    id,
38    name: fieldContext.name,
39    formItemId: `${id}-form-item`,
40    formDescriptionId: `${id}-form-item-description`,
41    formMessageId: `${id}-form-item-message`,
42    ...fieldContext.state.meta,
43  };
44};
45 
46type FormItemContextValue = {
47  id: string;
48};
49 
50const FormItemContext = React.createContext<FormItemContextValue>(
51  {} as FormItemContextValue
52);
53 
54function FormItem({ className, ...props }: React.ComponentProps<"div">) {
55  const id = React.useId();
56 
57  return (
58    <FormItemContext.Provider value={{ id }}>
59      <div
60        data-slot="form-item"
61        className={cn("grid gap-2", className)}
62        {...props}
63      />
64    </FormItemContext.Provider>
65  );
66}
67 
68function FieldLabel({
69  className,
70  ...props
71}: React.ComponentProps<typeof Label>) {
72  const { formItemId, isValid } = useFormField();
73 
74  return (
75    <Label
76      data-slot="field-label"
77      data-error={!isValid}
78      className={cn("data-[error=true]:text-destructive", className)}
79      htmlFor={formItemId}
80      {...props}
81    />
82  );
83}
84 
85function FieldControl({
86  children = <div />,
87}: {
88  children?: useRender.RenderProp;
89}) {
90  const { formItemId, isValid, formDescriptionId, formMessageId } =
91    useFormField();
92 
93  return useRender({
94    render: children,
95    props: {
96      "data-slot": "field-control",
97      id: formItemId,
98      "aria-describedby": isValid
99        ? `${formDescriptionId}`
100        : `${formDescriptionId} ${formMessageId}`,
101      "aria-invalid": !isValid,
102    },
103  });
104}
105 
106function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
107// … truncated