{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { useForm } from \"@tanstack/react-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\nimport { Button } from \"~/registry/ui/button\";\nimport { Checkbox } from \"~/registry/ui/checkbox\";\nimport { Field } from \"~/registry/ui/field\";\n\nconst options = [\n  { id: \"email\", label: \"Email notifications\" },\n  { id: \"sms\", label: \"SMS notifications\" },\n  { id: \"push\", label: \"Push notifications\" },\n] as const;\n\nconst formSchema = z.object({\n  notifications: z\n    .array(z.string())\n    .min(1, \"Select at least one notification type.\"),\n});\n\nconst defaultValues: z.infer<typeof formSchema> = {\n  notifications: [],\n};\n\nexport function TanstackFormCheckboxDemo() {\n  const form = useForm({\n    defaultValues,\n    validators: {\n      onChange: formSchema,\n    },\n    onSubmit: ({ value }) => {\n      toast(JSON.stringify(value, null, 2));\n    },\n  });\n\n  return (\n    <form\n      className=\"flex w-full max-w-sm flex-col gap-4\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        form.handleSubmit();\n      }}\n    >\n      <form.Field\n        children={(field) => {\n          const isInvalid =\n            field.state.meta.isTouched && !field.state.meta.isValid;\n\n          return (\n            <Field.Set>\n              <Field.Legend variant=\"label\">Notifications</Field.Legend>\n              <Field.Group data-slot=\"checkbox-group\">\n                {options.map((option) => (\n                  <Field.Root\n                    key={option.id}\n                    orientation=\"horizontal\"\n                    render={\n                      <Checkbox.Provider\n                        isInvalid={isInvalid}\n                        isSelected={field.state.value.includes(option.id)}\n                        onChange={(checked) => {\n                          if (checked) {\n                            field.pushValue(option.id);\n                            return;\n                          }\n\n                          const index = field.state.value.indexOf(option.id);\n                          if (index > -1) {\n                            field.removeValue(index);\n                          }\n                        }}\n                      />\n                    }\n                  >\n                    <Checkbox.Root>\n                      <Checkbox.Indicator />\n                    </Checkbox.Root>\n                    <Field.Label>{option.label}</Field.Label>\n                  </Field.Root>\n                ))}\n              </Field.Group>\n              <Field.Error errors={field.state.meta.errors} />\n            </Field.Set>\n          );\n        }}\n        mode=\"array\"\n        name=\"notifications\"\n      />\n      <div className=\"grid grid-cols-2 gap-2\">\n        <Button onPress={() => form.reset()} type=\"reset\" variant=\"outline\">\n          Reset\n        </Button>\n        <form.Subscribe\n          selector={(state) => [state.canSubmit, state.isSubmitting]}\n          children={([canSubmit, isSubmitting]) => (\n            <Button isDisabled={!canSubmit} type=\"submit\">\n              {isSubmitting ? \"Submitting...\" : \"Submit\"}\n            </Button>\n          )}\n        />\n      </div>\n    </form>\n  );\n}\n",
      "path": "src/registry/examples/form/tanstack-form/tanstack-form-checkbox-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "tanstack-form-checkbox-demo",
  "registryDependencies": [
    "@kanpeki/form"
  ],
  "type": "registry:example"
}