{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layout-01",
  "type": "registry:block",
  "title": "Form with Workspace Fields",
  "description": "A form with workspace fields block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "field",
    "input",
    "separator"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/form-layout/form-layout-01.tsx",
      "type": "registry:component",
      "target": "components/form-layout-01.tsx",
      "content": "import { Button } from '@/components/ui/button';\nimport { Field, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\n\nexport default function FormLayout01() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <div className=\"sm:mx-auto sm:max-w-2xl\">\n        <h3 className=\"text-balance font-semibold text-2xl text-foreground dark:text-foreground\">\n          Register to workspace\n        </h3>\n        <p className=\"mt-1 text-pretty text-muted-foreground text-sm dark:text-muted-foreground\">\n          Take a few moments to register for your company&apos;s workspace\n        </p>\n        <form action=\"#\" className=\"mt-8\" method=\"post\">\n          <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-6\">\n            <div className=\"col-span-full sm:col-span-3\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"first-name\">\n                  First name\n                  <span className=\"text-red-500\">*</span>\n                </FieldLabel>\n                <Input\n                  autoComplete=\"first-name\"\n                  id=\"first-name\"\n                  name=\"first-name\"\n                  placeholder=\"First name\"\n                  required\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full sm:col-span-3\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"last-name\">\n                  Last name\n                  <span className=\"text-red-500\">*</span>\n                </FieldLabel>\n                <Input\n                  autoComplete=\"last-name\"\n                  id=\"last-name\"\n                  name=\"last-name\"\n                  placeholder=\"Last name\"\n                  required\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"email\">\n                  Email\n                  <span className=\"text-red-500\">*</span>\n                </FieldLabel>\n                <Input\n                  autoComplete=\"email\"\n                  id=\"email\"\n                  name=\"email\"\n                  placeholder=\"Email\"\n                  required\n                  type=\"email\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"address\">Address</FieldLabel>\n                <Input\n                  autoComplete=\"street-address\"\n                  id=\"address\"\n                  name=\"address\"\n                  placeholder=\"Address\"\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full sm:col-span-2\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"city\">City</FieldLabel>\n                <Input\n                  autoComplete=\"address-level2\"\n                  id=\"city\"\n                  name=\"city\"\n                  placeholder=\"City\"\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full sm:col-span-2\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"state\">State</FieldLabel>\n                <Input\n                  autoComplete=\"address-level1\"\n                  id=\"state\"\n                  name=\"state\"\n                  placeholder=\"State\"\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full sm:col-span-2\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"postal-code\">Postal code</FieldLabel>\n                <Input\n                  autoComplete=\"postal-code\"\n                  id=\"postal-code\"\n                  name=\"postal-code\"\n                  placeholder=\"Postal code\"\n                />\n              </Field>\n            </div>\n          </div>\n          <Separator className=\"my-6\" />\n          <div className=\"flex items-center justify-end space-x-4\">\n            <Button\n              className=\"whitespace-nowrap\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Cancel\n            </Button>\n            <Button className=\"whitespace-nowrap\" type=\"submit\">\n              Submit\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "form-layout"
  ]
}