checkbox-form-multiple.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-form-multiple",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "checkbox",
    "form"
  ],
  "files": [
    {
      "path": "examples/checkbox-form-multiple.tsx",
      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-start space-x-3 space-y-0\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}