form-tanstack-complex.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-tanstack-complex",
  "type": "registry:example",
  "dependencies": [
    "@tanstack/react-form",
    "zod"
  ],
  "registryDependencies": [
    "field",
    "button",
    "card",
    "checkbox",
    "radio-group",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-tanstack-complex.tsx",
      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z\n    .string({\n      required_error: \"Please select a subscription plan\",\n    })\n    .min(1, \"Please select a subscription plan\")\n    .refine((value) => value === \"basic\" || value === \"pro\", {\n      message: \"Invalid plan selection. Please choose Basic or Pro\",\n    }),\n  billingPeriod: z\n    .string({\n      required_error: \"Please select a billing period\",\n    })\n    .min(1, \"Please select a billing period\"),\n  addons: z\n    .array(z.string())\n    .min(1, \"Please select at least one add-on\")\n    .max(3, \"You can select up to 3 add-ons\")\n    .refine(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      {\n        message: \"You selected an invalid add-on\",\n      }\n    ),\n  emailNotifications: z.boolean(),\n})\n\nexport default function FormTanstackComplex() {\n  const form = useForm({\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"monthly\",\n      addons: [] as string[],\n      emailNotifications: false,\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardContent>\n        <form\n          id=\"subscription-form\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"plan\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      <FieldLabel htmlFor=\"basic\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Basic</FieldTitle>\n                            <FieldDescription>\n                              For individuals and small teams\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"basic\"\n                            id=\"basic\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"pro\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Pro</FieldTitle>\n                            <FieldDescription>\n                              For businesses with higher demands\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"pro\"\n                            id=\"pro\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"billingPeriod\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Billing Period</FieldLabel>\n                    <Select\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <SelectTrigger id={field.name}>\n                        <SelectValue placeholder=\"Select\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"monthly\">Monthly</SelectItem>\n                        <SelectItem value=\"yearly\">Yearly</SelectItem>\n                      </SelectContent>\n                    </Select>\n                    <FieldDescription>\n                      Choose how often you want to be billed.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"addons\"\n              mode=\"array\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Add-ons</FieldLegend>\n                    <FieldDescription>\n                      Select additional features you&apos;d like to include.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {addons.map((addon) => (\n                        <Field\n                          key={addon.id}\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <Checkbox\n                            id={addon.id}\n                            name={field.name}\n                            aria-invalid={isInvalid}\n                            checked={field.state.value.includes(addon.id)}\n                            onCheckedChange={(checked) => {\n                              if (checked) {\n                                field.pushValue(addon.id)\n                              } else {\n                                const index = field.state.value.indexOf(\n                                  addon.id\n                                )\n                                if (index > -1) {\n                                  field.removeValue(index)\n                                }\n                              }\n                            }}\n                          />\n                          <FieldContent>\n                            <FieldLabel htmlFor={addon.id}>\n                              {addon.title}\n                            </FieldLabel>\n                            <FieldDescription>\n                              {addon.description}\n                            </FieldDescription>\n                          </FieldContent>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"emailNotifications\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"horizontal\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor={field.name}>\n                        Email Notifications\n                      </FieldLabel>\n                      <FieldDescription>\n                        Receive email updates about your subscription\n                      </FieldDescription>\n                    </FieldContent>\n                    <Switch\n                      id={field.name}\n                      name={field.name}\n                      checked={field.state.value}\n                      onCheckedChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    />\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\" className=\"justify-end\">\n          <Button type=\"submit\" form=\"subscription-form\">\n            Save Preferences\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}