{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { Button } from \"~/registry/ui/button\";\nimport { Field } from \"~/registry/ui/field\";\nimport { Form } from \"~/registry/ui/form\";\nimport { Input } from \"~/registry/ui/input\";\nimport { TextField } from \"~/registry/ui/text-field\";\n\nexport function ReactAriaFormInputDemo() {\n  return (\n    <Form\n      className=\"flex w-full max-w-sm flex-col gap-4\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        const data = Object.fromEntries(new FormData(e.currentTarget));\n        toast(JSON.stringify(data, null, 2));\n        (e.currentTarget as HTMLFormElement).reset();\n      }}\n    >\n      <Field.Root\n        render={\n          <TextField\n            isRequired\n            maxLength={20}\n            minLength={3}\n            name=\"username\"\n            pattern=\"^[a-z0-9_]+$\"\n          />\n        }\n      >\n        <Field.Label>Username</Field.Label>\n        <Input placeholder=\"johndoe\" />\n        <Field.Description>Your public display name.</Field.Description>\n        <Field.Error />\n      </Field.Root>\n      <div className=\"flex gap-2\">\n        <Button type=\"reset\" variant=\"outline\">\n          Reset\n        </Button>\n        <Button type=\"submit\">Submit</Button>\n      </div>\n    </Form>\n  );\n}\n",
      "path": "src/registry/examples/form/react-aria/react-aria-form-input-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "react-aria-form-input-demo",
  "registryDependencies": [
    "@kanpeki/form"
  ],
  "type": "registry:example"
}