{
  "name": "Radio",
  "type": "component",
  "description": "Radio buttons: Radio, RadioGroup, and RadioGroupField for the common labeled-options case.",
  "export": "Radio",
  "path": "@gtmi/strix-react/atoms/radio",
  "figma": null,
  "figmaAbsent": "Base UI primitive (radio-group). Figma draws no radio.",
  "props": [
    {
      "name": "value",
      "type": "string",
      "required": true,
      "description": "Value this option contributes to its group."
    },
    {
      "name": "state",
      "type": "error",
      "description": "Paints the ring and dot in the error color."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Disables this option only."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn()."
    }
  ],
  "exports": [
    {
      "name": "RadioGroup",
      "type": "component",
      "description": "Owns the selected value and roving-focus keyboard navigation. Props: orientation (vertical | horizontal, default vertical), value, defaultValue, onValueChange. Requires aria-label or aria-labelledby."
    },
    {
      "name": "RadioGroupField",
      "type": "component",
      "description": "RadioGroup with options laid out as labeled rows. Props: options (RadioOption[] with value, label, description, disabled), state, plus RadioGroup's. Values keep their type: pass numbers, get numbers back."
    }
  ],
  "ai_tags": ["radio", "radio-group", "form", "selection", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-border-neutral-semi-strong",
    "--color-border-hover",
    "--color-border-pressed",
    "--color-border-accent",
    "--color-border-error",
    "--color-border-disabled",
    "--color-border-focus",
    "--color-icon-accent",
    "--color-icon-accent-pressed",
    "--color-icon-error",
    "--color-icon-disabled",
    "--radius-xxxl",
    "--spacing-borders-sm",
    "--spacing-borders-md",
    "--spacing-gap-200",
    "--spacing-gap-400"
  ],
  "notes": "Renders a native <button> for the same reason Checkbox does: real :disabled and working label activation. RadioGroupField converts values to strings for Base UI and converts them back on the way out, so a caller passing numbers is not forced to coerce. Option ids are prefixed with a per-instance React.useId(), so two groups sharing option values on one page do not emit duplicate DOM ids. Labels and descriptions render through Label and HelpText rather than repeating their type classes."
}