{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "title": "Radio Group",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Single-choice radios with optional full-card labels, descriptions, and large pointer targets around Radix keyboard navigation.",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/direction.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/radio-group.tsx",
      "content": "// Ballmac UI: Radio Group. https://ui.ballmac.com/components/radio-group\n\"use client\";\n\nimport * as React from \"react\";\nimport { Circle } from \"lucide-react\";\nimport { RadioGroup as Primitive } from \"radix-ui\";\nimport { useDirection } from \"@/lib/ballmac/direction\";\nimport { cn } from \"@/lib/utils\";\n\ntype RadioGroupProps = React.ComponentProps<typeof Primitive.Root>;\nfunction RadioGroup({ className, ...props }: RadioGroupProps) {\n  const dir = useDirection(props.dir);\n  return (\n    <Primitive.Root\n      dir={dir}\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n    />\n  );\n}\ntype RadioGroupItemProps = React.ComponentProps<typeof Primitive.Item>;\nfunction RadioGroupItem({ className, ...props }: RadioGroupItemProps) {\n  return (\n    <Primitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"aspect-square size-4 shrink-0 rounded-full border border-input bg-background text-primary shadow-xs outline-none transition-[color,border-color,box-shadow] duration-150 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      <Primitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <Circle aria-hidden=\"true\" className=\"size-2 fill-current\" />\n      </Primitive.Indicator>\n    </Primitive.Item>\n  );\n}\ntype RadioGroupOptionProps = React.ComponentProps<\"label\"> & {\n  /** Heading shown beside the radio control. */\n  title: string;\n  /** Supporting copy below the option heading. */\n  description?: string;\n  /** Value submitted by the radio group. */\n  value: string;\n  /** Disables this choice. */\n  disabled?: boolean;\n};\nfunction RadioGroupOption({\n  className,\n  title,\n  description,\n  value,\n  disabled,\n  children,\n  ...props\n}: RadioGroupOptionProps) {\n  return (\n    <label\n      data-slot=\"radio-group-option\"\n      data-disabled={disabled || undefined}\n      className={cn(\n        \"flex min-h-14 cursor-pointer items-start gap-3 rounded-lg border bg-card p-3 text-card-foreground shadow-xs transition-[border-color,background-color,box-shadow] duration-150 hover:bg-accent/50 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5 has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupItem value={value} disabled={disabled} className=\"mt-0.5\" />\n      <span className=\"grid min-w-0 flex-1 gap-0.5\">\n        <span className=\"text-sm font-medium\">{title}</span>\n        {description && (\n          <span className=\"text-sm leading-snug text-muted-foreground\">\n            {description}\n          </span>\n        )}\n      </span>\n      {children}\n    </label>\n  );\n}\nexport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupOption,\n  type RadioGroupProps,\n  type RadioGroupItemProps,\n  type RadioGroupOptionProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/radio-group.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "choice",
      "form",
      "radio",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Choose exactly one option in a form; use descriptive card labels when choices need context.",
      "whenToUse": [
        "A few mutually exclusive preferences",
        "Pricing or delivery options with explanations"
      ],
      "whenNotToUse": [
        "Many options; use select",
        "Multiple selections; use checkbox or toggle-group"
      ],
      "composesWith": [
        "label"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Enters the radio group"
        },
        {
          "keys": "Arrow keys",
          "action": "Moves and selects among enabled choices"
        },
        {
          "keys": "Space",
          "action": "Selects the focused choice"
        }
      ],
      "customization": [
        "controlled or uncontrolled value",
        "card or compact radio labels",
        "disabled options"
      ]
    },
    "examples": [
      "radio-group-demo",
      "radio-group-states"
    ],
    "url": "https://ui.ballmac.com/components/radio-group"
  },
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}