{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/radio","result":{"data":{"current":{"frontmatter":{"title":"Radio 单选框","order":44,"brief":"用户使用单选框来从少量的选项集合中选择单个选项","icon":"doc-radio"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#带辅助文本","title":"带辅助文本"},{"url":"#禁用","title":"禁用"},{"url":"#高级模式","title":"高级模式"},{"url":"#单选组合","title":"单选组合"},{"url":"#垂直排列","title":"垂直排列"},{"url":"#按钮样式","title":"按钮样式"},{"url":"#卡片样式","title":"卡片样式"},{"url":"#无-radio-的纯卡片样式","title":"无 radio 的纯卡片样式"},{"url":"#配置-options","title":"配置 options"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#radio","title":"Radio"},{"url":"#radiogroup","title":"RadioGroup"}]},{"url":"#methods","title":"Methods","items":[{"url":"#radio-1","title":"Radio"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#键盘和焦点","title":"键盘和焦点"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#相关物料","title":"相关物料"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 44,\n  \"category\": \"输入类\",\n  \"title\": \"Radio 单选框\",\n  \"icon\": \"doc-radio\",\n  \"brief\": \"用户使用单选框来从少量的选项集合中选择单个选项\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5355\\u9009\\u6846(Radio)\\u4E5F\\u53EB\\u5355\\u9009\\u6309\\u94AE\\uFF0C\\u5B83\\u5141\\u8BB8\\u7528\\u6237\\u5728\\u4E00\\u7EC4\\u9009\\u9879\\u4E2D\\u9009\\u62E9\\u5176\\u4E2D\\u4E00\\u4E2A\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53\\u9009\\u9879\\u5F88\\u591A\\u65F6\\uFF0C\\u5355\\u9009\\u4E0B\\u62C9\\u83DC\\u5355\\uFF08Select\\uFF09\\u53EF\\u80FD\\u6BD4\\u8F83\\u9002\\u5408\\uFF0C\\u56E0\\u4E3A\\u5B83\\u6240\\u5360\\u7528\\u7684\\u753B\\u9762\\u7A7A\\u95F4\\u6BD4\\u5355\\u9009\\u6309\\u94AE\\u6765\\u5F97\\u8981\\u5C11\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Radio, RadioGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Radio aria-label=\\\"\\u5355\\u9009\\u793A\\u4F8B\\\" name=\\\"demo-radio\\\">Radio</Radio>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u8F85\\u52A9\\u6587\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \"\\u8BBE\\u7F6E\\u8F85\\u52A9\\u6587\\u672C\\uFF0C\\u53EF\\u4EE5\\u662F\\u4EFB\\u610F\\u7C7B\\u578B\\u7684 ReactNode\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Radio extra=\\\"Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\\" aria-label=\\\"\\u5355\\u9009\\u793A\\u4F8B\\\" name=\\\"demo-radio-extra\\\">\\n        Semi Design\\n    </Radio>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Radio \\u4E0D\\u53EF\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Radio, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [disabled, setDisabled] = useState(true);\\n    const toggleDisabled = () => {\\n        setDisabled(!disabled);\\n    };\\n    return (\\n        <div>\\n            <Radio defaultChecked={false} disabled={disabled} aria-label=\\\"\\u5355\\u9009\\u793A\\u4F8B\\\" name=\\\"demo-radio-disabled\\\">\\n                Disabled\\n            </Radio>\\n            <br />\\n            <Radio defaultChecked disabled={disabled} aria-label=\\\"\\u5355\\u9009\\u793A\\u4F8B\\\" name=\\\"demo-radio-defaultChecked-disabled\\\">\\n                Disabled\\n            </Radio>\\n            <div style={{ marginTop: 20 }}>\\n                <Button type=\\\"primary\\\" onClick={toggleDisabled}>\\n                    Toggle disabled\\n                </Button>\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9AD8\\u7EA7\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9AD8\\u7EA7\\u6A21\\u5F0F\\uFF08mode='advanced'\\uFF09checked \\u53EF\\u4EE5\\u901A\\u8FC7\\u70B9\\u51FB\\u8F6C\\u6362\\u4E3A unchecked\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Radio } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [checked, setChecked] = useState(true);\\n    const toggle = (e) => {\\n        console.log('radio checked', e.target.checked);\\n        setChecked(e.target.checked);\\n    };\\n    return (\\n        <Radio \\n            checked={checked}\\n            mode=\\\"advanced\\\"\\n            onChange={toggle}\\n            aria-label=\\\"\\u5355\\u9009\\u793A\\u4F8B\\\"\\n            name=\\\"demo-radio-advanced\\\"\\n        >\\n            \\u5141\\u8BB8\\u53D6\\u6D88\\u9009\\u62E9\\n        </Radio>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5355\\u9009\\u7EC4\\u5408\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u7EC4\\u4E92\\u65A5\\u7684 Radio \\u914D\\u5408\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [value, setValue] = useState(1);\\n    const onChange = (e) => {\\n        console.log('radio checked', e.target.value);\\n        setValue(e.target.value);\\n    }; \\n    return (\\n        <RadioGroup onChange={onChange} value={value} aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-group\\\">\\n            <Radio value={1}>A</Radio>\\n            <Radio value={2}>B</Radio>\\n            <Radio value={3}>C</Radio>\\n            <Radio value={4}>D</Radio>\\n        </RadioGroup>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5782\\u76F4\\u6392\\u5217\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7\\u7ED9 RadioGroup \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"direction\"), \"\\u5C5E\\u6027\\u6765\\u51B3\\u5B9A \\u7EC4\\u5185\\u7684 radio \\u5143\\u7D20\\u6C34\\u5E73\\u6392\\u5217\\u6216\\u8005\\u5782\\u76F4\\u6392\\u5217\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <RadioGroup direction=\\\"vertical\\\" aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-group-vertical\\\">\\n        <Radio value={1}>A</Radio>\\n        <Radio value={2}>B</Radio>\\n        <Radio value={3}>C</Radio>\\n        <Radio value={4}>D</Radio>\\n    </RadioGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type='button'\"), \" \\u6765\\u8BBE\\u7F6E button \\u6837\\u5F0F\\u7C7B\\u578B\\u7684\\u5355\\u9009\\u5668\\uFF0C\\u5E76\\u4E14\\uFF0Cbutton \\u7C7B\\u578B\\u5355\\u9009\\u5668\\u652F\\u6301\\u4E09\\u79CD\\u5C3A\\u5BF8\\u5927\\u5C0F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F: button \\u7C7B\\u578B\\u7684\\u5355\\u9009\\u5668\\u6682\\u4E0D\\u652F\\u6301\\u8F85\\u52A9\\u6587\\u672C\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \"\\uFF09\\u548C\\u5782\\u76F4\\u6392\\u5217\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"direction='vertical'\"), \"\\uFF09\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { RadioGroup, Radio, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Space vertical spacing='loose' align='start'>\\n            <RadioGroup type='button' buttonSize='small' defaultValue={1} aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-small\\\">\\n                <Radio value={1}>\\u5373\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={2}>\\u5B9A\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={3}>\\u52A8\\u6001\\u63A8\\u9001</Radio>\\n            </RadioGroup>\\n            <RadioGroup type='button' buttonSize='middle' defaultValue={1} aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-middle\\\">\\n                <Radio value={1}>\\u5373\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={2}>\\u5B9A\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={3}>\\u52A8\\u6001\\u63A8\\u9001</Radio>\\n            </RadioGroup>\\n            <RadioGroup type='button' buttonSize='large' defaultValue={1} aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-large\\\">\\n                <Radio value={1}>\\u5373\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={2}>\\u5B9A\\u65F6\\u63A8\\u9001</Radio>\\n                <Radio value={3}>\\u52A8\\u6001\\u63A8\\u9001</Radio>\\n            </RadioGroup>\\n        </Space>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u7ED9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"RadioGroup\"), \" \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type='card'\"), \" \\u5B9E\\u73B0\\u5E26\\u6709\\u80CC\\u666F\\u7684\\u5361\\u7247\\u6837\\u5F0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <RadioGroup type='card' defaultValue={2} direction='vertical' aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-group-card\\\">\\n        <Radio value={1} disabled extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n        <Radio value={2} extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n        <Radio value={3} extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n    </RadioGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E0 radio \\u7684\\u7EAF\\u5361\\u7247\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u7ED9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"RadioGroup\"), \" \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type='pureCard'\"), \" \\u5B9E\\u73B0\\u5E26\\u6709\\u80CC\\u666F\\u4E14\\u65E0 radio \\u7684\\u7EAF\\u5361\\u7247\\u6837\\u5F0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <RadioGroup type='pureCard' defaultValue={2} direction='vertical' aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-group-pureCard\\\">\\n        <Radio value={1} disabled extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n        <Radio value={2} extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n        <Radio value={3} extra='Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF' style={{ width: 280 }}>\\n            \\u5355\\u9009\\u6846\\u6807\\u9898\\n        </Radio>\\n    </RadioGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u7F6E options\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u914D\\u7F6E options \\u53C2\\u6570\\u6765\\u6E32\\u67D3\\u5355\\u9009\\u6846\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { RadioGroup, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [value1, setValue1] = useState('Guest');\\n    const [value2, setValue2] = useState('Developer');\\n    const [value3, setValue3] = useState('Maintainer');\\n    const plainOptions = ['Guest', 'Developer', 'Maintainer'];\\n    const options = [\\n        { label: 'Guest', value: 'Guest', extra: 'Semi Design', style: { width: 120 } },\\n        { label: 'Developer', value: 'Developer', extra: 'Semi Design', style: { width: 120 } },\\n        { label: 'Maintainer', value: 'Maintainer', extra: 'Semi Design', style: { width: 120 } },\\n    ];\\n    const optionsWithDisabled = [\\n        { label: 'Guest', value: 'Guest' },\\n        { label: 'Developer', value: 'Developer' },\\n        { label: 'Maintainer', value: 'Maintainer', disabled: true },\\n    ];\\n    \\n    const onChange1 = (e) => {\\n        console.log('radio1 checked', e.target.value);\\n        setValue1(e.target.value);\\n    };\\n\\n    const onChange2 = (e) => {\\n        console.log('radio2 checked', e.target.value);\\n        setValue2(e.target.value);\\n    };\\n\\n    const onChange3 = (e) => {\\n        console.log('radio3 checked', e.target.value);\\n        setValue3(e.target.value);\\n    };\\n\\n    return (\\n        <Space vertical align='start' spacing='loose'>\\n            <RadioGroup\\n                options={plainOptions}\\n                onChange={onChange1}\\n                value={value1}\\n                aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\"\\n                name=\\\"demo-radio-group-1\\\"\\n            />\\n            <RadioGroup\\n                options={optionsWithDisabled}\\n                onChange={onChange2}\\n                value={value2}\\n                aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\"\\n                name=\\\"demo-radio-group-2\\\"\\n            />\\n            <RadioGroup\\n                options={options}\\n                onChange={onChange3}\\n                value={value3}\\n                aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\"\\n                name=\\\"demo-radio-group-3\\\"\\n            />\\n        </Space>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Radio\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"addonClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5305\\u88F9\\u5185\\u5BB9\\u5BB9\\u5668\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"addonId\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"addon \\u8282\\u70B9 id\\uFF0Caria-labelledby \\u6307\\u5411\\u8FD9\\u4E2A id\\uFF0C\\u82E5\\u65E0\\u8BBE\\u7F6E\\u4F1A\\u968F\\u673A\\u751F\\u6210\\u4E00\\u4E2A id  \", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.11.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"addonStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5305\\u88F9\\u5185\\u5BB9\\u5BB9\\u5668\\u7684\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Radio \\u7684 label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u52A8\\u83B7\\u53D6\\u7126\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"checked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5F53\\u524D\\u662F\\u5426\\u9009\\u4E2D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultChecked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521D\\u59CB\\u662F\\u5426\\u9009\\u4E2D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u9009\\u5355\\u9009\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extra\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u526F\\u6587\\u672C\\uFF0C\\u53EA\\u5BF9type='default'\\u751F\\u6548\", mdx(\"br\", null)), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraId\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u526F\\u6587\\u672C\\u7684 id\\uFF0Caria-describedby \\u6307\\u5411\\u8FD9\\u4E2A id\\uFF0C\\u82E5\\u65E0\\u8BBE\\u7F6E\\u4F1A\\u968F\\u673A\\u751F\\u6210\\u4E00\\u4E2A id \", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.11.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u7EA7\\u548C\\u666E\\u901A\\u6A21\\u5F0F\\uFF0C\\u9AD8\\u7EA7\\u6A21\\u5F0F\\u53EF\\u4EE5\\u5728 checked \\u65F6\\u70B9\\u51FB\\u53D8\\u6210 unchecked\\uFF0C\\u53EF\\u9009\\u503C advanced\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Radio\\u7EC4\\u4EF6\\u4E2D\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"input[type=\\\"radio\\\"]\"), \"\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"name\"), \"\\u5C5E\\u6027\\uFF0C\\u5177\\u6709\\u76F8\\u540C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"name\"), \"\\u7684Radio\\u5C5E\\u4E8E\\u540C\\u4E00\\u4E2ARadioGroup\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"name\"), \"\\u5C5E\\u6027\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio#%E5%80%BC\"\n  }, \"MDN Radio\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E radio\\u7684\\u6837\\u5F0F\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"button\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"card\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pureCard\"), \" \", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u8BE5 api \\u5728 v2.18.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6839\\u636E value \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5224\\u65AD\\u662F\\u5426\\u9009\\u4E2D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u9879\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:Event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u79FB\\u5165\\u9009\\u9879\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:Event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u79FB\\u51FA\\u9009\\u9879\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:Event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"RadioGroup\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5355\\u9009\\u6846\\u7EC4\\u5408\\uFF0C\\u7528\\u4E8E\\u5305\\u88F9\\u4E00\\u7EC4 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Radio\"), \"\\u3002\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"RadioGroup \\u7684 label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"buttonSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type='button'\\u7684radio\\u7684\\u5C3A\\u5BF8\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u9009\\u4E2D\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"radio \\u6392\\u5217\\u65B9\\u5411, \\u53EA\\u5BF9type='default'\\u751F\\u6548\\uFF0C\\u53EF\\u9009\\u503C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u9009\\u6240\\u6709\\u5B50\\u5355\\u9009\\u5668\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u7EA7\\u548C\\u666E\\u901A\\u6A21\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5728 checked \\u65F6\\u70B9\\u51FB\\u53D8\\u6210 unchecked\\uFF0C\\u53EF\\u9009\\u503C advanced\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"RadioGroup \\u4E0B\\u6240\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"input[type=\\\"radio\\\"]\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"name\"), \" \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"options\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4EE5\\u914D\\u7F6E\\u5F62\\u5F0F\\u8BBE\\u7F6E\\u5B50\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u5F53\\u524D\\u9009\\u4E2D\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u6240\\u6709radio\\u7684\\u6837\\u5F0F\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"button\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"card\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pureCard\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u9879\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e:Event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Methods\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Radio\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540D\\u79F0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"blur()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u79FB\\u9664\\u7126\\u70B9\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"focus()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6\\u7126\\u70B9\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \"\\uFF1A\\u7528\\u4E8E\\u89E3\\u91CA Radio \\u6216 RadioGroup \\u7684\\u4F5C\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \" \\u9ED8\\u8BA4\\u6307\\u5411 addon \\u8282\\u70B9\\uFF0C\\u7528\\u4E8E\\u89E3\\u91CA Radio \\u7684\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" \\u9ED8\\u8BA4\\u6307\\u5411 extra \\u8282\\u70B9\\uFF0C\\u7528\\u4E8E\\u8865\\u5145\\u89E3\\u91CA Radio \\u7684\\u5185\\u5BB9\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"WAI-ARIA: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/\"\n  }, \"https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"RadioGroup \\u53EF\\u4EE5\\u88AB\\u83B7\\u53D6\\u7126\\u70B9\\uFF0C\\u521D\\u59CB\\u7126\\u70B9\\u8BBE\\u7F6E\\uFF1A\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 RadioGroup \\u4E2D\\u6CA1\\u6709\\u88AB\\u9009\\u62E9\\u9879\\u65F6\\uFF0C\\u521D\\u59CB\\u7126\\u70B9\\u4E3A\\u7B2C\\u4E00\\u4E2A Radio \\u9879\\u4E0A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 RadioGroup \\u4E2D\\u6709\\u9009\\u4E2D\\u9879\\u65F6\\uFF0C\\u521D\\u59CB\\u7126\\u70B9\\u4E3A\\u9009\\u4E2D\\u7684 Radio \\u9879\\u4E0A\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728\\u540C\\u4E00\\u4E2A radiogroup \\u5185\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\u53F3\\u7BAD\\u5934\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\u4E0B\\u7BAD\\u5934\"), \" \\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230\\u4E0B\\u4E00\\u4E2A Radio \\u9879\\u4E0A\\uFF0C\\u540C\\u65F6\\u53D6\\u6D88\\u5148\\u524D\\u7684 Radio \\u9879\\u7684\\u9009\\u4E2D\\u72B6\\u6001\\uFF0C\\u5E76\\u9009\\u4E2D\\u5F53\\u524D\\u805A\\u7126\\u7684 Radio \\u9879\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\u5DE6\\u7BAD\\u5934\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\u4E0A\\u7BAD\\u5934\"), \" \\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230\\u4E0A\\u4E00\\u4E2A Radio \\u9879\\u4E0A\\uFF0C\\u540C\\u65F6\\u53D6\\u6D88\\u5148\\u524D\\u7684 Radio \\u9879\\u7684\\u9009\\u4E2D\\u72B6\\u6001\\uFF0C\\u5E76\\u9009\\u4E2D\\u5F53\\u524D\\u805A\\u7126\\u7684 Radio \\u9879\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u82E5 RadioGroup \\u4E2D\\u6CA1\\u6709\\u9009\\u4E2D\\u9879\\uFF0C\\u53EF\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" \\u952E\\u9009\\u4E2D\\u521D\\u59CB\\u7126\\u70B9\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9996\\u5B57\\u6BCD\\u5927\\u5199\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u4F7F\\u7528\\u6807\\u70B9\\u7B26\\u53F7\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"123\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/radio","next":{"fields":{"slug":"en-US/input/rating"},"id":"42fd9dfa-f0c7-58e3-9397-f375bedd9430","frontmatter":{"title":"Rating","localeCode":"en-US","icon":"doc-rating","showNew":null}},"previous":{"fields":{"slug":"en-US/input/radio"},"id":"4ff43290-1f50-51d1-a0bd-6d100e1f896d","frontmatter":{"title":"Radio","localeCode":"en-US","icon":"doc-radio","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}