{
  "$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 { Field } from \"~/registry/ui/field\";\nimport { TextField } from \"~/registry/ui/text-field\";\nimport { Textarea } from \"~/registry/ui/textarea\";\n\nconst formSchema = z.object({\n  bio: z\n    .string()\n    .min(20, \"Bio must be at least 20 characters.\")\n    .max(200, \"Bio must be at most 200 characters.\"),\n});\n\nexport function TanstackFormTextareaDemo() {\n  const form = useForm({\n    defaultValues: {\n      bio: \"\",\n    },\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          return (\n            <Field.Root\n              render={\n                <TextField\n                  id={field.name}\n                  isInvalid={isInvalid}\n                  name={field.name}\n                  onBlur={field.handleBlur}\n                  onChange={field.handleChange}\n                  value={field.state.value}\n                />\n              }\n            >\n              <Field.Label>Bio</Field.Label>\n              <Textarea\n                className=\"min-h-24\"\n                placeholder=\"Tell us about yourself...\"\n              />\n              <Field.Description>\n                Between 20 and 200 characters.\n              </Field.Description>\n              <Field.Error errors={field.state.meta.errors} />\n            </Field.Root>\n          );\n        }}\n        name=\"bio\"\n      />\n      <div className=\"flex 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-textarea-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "tanstack-form-textarea-demo",
  "registryDependencies": [
    "@kanpeki/form"
  ],
  "type": "registry:example"
}