{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layout-04",
  "type": "registry:block",
  "title": "Form with Package Selection",
  "description": "A form with package selection block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "field",
    "input",
    "radio-group",
    "select",
    "separator"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/form-layout/form-layout-04.tsx",
      "type": "registry:component",
      "target": "components/form-layout-04.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nconst workspaces = [\n  {\n    id: 1,\n    title: 'Starter',\n    description: 'Up to 10,000 requests per day.',\n    users: 'Free',\n  },\n  {\n    id: 2,\n    title: 'Premium',\n    description: '500,000 requests per day¹',\n    users: '$900/month²',\n  },\n  {\n    id: 3,\n    title: 'Enterprise',\n    description: 'Based on your specific needs',\n    users: 'Custom',\n  },\n];\n\nexport default function FormLayout04() {\n  const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]);\n\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-foreground text-lg\">\n          Apply for early access\n        </h3>\n        <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6\">\n          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n        </p>\n        <form action=\"#\" className=\"mt-8\" method=\"post\">\n          <div className=\"grid grid-cols-1 gap-4 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<span className=\"text-red-500\">*</span>\n                </FieldLabel>\n                <Input\n                  autoComplete=\"given-name\"\n                  id=\"first-name\"\n                  name=\"first-name\"\n                  placeholder=\"Emma\"\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\">Last name</FieldLabel>\n                <Input\n                  autoComplete=\"family-name\"\n                  id=\"last-name\"\n                  name=\"last-name\"\n                  placeholder=\"Crown\"\n                  type=\"text\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"email\">\n                  Work email<span className=\"text-red-500\">*</span>\n                </FieldLabel>\n                <Input\n                  autoComplete=\"email\"\n                  id=\"email\"\n                  name=\"email\"\n                  placeholder=\"emma@company.com\"\n                  required\n                  type=\"email\"\n                />\n              </Field>\n            </div>\n            <div className=\"col-span-full sm:col-span-3\">\n              <Field className=\"gap-2\">\n                <FieldLabel htmlFor=\"company\">Company</FieldLabel>\n                <Input\n                  autoComplete=\"organization\"\n                  id=\"company\"\n                  name=\"company\"\n                  placeholder=\"Company, Inc.\"\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=\"size\">Company size (employees)</FieldLabel>\n                <Select defaultValue=\"\">\n                  <SelectTrigger id=\"size\" name=\"size\">\n                    <SelectValue placeholder=\"Select company size\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"1-9\">1-9</SelectItem>\n                    <SelectItem value=\"10-50\">10-50</SelectItem>\n                    <SelectItem value=\"50-250\">50-250</SelectItem>\n                    <SelectItem value=\"250+\">250+</SelectItem>\n                  </SelectContent>\n                </Select>\n              </Field>\n            </div>\n            <Separator className=\"col-span-full my-4\" />\n            <div className=\"col-span-full\">\n              <FieldLabel className=\"mb-4 block font-semibold text-foreground\">\n                Select a workspace package\n              </FieldLabel>\n\n              <RadioGroup\n                className=\"grid grid-cols-1 gap-5 sm:grid-cols-3\"\n                defaultValue={selectedWorkspace.id.toString()}\n                onValueChange={(value) =>\n                  setSelectedWorkspace(\n                    workspaces.find(\n                      (workspace) => workspace.id.toString() === value\n                    ) || workspaces[0]\n                  )\n                }\n              >\n                {workspaces.map((item) => (\n                  <div\n                    className=\"relative flex flex-col gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-checked:border-ring\"\n                    key={item.id.toString()}\n                  >\n                    <div className=\"flex justify-between\">\n                      <RadioGroupItem\n                        className=\"order-1 after:absolute after:inset-0\"\n                        id={item.id.toString()}\n                        value={item.id.toString()}\n                      />\n\n                      <FieldLabel\n                        className=\"block font-medium text-foreground text-sm\"\n                        htmlFor={item.id.toString()}\n                      >\n                        {item.title}\n                      </FieldLabel>\n                    </div>\n                    <div className=\"flex h-full flex-col justify-between\">\n                      <p className=\"mt-1 text-pretty text-muted-foreground text-sm\">\n                        {item.description}\n                      </p>\n                      <span className=\"mt-4 block font-medium text-foreground text-sm\">\n                        {item.users}\n                      </span>\n                    </div>\n                  </div>\n                ))}\n              </RadioGroup>\n\n              <FieldDescription className=\"mt-2!\">\n                <sup>1</sup> $0.5/10K requests after limit reach.\n              </FieldDescription>\n              <FieldDescription className=\"mt-1\">\n                <sup>2</sup> No credit card required for registration.\n              </FieldDescription>\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              Go back\n            </Button>\n            <Button className=\"whitespace-nowrap\" type=\"submit\">\n              Apply\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "form-layout"
  ]
}