{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layout-02",
  "type": "registry:block",
  "title": "Form with Side Labels",
  "description": "A form with side labels block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "field",
    "input",
    "radio-group",
    "select",
    "separator",
    "textarea"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/form-layout/form-layout-02.tsx",
      "type": "registry:component",
      "target": "components/form-layout-02.tsx",
      "content": "import { 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';\nimport { Textarea } from '@/components/ui/textarea';\n\nexport default function FormLayout02() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <form>\n        <div className=\"grid grid-cols-1 gap-10 md:grid-cols-3\">\n          <div>\n            <h2 className=\"text-balance font-semibold text-foreground dark:text-foreground\">\n              Personal information\n            </h2>\n            <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6 dark:text-muted-foreground\">\n              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n            </p>\n          </div>\n          <div className=\"sm:max-w-3xl md:col-span-2\">\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\">First name</FieldLabel>\n                  <Input\n                    autoComplete=\"given-name\"\n                    id=\"first-name\"\n                    name=\"first-name\"\n                    placeholder=\"Emma\"\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\">Email</FieldLabel>\n                  <Input\n                    autoComplete=\"email\"\n                    id=\"email\"\n                    name=\"email\"\n                    placeholder=\"emma@company.com\"\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=\"birthyear\">Birth year</FieldLabel>\n                  <Input\n                    id=\"birthyear\"\n                    name=\"year\"\n                    placeholder=\"1990\"\n                    type=\"number\"\n                  />\n                </Field>\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Field className=\"gap-2\">\n                  <FieldLabel htmlFor=\"role\">Role</FieldLabel>\n                  <Input\n                    disabled\n                    id=\"role\"\n                    name=\"role\"\n                    placeholder=\"Senior Manager\"\n                    type=\"text\"\n                  />\n                  <FieldDescription>\n                    Roles can only be changed by system admin.\n                  </FieldDescription>\n                </Field>\n              </div>\n            </div>\n          </div>\n        </div>\n        <Separator className=\"my-8\" />\n        <div className=\"grid grid-cols-1 gap-10 md:grid-cols-3\">\n          <div>\n            <h2 className=\"text-balance font-semibold text-foreground dark:text-foreground\">\n              Workspace settings\n            </h2>\n            <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6 dark:text-muted-foreground\">\n              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n            </p>\n          </div>\n          <div className=\"sm:max-w-3xl md:col-span-2\">\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=\"workspace-name\">\n                    Workspace name\n                  </FieldLabel>\n                  <Input\n                    id=\"workspace-name\"\n                    name=\"workspace-name\"\n                    placeholder=\"Test workspace\"\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=\"visibility\">Visibility</FieldLabel>\n                  <Select\n                    defaultValue=\"private\"\n                    items={{ private: 'Private', public: 'Public' }}\n                    name=\"visibility\"\n                  >\n                    <SelectTrigger id=\"visibility\">\n                      <SelectValue placeholder=\"Select visibility\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"public\">Public</SelectItem>\n                      <SelectItem value=\"private\">Private</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <div className=\"col-span-full\">\n                <Field className=\"gap-2\">\n                  <FieldLabel htmlFor=\"workspace-description\">\n                    Workspace description\n                  </FieldLabel>\n                  <Textarea\n                    id=\"workspace-description\"\n                    name=\"workspace-description\"\n                    rows={4}\n                  />\n                  <FieldDescription>\n                    Note: description provided will not be displayed externally.\n                  </FieldDescription>\n                </Field>\n              </div>\n            </div>\n          </div>\n        </div>\n        <Separator className=\"my-8\" />\n        <div className=\"grid grid-cols-1 gap-10 md:grid-cols-3\">\n          <div>\n            <h2 className=\"text-balance font-semibold text-foreground dark:text-foreground\">\n              Notification settings\n            </h2>\n            <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6 dark:text-muted-foreground\">\n              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n            </p>\n          </div>\n          <div className=\"sm:max-w-3xl md:col-span-2\">\n            <fieldset>\n              <legend className=\"font-medium text-foreground text-sm dark:text-foreground\">\n                Newsletter\n              </legend>\n              <FieldDescription\n                className=\"mt-2 leading-6\"\n                id=\"newsletter-description\"\n              >\n                Change how often you want to receive updates from our\n                newsletter.\n              </FieldDescription>\n              <RadioGroup className=\"mt-6\" defaultValue=\"never\">\n                <div className=\"flex items-center gap-x-3\">\n                  <RadioGroupItem\n                    aria-describedby=\"newsletter-description\"\n                    id=\"every-week\"\n                    value=\"every-week\"\n                  />\n                  <FieldLabel className=\"font-normal\" htmlFor=\"every-week\">\n                    Every week\n                  </FieldLabel>\n                </div>\n                <div className=\"flex items-center gap-x-3\">\n                  <RadioGroupItem\n                    aria-describedby=\"newsletter-description\"\n                    id=\"every-month\"\n                    value=\"every-month\"\n                  />\n                  <FieldLabel className=\"font-normal\" htmlFor=\"every-month\">\n                    Every month\n                  </FieldLabel>\n                </div>\n                <div className=\"flex items-center gap-x-3\">\n                  <RadioGroupItem\n                    aria-describedby=\"newsletter-description\"\n                    id=\"never\"\n                    value=\"never\"\n                  />\n                  <FieldLabel className=\"font-normal\" htmlFor=\"never\">\n                    Never\n                  </FieldLabel>\n                </div>\n              </RadioGroup>\n            </fieldset>\n          </div>\n        </div>\n        <Separator className=\"my-8\" />\n        <div className=\"flex items-center justify-end space-x-4\">\n          <Button className=\"whitespace-nowrap\" type=\"button\" variant=\"outline\">\n            Go back\n          </Button>\n          <Button className=\"whitespace-nowrap\" type=\"submit\">\n            Save settings\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "form-layout"
  ]
}