{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layouts-02",
  "type": "registry:component",
  "title": "Form Layouts",
  "author": "Toby Belhome",
  "description": "Design clean and efficient dashboard forms with Tailwind CSS form layouts. These sections feature organized fields, clear labels, and responsive design to enhance usability and data entry. Perfect for admin panels, SaaS platforms, and analytics dashboards aiming for modern, user-friendly, and accessible forms.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label",
    "separator",
    "textarea",
    "radio-group"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/form-layouts/02/page.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\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\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport { useState } from \"react\";\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 Example() {\n  const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]);\n\n  return (\n    <div className=\"mx-auto flex max-w-3xl 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-foreground dark:text-foreground font-semibold\">\n              Personal information\n            </h2>\n            <p className=\"text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6\">\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                <Label\n                  htmlFor=\"first-name\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  First name\n                </Label>\n                <Input\n                  type=\"text\"\n                  id=\"first-name\"\n                  name=\"first-name\"\n                  autoComplete=\"given-name\"\n                  placeholder=\"Emma\"\n                  className=\"mt-2\"\n                />\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label\n                  htmlFor=\"last-name\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Last name\n                </Label>\n                <Input\n                  type=\"text\"\n                  id=\"last-name\"\n                  name=\"last-name\"\n                  autoComplete=\"family-name\"\n                  placeholder=\"Crown\"\n                  className=\"mt-2\"\n                />\n              </div>\n              <div className=\"col-span-full\">\n                <Label\n                  htmlFor=\"email\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Email\n                </Label>\n                <Input\n                  type=\"email\"\n                  id=\"email\"\n                  name=\"email\"\n                  autoComplete=\"email\"\n                  placeholder=\"emma@company.com\"\n                  className=\"mt-2\"\n                />\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label\n                  htmlFor=\"birthyear\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Birth year\n                </Label>\n                <Input\n                  type=\"number\"\n                  id=\"birthyear\"\n                  name=\"year\"\n                  placeholder=\"1990\"\n                  className=\"mt-2\"\n                />\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label\n                  htmlFor=\"role\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Role\n                </Label>\n                <Input\n                  type=\"text\"\n                  id=\"role\"\n                  name=\"role\"\n                  placeholder=\"Senior Manager\"\n                  disabled\n                  className=\"mt-2\"\n                />\n                <p className=\"text-muted-foreground dark:text-muted-foreground mt-2 text-xs\">\n                  Roles can only be changed by system admin.\n                </p>\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-foreground dark:text-foreground font-semibold\">\n              Workspace settings\n            </h2>\n            <p className=\"text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6\">\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                <Label\n                  htmlFor=\"workspace-name\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Workspace name\n                </Label>\n                <Input\n                  type=\"text\"\n                  id=\"workspace-name\"\n                  name=\"workspace-name\"\n                  placeholder=\"Test workspace\"\n                  className=\"mt-2\"\n                />\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label\n                  htmlFor=\"visibility\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Visibility\n                </Label>\n                <Select name=\"visibility\" defaultValue=\"private\">\n                  <SelectTrigger id=\"visibility\" className=\"mt-2 w-full\">\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              </div>\n              <div className=\"col-span-full\">\n                <Label\n                  htmlFor=\"workspace-description\"\n                  className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                  Workspace description\n                </Label>\n                <Textarea\n                  id=\"workspace-description\"\n                  name=\"workspace-description\"\n                  className=\"mt-2\"\n                  rows={4}\n                />\n                <p className=\"text-muted-foreground dark:text-muted-foreground mt-2 text-xs\">\n                  Note: description provided will not be displayed externally.\n                </p>\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-foreground dark:text-foreground font-semibold\">\n              Notification settings\n            </h2>\n            <p className=\"text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6\">\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=\"text-foreground dark:text-foreground text-sm font-medium\">\n                Team\n              </legend>\n              <p className=\"text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6\">\n                Configure the types of team alerts you want to receive.\n              </p>\n              <div className=\"mt-2\">\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"team-requests\" name=\"team-requests\" defaultChecked />\n                  <Label\n                    htmlFor=\"team-requests\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    Team join requests\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"team-activity-digest\" name=\"team-activity-digest\" />\n                  <Label\n                    htmlFor=\"team-activity-digest\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    Weekly team activity digest\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"api-requests\" name=\"api-requests\" />\n                  <Label\n                    htmlFor=\"api-requests\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    API requests\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"workspace-execution\" name=\"workspace-execution\" defaultChecked />\n                  <Label\n                    htmlFor=\"workspace-execution\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    Workspace loading times\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"query-caching\" name=\"query-caching\" defaultChecked />\n                  <Label\n                    htmlFor=\"query-caching\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    Query caching\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-x-3 py-1\">\n                  <Checkbox id=\"storage\" name=\"storage\" />\n                  <Label\n                    htmlFor=\"storage\"\n                    className=\"text-foreground dark:text-foreground text-sm font-medium\">\n                    Storage\n                  </Label>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <Separator className=\"my-8\" />\n\n        <div className=\"grid grid-cols-1 gap-10 md:grid-cols-3\">\n          <div>\n            <h2 className=\"text-foreground dark:text-foreground font-semibold\">\n              Select a workspace package\n            </h2>\n            <p className=\"text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6\">\n              Lorem ipsum dolor sit amet.\n            </p>\n          </div>\n          <div className=\"sm:max-w-3xl md:col-span-2\">\n            <fieldset>\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((workspace) => workspace.id.toString() === value) ||\n                      workspaces[0]\n                  )\n                }>\n                {workspaces.map((item) => (\n                  <div\n                    key={item.id.toString()}\n                    className=\"border-input has-data-[state=checked]:border-ring relative flex flex-col gap-2 rounded-md border p-4 shadow-xs outline-none\">\n                    <div className=\"flex justify-between\">\n                      <RadioGroupItem\n                        id={item.id.toString()}\n                        value={item.id.toString()}\n                        className=\"order-1 after:absolute after:inset-0\"\n                      />\n\n                      <Label\n                        htmlFor={item.id.toString()}\n                        className=\"text-foreground block text-sm font-medium\">\n                        {item.title}\n                      </Label>\n                    </div>\n                    <div className=\"flex h-full flex-col justify-between\">\n                      <p className=\"text-muted-foreground mt-1 text-sm\">{item.description}</p>\n                      <span className=\"text-foreground mt-4 block text-sm font-medium\">\n                        {item.users}\n                      </span>\n                    </div>\n                  </div>\n                ))}\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 type=\"button\" variant=\"outline\" className=\"whitespace-nowrap\">\n            Go back\n          </Button>\n          <Button type=\"submit\" className=\"whitespace-nowrap\">\n            Save settings\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/form-layouts-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}