{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-radio-group-11","type":"registry:block","title":"Radio group with grid layout","description":"Radio group with grid layout","dependencies":[],"registryDependencies":["field","radio-group"],"files":[{"path":"c-radio-group-11.tsx","type":"registry:block","content":"import { Field, FieldLabel, FieldTitle } from \"@/components/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/components/ui/radio-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst items = [\n  {\n    title: \"Payments\",\n    description: \"Receive payments from your customers\",\n    value: \"payments\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"CircleDollarSignIcon\"\n        tabler=\"IconPremiumRights\"\n        hugeicons=\"DollarCircleIcon\"\n        phosphor=\"CurrencyCircleDollarIcon\"\n        remixicon=\"RiMoneyDollarCircleLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    title: \"Invoices\",\n    description: \"Create and send invoices to your customers\",\n    value: \"invoices\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"FileTextIcon\"\n        tabler=\"IconFileText\"\n        hugeicons=\"File02Icon\"\n        phosphor=\"FileTextIcon\"\n        remixicon=\"RiFileTextLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    title: \"Billing\",\n    description: \"Manage your billing and subscriptions\",\n    value: \"billing\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"CreditCardIcon\"\n        tabler=\"IconCreditCard\"\n        hugeicons=\"CreditCardIcon\"\n        phosphor=\"CreditCardIcon\"\n        remixicon=\"RiBankCardLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    title: \"Reports\",\n    description: \"View your reports and analytics\",\n    value: \"reports\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"ChartNoAxesColumnDecreasingIcon\"\n        tabler=\"IconAntennaBars5\"\n        hugeicons=\"SignalFull02Icon\"\n        phosphor=\"ChartBarIcon\"\n        remixicon=\"RiBarChart2Line\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n]\n\nexport function Pattern() {\n  return (\n    <RadioGroup\n      defaultValue=\"payments\"\n      className=\"grid w-full max-w-xs grid-cols-2 gap-4\"\n    >\n      {items.map((item) => (\n        <FieldLabel\n          key={item.value}\n          htmlFor={item.value}\n          className=\"relative p-0!\"\n        >\n          <Field orientation=\"horizontal\">\n            <div className=\"absolute top-3 right-3\">\n              <RadioGroupItem value={item.value} id={item.value} />\n            </div>\n            <FieldTitle className=\"flex flex-col items-start\">\n              <div className=\"bg-background border-border rounded-2xl flex shrink-0 items-center justify-center border p-2 shadow-xs shadow-black/5\">\n                {item.icon}\n              </div>\n              <div className=\"flex flex-col items-start gap-0.5\">\n                <span className=\"text-sm font-semibold\">{item.title}</span>\n                <span className=\"text-muted-foreground text-xs\">\n                  {item.description}\n                </span>\n              </div>\n            </FieldTitle>\n          </Field>\n        </FieldLabel>\n      ))}\n    </RadioGroup>\n  )\n}","target":"components/examples/c-radio-group-11.tsx"}],"meta":{"order":11}}