form-rhf-complex.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-rhf-complex",
  "type": "registry:example",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod"
  ],
  "registryDependencies": [
    "field",
    "button",
    "card",
    "checkbox",
    "radio-group",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-rhf-complex.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} 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 FormRhfComplex() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"\",\n      addons: [],\n      emailNotifications: false,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\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(data, 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  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>You&apos;re almost there!</CardTitle>\n        <CardDescription>\n          Choose your subscription plan and billing period.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-complex\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"plan\"\n              control={form.control}\n              render={({ field, fieldState }) => {\n                const isInvalid = fieldState.invalid\n                return (\n                  <FieldSet data-invalid={isInvalid}>\n                    <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.value}\n                      onValueChange={field.onChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <FieldLabel htmlFor=\"form-rhf-complex-basic\">\n                        <Field orientation=\"horizontal\">\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=\"form-rhf-complex-basic\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"form-rhf-complex-pro\">\n                        <Field orientation=\"horizontal\">\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=\"form-rhf-complex-pro\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && <FieldError errors={[fieldState.error]} />}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"billingPeriod\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-complex-billingPeriod\">\n                    Billing Period\n                  </FieldLabel>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-complex-billingPeriod\"\n                      aria-invalid={fieldState.invalid}\n                    >\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                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"addons\"\n              control={form.control}\n              render={({ field, fieldState }) => (\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={fieldState.invalid}\n                      >\n                        <Checkbox\n                          id={`form-rhf-complex-${addon.id}`}\n                          name={field.name}\n                          aria-invalid={fieldState.invalid}\n                          checked={field.value.includes(addon.id)}\n                          onCheckedChange={(checked) => {\n                            const newValue = checked\n                              ? [...field.value, addon.id]\n                              : field.value.filter(\n                                  (value) => value !== addon.id\n                                )\n                            field.onChange(newValue)\n                            field.onBlur()\n                          }}\n                        />\n                        <FieldContent>\n                          <FieldLabel htmlFor={`form-rhf-complex-${addon.id}`}>\n                            {addon.title}\n                          </FieldLabel>\n                          <FieldDescription>\n                            {addon.description}\n                          </FieldDescription>\n                        </FieldContent>\n                      </Field>\n                    ))}\n                  </FieldGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"emailNotifications\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-complex-emailNotifications\">\n                      Email Notifications\n                    </FieldLabel>\n                    <FieldDescription>\n                      Receive email updates about your subscription\n                    </FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id=\"form-rhf-complex-emailNotifications\"\n                    name={field.name}\n                    checked={field.value}\n                    onCheckedChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  />\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-complex\">\n            Save Preferences\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}