{
 "slug": "radio",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "radio-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-radio\">\n    <label class=\"kole-radio-option\">\n      <input type=\"radio\" checked name=\"kole-radio-demo\" value=\"a\" />\n      选项 A\n    </label>\n    <label class=\"kole-radio-option\">\n      <input type=\"radio\" name=\"kole-radio-demo\" value=\"b\" />\n      选项 B\n    </label>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-radio\">\n  <label class=\"kole-radio-option\">\n    <input type=\"radio\" checked name=\"kole-radio-demo\" value=\"a\" />\n    选项 A\n  </label>\n  <label class=\"kole-radio-option\">\n    <input type=\"radio\" name=\"kole-radio-demo\" value=\"b\" />\n    选项 B\n  </label>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleRadio } from 'kole-ui/react';\n\nconst options = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' }\n];\n\nexport default function Demo() {\n  const [value, setValue] = useState('a');\n  return <KoleRadio options={options} modelValue={value} onChange={setValue} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRadio } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' }\n];\nconst value = ref('a');\n</script>\n\n<template>\n  <KoleRadio :options=\"options\" v-model=\"value\" />\n</template>",
    "vue2": "<template>\n  <KoleRadio :options=\"options\" :model-value=\"value\" @input=\"value = $event\" />\n</template>\n\n<script>\nimport { KoleRadio } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRadio },\n  data() {\n    return {\n      value: 'a',\n      options: [\n        { label: '选项 A', value: 'a' },\n        { label: '选项 B', value: 'b' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleRadio } from 'kole-ui/react';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' },\n];\n\nexport default function RadioDefaultDemo(): JSX.Element {\n  const [value, setValue] = useState<string>('a');\n  return <KoleRadio options={options} modelValue={value} onChange={setValue} />;\n}",
    "vue3ts": "<template>\n  <KoleRadio :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleRadio } from 'kole-ui/vue3';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' },\n];\nconst value = ref<string>('a');\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleRadio :options=\"options\" :model-value=\"value\" @input=\"value = $event\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRadio } from 'kole-ui/vue2';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nexport default Vue.extend({\n  components: { KoleRadio },\n  data(): { value: string; options: ReadonlyArray<RadioOption> } {\n    return {\n      value: 'a',\n      options: [\n        { label: '选项 A', value: 'a' },\n        { label: '选项 B', value: 'b' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Radio.html 第 5 行 body 第 1 个 .demo-block：name=\"kole-radio-demo\" 的两个 .kole-radio-option，value=\"a\" 上带 checked、value=\"b\" 不带 —— 即 options 两项、modelValue 初始 \"a\"。",
    "prop 名见 frameworks/Radio.jsx 第 4 行参数表（modelValue / options / disabled）与 frameworks/Radio.vue3.vue 第 7-11 行 defineProps。Vue2 端（frameworks/Radio.vue2.vue 第 8-12、15 行）prop 名同为 modelValue，但只 emit input，故 Vue2 写 :model-value + @input 显式回写，不用 v-model。",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 useState<string> + interface RadioOption；vue3ts/vue2ts 用 <script lang=\"ts\"> + ref<string>；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "radio-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-radio\">\n    <div class=\"kole-radio-surface\" style=\"padding:12px\">在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。</div>\n    <span class=\"kole-radio-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-radio\">\n  <div class=\"kole-radio-surface\" style=\"padding:12px\">在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。</div>\n  <span class=\"kole-radio-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleRadio } from 'kole-ui/react';\n\nconst options = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' }\n];\n\n// 禁用态：整组不可交互（Radio.jsx 的 disabled prop，输入框带 disabled）\nexport default function Demo() {\n  return <KoleRadio options={options} modelValue=\"b\" disabled />;\n}",
    "vue3": "<script setup>\nimport { KoleRadio } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' }\n];\n</script>\n\n<template>\n  <!-- 禁用态：整组不可交互（disabled prop） -->\n  <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>",
    "vue2": "<template>\n  <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>\n\n<script>\nimport { KoleRadio } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRadio },\n  data() {\n    return {\n      options: [\n        { label: '选项 A', value: 'a' },\n        { label: '选项 B', value: 'b' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleRadio } from 'kole-ui/react';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' },\n];\n\nconst selected: string = 'b';\n\n// 禁用态：整组不可交互（Radio.jsx 的 disabled prop，输入框带 disabled）\nexport default function RadioDisabledDemo(): JSX.Element {\n  return <KoleRadio options={options} modelValue={selected} disabled />;\n}",
    "vue3ts": "<template>\n  <!-- 禁用态：整组不可交互（disabled prop） -->\n  <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRadio } from 'kole-ui/vue3';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nconst options: ReadonlyArray<RadioOption> = [\n  { label: '选项 A', value: 'a' },\n  { label: '选项 B', value: 'b' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleRadio :options=\"options\" model-value=\"b\" disabled />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRadio } from 'kole-ui/vue2';\n\ninterface RadioOption {\n  label: string;\n  value: string;\n}\n\nexport default Vue.extend({\n  components: { KoleRadio },\n  data(): { options: ReadonlyArray<RadioOption> } {\n    return {\n      options: [\n        { label: '选项 A', value: 'a' },\n        { label: '选项 B', value: 'b' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Radio.html 第 5 行 body 第 2 个 .demo-block「状态与使用场景」：块内只有 .kole-radio-surface 说明文案与 .kole-radio-desc，没有可映射的控件标记；该组件的 API 表（site/details/radio.json contract.dims 为空，frameworks/Radio.jsx 第 4 行参数表）在 options / modelValue 之外只剩 disabled 一个可用 prop。",
    "因此本示例给出 disabled 禁用态调用：整组输入框带 disabled（Radio.jsx 第 8 行），并与示例 1 的受控写法区分。"
   ]
  }
 ]
}