form-rhf-checkbox.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-rhf-checkbox",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod"
  ],
  "registryDependencies": [
    "field",
    "checkbox",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-rhf-checkbox.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  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\n\nconst tasks = [\n  {\n    id: \"push\",\n    label: \"Push notifications\",\n  },\n  {\n    id: \"email\",\n    label: \"Email notifications\",\n  },\n] as const\n\nconst formSchema = z.object({\n  responses: z.boolean(),\n  tasks: z\n    .array(z.string())\n    .min(1, \"Please select at least one notification type.\")\n    .refine(\n      (value) => value.every((task) => tasks.some((t) => t.id === task)),\n      {\n        message: \"Invalid notification type selected.\",\n      }\n    ),\n})\n\nexport default function FormRhfCheckbox() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      responses: true,\n      tasks: [],\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 sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>Manage your notification preferences.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-checkbox\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"responses\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet data-invalid={fieldState.invalid}>\n                  <FieldLegend variant=\"label\">Responses</FieldLegend>\n                  <FieldDescription>\n                    Get notified for requests that take time, like research or\n                    image generation.\n                  </FieldDescription>\n                  <FieldGroup data-slot=\"checkbox-group\">\n                    <Field orientation=\"horizontal\">\n                      <Checkbox\n                        id=\"form-rhf-checkbox-responses\"\n                        name={field.name}\n                        checked={field.value}\n                        onCheckedChange={field.onChange}\n                        disabled\n                      />\n                      <FieldLabel\n                        htmlFor=\"form-rhf-checkbox-responses\"\n                        className=\"font-normal\"\n                      >\n                        Push notifications\n                      </FieldLabel>\n                    </Field>\n                  </FieldGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"tasks\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet data-invalid={fieldState.invalid}>\n                  <FieldLegend variant=\"label\">Tasks</FieldLegend>\n                  <FieldDescription>\n                    Get notified when tasks you&apos;ve created have updates.\n                  </FieldDescription>\n                  <FieldGroup data-slot=\"checkbox-group\">\n                    {tasks.map((task) => (\n                      <Field\n                        key={task.id}\n                        orientation=\"horizontal\"\n                        data-invalid={fieldState.invalid}\n                      >\n                        <Checkbox\n                          id={`form-rhf-checkbox-${task.id}`}\n                          name={field.name}\n                          aria-invalid={fieldState.invalid}\n                          checked={field.value.includes(task.id)}\n                          onCheckedChange={(checked) => {\n                            const newValue = checked\n                              ? [...field.value, task.id]\n                              : field.value.filter((value) => value !== task.id)\n                            field.onChange(newValue)\n                          }}\n                        />\n                        <FieldLabel\n                          htmlFor={`form-rhf-checkbox-${task.id}`}\n                          className=\"font-normal\"\n                        >\n                          {task.label}\n                        </FieldLabel>\n                      </Field>\n                    ))}\n                  </FieldGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-checkbox\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}