{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/checkbox","result":{"data":{"current":{"frontmatter":{"title":"Checkbox 复选框","order":37,"brief":"复选框允许用户选中多个选项","icon":"doc-checkbox"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#禁用","title":"禁用"},{"url":"#jsx方式声明checkbox组","title":"JSX方式声明Checkbox组"},{"url":"#数组方式声明-checkbox-组","title":"数组方式声明 Checkbox 组"},{"url":"#水平排列","title":"水平排列"},{"url":"#受控","title":"受控"},{"url":"#全选","title":"全选"},{"url":"#卡片样式","title":"卡片样式"},{"url":"#无-checkbox-的纯卡片样式","title":"无 checkbox 的纯卡片样式"},{"url":"#配合grid布局","title":"配合grid布局"}]},{"url":"#api参考","title":"API参考","items":[{"url":"#checkbox","title":"Checkbox"},{"url":"#checkbox-group","title":"Checkbox Group"},{"url":"#方法","title":"方法","items":[{"url":"#checkbox-1","title":"Checkbox"}]}]},{"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\": 37,\n  \"category\": \"输入类\",\n  \"title\": \"Checkbox 复选框\",\n  \"icon\": \"doc-checkbox\",\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 CheckboxGroup = makeShortcode(\"CheckboxGroup\");\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(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u52FE\\u9009\\u6846\\u53EF\\u4EE5\\u8BA9\\u7528\\u6237\\u5728\\u4E24\\u79CD\\u76F8\\u53CD\\u7684\\u72B6\\u6001\\u3001\\u884C\\u4E3A\\u6216\\u53D6\\u503C\\u4E4B\\u95F4\\u9009\\u62E9;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9002\\u7528\\u4E8E\\u5728\\u5217\\u8868\\u4E2D\\u9009\\u62E9\\u5355\\u4E2A\\u6216\\u591A\\u4E2A\\u9009\\u9879\\uFF0C\\u5F00\\u542F\\u6216\\u5173\\u95ED\\u67D0\\u4E2A\\u9009\\u9879\"))), 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 { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Checkbox\\u5355\\u4E2A\\u4F7F\\u7528\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultChecked\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checked\"), \"\\u5C5E\\u6027\\u63A7\\u5236\\u662F\\u5426\\u52FE\\u9009\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53\\u4F20\\u5165\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checked\"), \"\\u65F6\\uFF0C\\u4E3A\\u53D7\\u63A7\\u4F7F\\u7528\\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 from 'react';\\nimport { Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Checkbox onChange={e => console.log(e)} aria-label=\\\"Checkbox \\u793A\\u4F8B\\\">Semi Design</Checkbox>\\n);\\n\")), 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 { Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Checkbox defaultChecked onChange={e => console.log(e)} aria-label=\\\"Checkbox \\u793A\\u4F8B\\\">Semi Design</Checkbox>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u8F85\\u52A9\\u6587\\u672C\\u7684checkbox\\u3002\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \"\\u4F20\\u5165\\u8F85\\u52A9\\u6587\\u672C\\u3002\\u8F85\\u52A9\\u6587\\u672C\\u4F1A\\u66F4\\u957F\\u4E00\\u4E9B\\uFF0C\\u751A\\u81F3\\u8FD8\\u53EF\\u80FD\\u6362\\u884C\\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 from 'react';\\nimport { Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <>\\n        <Checkbox aria-label=\\\"Checkbox \\u793A\\u4F8B\\\" 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'>\\n            Semi Design\\n        </Checkbox>\\n        <br/>\\n        <Checkbox style={{ width: 280 }} aria-label=\\\"Checkbox \\u793A\\u4F8B\\\" 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'>\\n            Semi Design\\n        </Checkbox>\\n    </>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" \\u5C5E\\u6027\\uFF0C\\u7981\\u7528 Checkbox\"), 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 { Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Checkbox defaultChecked={false} disabled aria-label=\\\"Checkbox \\u793A\\u4F8B\\\">Unchecked Disabled</Checkbox>\\n        <br />\\n        <Checkbox defaultChecked disabled aria-label=\\\"Checkbox \\u793A\\u4F8B\\\">Checked Disabled</Checkbox>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"JSX\\u65B9\\u5F0F\\u58F0\\u660ECheckbox\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u5728CheckboxGroup\\u5185\\u90E8\\u653E\\u7F6E Checkbox\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u58F0\\u660ECheckbox\\u7EC4\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F7F\\u7528Checkbox\\u7EC4\\uFF0C\\u4F60\\u53EF\\u4EE5\\u66F4\\u4FBF\\u6377\\u5730\\u901A\\u8FC7CheckboxGroup\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultValue\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \"\\u5C5E\\u6027\\u53BB\\u63A7\\u5236\\u4E00\\u7EC4Checkbox\\u7684\\u9009\\u4E2D\\u4E0E\\u5426\\n\\u6B64\\u65F6Checkbox\\u4E0D\\u9700\\u8981\\u518D\\u58F0\\u660E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultChecked\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checked\"), \"\\u5C5E\\u6027\"), 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 { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']} aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\">\\n        <Checkbox value=\\\"A\\\">A</Checkbox>\\n        <Checkbox value=\\\"B\\\">B</Checkbox>\\n        <Checkbox value=\\\"C\\\">C</Checkbox>\\n        <Checkbox value=\\\"D\\\">D</Checkbox>\\n        <Checkbox value=\\\"E\\\">E</Checkbox>\\n    </CheckboxGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6570\\u7EC4\\u65B9\\u5F0F\\u58F0\\u660E Checkbox \\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E5F\\u53EF\\u4EE5\\u5C06\\u6570\\u7EC4\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"options\"), \" \\u5C5E\\u6027\\u76F4\\u63A5\\u4F20\\u5165 CheckboxGroup\\uFF0C\\u76F4\\u63A5\\u751F\\u6210 Checkbox \\u7EC4\"), 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 { CheckboxGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n    function onChange(checkedValues) {\\n        console.log('checked = ', checkedValues);\\n    }\\n\\n    const plainOptions = ['Semi UI', 'Semi DSM', 'Semi D2C'];\\n\\n    const optionsWithExtra = [\\n        { extra: '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design \\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D', label: 'Semi DSM', value: 'dsm' },\\n        { extra: '\\u9AD8\\u6548\\u7684 Design To Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', label: 'Semi D2C', value: 'd2c' }\\n    ]\\n\\n    const optionsWithDisabled = [\\n        { label: 'Photography', value: 'Photography' },\\n        { label: 'Movies', value: 'Movies' },\\n        { label: 'Running', value: 'Running', disabled: false },\\n    ];\\n    return (\\n        <div>\\n            <CheckboxGroup options={plainOptions} defaultValue={['Semi D2C']} onChange={onChange} aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\" />\\n            <br/><br/>\\n            <CheckboxGroup options={optionsWithExtra} defaultValue={[]} onChange={onChange} aria-label=\\\"\\u5E26 extra \\u793A\\u4F8B\\\" />\\n            <br/><br/>\\n            <CheckboxGroup\\n                options={optionsWithDisabled}\\n                disabled\\n                defaultValue={['Photography']}\\n                onChange={onChange}\\n                aria-label=\\\"Checkbox \\u793A\\u4F8B\\\"\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6C34\\u5E73\\u6392\\u5217\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"direction\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"horizontal\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \" \\u53EF\\u4EE5\\u8C03\\u6574 CheckboxGroup \\u5185\\u7684\\u5E03\\u5C40\"), 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 { CheckboxGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const options = [\\n        { label: '\\u6296\\u97F3', value: 'abc' },\\n        { label: '\\u4ECA\\u65E5\\u5934\\u6761', value: 'toutiao' }\\n    ];\\n    return (\\n        <CheckboxGroup options={options} direction='horizontal' aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\" />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8054\\u52A8 checkbox\\u3002\"), 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 { Checkbox, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [checked, setChecked] = useState(true);\\n    const [disabled, setDisabled] = useState(false);\\n\\n    const toggleChecked = () => {\\n        setChecked(!checked);\\n    };\\n\\n    const toggleDisable = () => {\\n        setDisabled(!disabled);\\n    };\\n\\n    const onChange = (e) => {\\n        console.log('checked = ', e.target.checked);\\n        setChecked(e.target.checked);\\n    };\\n\\n    const label = `${checked ? 'Checked' : 'Unchecked'} ${\\n        disabled ? 'Disabled' : 'Enabled'\\n    }`;\\n    return (\\n        <div>\\n            <p style={{ marginBottom: '20px' }}>\\n                <Checkbox\\n                    checked={checked}\\n                    disabled={disabled}\\n                    onChange={onChange}\\n                    aria-label=\\\"Checkbox \\u793A\\u4F8B\\\"\\n                >\\n                    {label}\\n                </Checkbox>\\n            </p>\\n            <p>\\n                <Button type=\\\"primary\\\" size=\\\"small\\\" onClick={toggleChecked}>\\n                    {!checked ? 'Check' : 'Uncheck'}\\n                </Button>\\n                <Button\\n                    style={{ marginLeft: '10px' }}\\n                    type=\\\"primary\\\"\\n                    size=\\\"small\\\"\\n                    onClick={toggleDisable}\\n                >\\n                    {!disabled ? 'Disable' : 'Enable'}\\n                </Button>\\n            </p>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5168\\u9009\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u5B9E\\u73B0\\u5168\\u9009\\u6548\\u679C\\u65F6\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u7528\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indeterminate\"), \" \\u5C5E\\u6027\\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 { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const plainOptions = ['Photography', 'Movies', 'Running'];\\n    const [checkedList, setCheckedList] = useState(['Photography', 'Running']);\\n    const [indeterminate, setIndeterminate] = useState(true);\\n    const [checkAll, setCheckall] = useState(false);\\n    const onChange = (checkedList) => {\\n        setCheckedList(checkedList);\\n        setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length);\\n        setCheckall(checkedList.length === plainOptions.length);\\n    };\\n    const onCheckAllChange = (e) => {\\n        console.log(e);\\n        setCheckedList(e.target.checked ? plainOptions : []);\\n        setIndeterminate(false);\\n        setCheckall(e.target.checked);\\n    };\\n\\n    return (\\n        <div>\\n            <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}>\\n                <Checkbox\\n                    indeterminate={indeterminate}\\n                    onChange={onCheckAllChange}\\n                    checked={checkAll}\\n                    aria-label=\\\"Checkbox \\u793A\\u4F8B\\\"\\n                >\\n                    Check all\\n                </Checkbox>\\n            </div>\\n            <CheckboxGroup\\n                style={{ marginTop: 6 }}\\n                options={plainOptions}\\n                value={checkedList}\\n                onChange={onChange}\\n                aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\"\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u7ED9 CheckboxGroup \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type='card'\"), \"\\uFF0C\\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 { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\">\\n        <Checkbox 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        </Checkbox>\\n        <Checkbox value={'2'} 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        </Checkbox>\\n        <Checkbox 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        </Checkbox>\\n        <Checkbox value={'4'} 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        </Checkbox>\\n    </CheckboxGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E0 checkbox \\u7684\\u7EAF\\u5361\\u7247\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u7ED9 CheckboxGroup \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type='pureCard'\"), \"\\uFF0C\\u5B9E\\u73B0\\u5E26\\u6709\\u80CC\\u666F\\u4E14\\u65E0 checkbox \\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 { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\">\\n        <Checkbox 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        </Checkbox>\\n        <Checkbox value={'2'} 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        </Checkbox>\\n        <Checkbox 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        </Checkbox>\\n        <Checkbox value={'4'} 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        </Checkbox>\\n    </CheckboxGroup>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u5408grid\\u5E03\\u5C40\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Checkbox.Group \\u5185\\u5D4C Checkbox \\u5E76\\u4E0E Grid \\u7EC4\\u4EF6\\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u7075\\u6D3B\\u7684\\u5E03\\u5C40\\u3002\"), 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 from 'react';\\nimport { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <CheckboxGroup style={{ width: '100%' }} aria-label=\\\"CheckboxGroup \\u793A\\u4F8B\\\">\\n        <Row>\\n            <Col span={8}>\\n                <Checkbox value=\\\"A\\\">A</Checkbox>\\n            </Col>\\n            <Col span={8}>\\n                <Checkbox value=\\\"B\\\">B</Checkbox>\\n            </Col>\\n            <Col span={8}>\\n                <Checkbox value=\\\"C\\\">C</Checkbox>\\n            </Col>\\n            <Col span={8}>\\n                <Checkbox value=\\\"D\\\">D</Checkbox>\\n            </Col>\\n            <Col span={8}>\\n                <Checkbox value=\\\"E\\\">E</Checkbox>\\n            </Col>\\n        </Row>\\n    </CheckboxGroup>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Checkbox\"), 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  }, \"\\u53C2\\u6570\"), 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  }, \"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  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B9A\\u4E49 Checkbox \\u7684\\u4F5C\\u7528\"), 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  }, \"checked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5F53\\u524DCheckbox\\u662F\\u5426\\u9009\\u4E2D\\uFF08\\u5728Group\\u4E2D\\u4F7F\\u7528\\u65F6\\u65E0\\u6548\\uFF09\"), 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  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6Echeckbox \\u7684\\u6837\\u5F0F\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\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  }, \"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  }, \"defaultChecked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521D\\u59CB\\u662F\\u5426\\u9009\\u4E2D\\uFF08\\u5728Group\\u4E2D\\u4F7F\\u7528\\u65F6\\u65E0\\u6548\\uFF09\"), 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  }, \"\\u5931\\u6548\\u72B6\\u6001\"), 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\"), 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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5checkbox\\u5728CheckboxGroup\\u4E2D\\u4EE3\\u8868\\u7684value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indeterminate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E indeterminate \\u72B6\\u6001\\uFF0C\\u53EA\\u8D1F\\u8D23\\u6837\\u5F0F\\u63A7\\u5236\"), 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  }, \"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  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D8\\u5316\\u65F6\\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  }, \"Checkbox Group\"), 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  }, \"\\u53C2\\u6570\"), 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  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u5185\\u9ED8\\u8BA4\\u9009\\u4E2D\\u7684\\u9009\\u9879\\uFF0C\\u4F1A\\u4E0ECheckbox\\u7684value\\u503C\\u505A\\u5339\\u914D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\", \"[\", \"]\"), 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  }, \"\\u7EC4\\u5185checkbox\\u5E03\\u5C40\\uFF0C\\u53EF\\u9009\\u6C34\\u5E73\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \"\\u6216\", 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  }, \"vertical\"))), 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  }, \"\\u6574\\u7EC4\\u5931\\u6548\"), 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  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CheckboxGroup \\u4E0B\\u6240\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"input[type=\\\"checkbox\\\"]\"), \" \\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  }, \"\\u6307\\u5B9A\\u53EF\\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\", \"[\", \"]\"), 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\\u6709 checkbox \\u7684\\u6837\\u5F0F\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u9009\\u4E2D\\u7684\\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\", \"[\", \"]\"), 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  }, \"\\u53D8\\u5316\\u65F6\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(checkedValue)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65B9\\u6CD5\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Checkbox\"), 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  }, \"Checkbox \\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"checkbox\"), \"\\uFF0CCheckboxGroup \\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"list\"), \"\\uFF0C\\u5B83\\u7684\\u76F4\\u63A5\\u5B50\\u5143\\u7D20\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"listitem\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \"\\uFF1A\\u5355\\u72EC\\u4F7F\\u7528 Checkbox \\u65F6\\uFF0C\\u5982\\u679C Children \\u6CA1\\u6709\\u6587\\u672C\\uFF0C\\u5EFA\\u8BAE\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" prop\\uFF0C\\u7528\\u4E00\\u53E5\\u8BDD\\u63CF\\u8FF0 Checkbox \\u7684\\u4F5C\\u7528\\uFF0C\\u8FD9\\u4F1A\\u8BA9\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u8BFB\\u51FA\\u8FD9\\u4E2A\\u6807\\u7B7E\\u7684\\u5185\\u5BB9\\u3002\\u5982\\u679C\\u4F60\\u4F7F\\u7528\\u7684\\u662F Form.Checkbox\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 Form \\u63D0\\u4F9B\\u7684 label \\u800C\\u65E0\\u9700\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \" \\u6307\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"addon\"), \" \\u8282\\u70B9\\uFF0C\\u7528\\u4E8E\\u89E3\\u91CA\\u5F53\\u524D Checkbox \\u7684\\u4F5C\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" \\u6307\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"extra\"), \" \\u8282\\u70B9\\uFF0C\\u7528\\u4E8E\\u8865\\u5145\\u89E3\\u91CA\\u5F53\\u524D Checkbox \\u7684\\u4F5C\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" \\u8868\\u793A\\u5F53\\u524D\\u7684\\u7981\\u7528\\u72B6\\u6001\\uFF0C\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disabled\"), \" prop \\u7684\\u503C\\u4FDD\\u6301\\u4E00\\u81F4\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-checked\"), \" \\u8868\\u793A\\u5F53\\u524D\\u7684\\u9009\\u4E2D\\u72B6\\u6001\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Checkbox \\u53EF\\u88AB\\u83B7\\u53D6\\u7126\\u70B9\\uFF0C\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 Tab \\u53CA Shift  + Tab \\u5207\\u6362\\u7126\\u70B9\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u524D\\u83B7\\u53D6\\u7684\\u7126\\u70B9\\u4E3A Checkbox \\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Space \\u5207\\u6362\\u9009\\u4E2D\\u548C\\u672A\\u9009\\u72B6\\u6001\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Checkbox \\u7684\\u70B9\\u51FB\\u533A\\u57DF\\u5927\\u4E8E\\u6846\\u672C\\u8EAB\\uFF0C\\u5305\\u542B\\u4E86\\u6846\\u540E\\u7684\\u6587\\u6848\\uFF1B\\u5E26\\u8F85\\u52A9\\u6587\\u672C\\u7684 checkbox\\uFF0C\\u8F85\\u52A9\\u6587\\u672C\\u4E5F\\u5305\\u542B\\u5728\\u70B9\\u51FB\\u533A\\u57DF\\u5185\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7981\\u7528\\u7684 Checkbox \\u4E0D\\u53EF\\u83B7\\u53D6\\u7126\\u70B9\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"div\", {\n    style: {\n      border: '1px solid var(--semi-color-border)',\n      padding: 10,\n      marginBottom: 24\n    }\n  }, mdx(\"p\", {\n    style: {\n      fontWeight: 600,\n      fontSize: 16\n    }\n  }, \"Checkbox Content Demo\"), mdx(CheckboxGroup, {\n    options: [{\n      label: 'Call',\n      value: 'abc'\n    }, {\n      label: 'IM',\n      value: 'c'\n    }, {\n      label: 'Ticket',\n      value: 'd'\n    }, {\n      label: 'Offline',\n      value: 'e'\n    }, {\n      label: 'Buzz',\n      value: 'f'\n    }],\n    direction: \"horizontal\",\n    \"aria-label\": \"CheckboxGroup \\u793A\\u4F8B\",\n    style: {\n      marginTop: 10\n    },\n    mdxType: \"CheckboxGroup\"\n  })), 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(\"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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Call\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"call\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Call\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Call;\"))))), 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/checkbox","next":{"fields":{"slug":"en-US/input/colorpicker"},"id":"3f918eea-1f10-5900-9199-1fbbc921575f","frontmatter":{"title":"ColorPicker","localeCode":"en-US","icon":"doc-colorPlatteNew","showNew":null}},"previous":{"fields":{"slug":"en-US/input/checkbox"},"id":"354ec1fd-9f1b-517f-8c37-5870e4fba8e0","frontmatter":{"title":"Checkbox","localeCode":"en-US","icon":"doc-checkbox","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}