{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/switch","result":{"data":{"current":{"frontmatter":{"title":"Switch 开关","order":48,"brief":"开关是用于切换两种互斥状态的交互形式","icon":"doc-switch"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本","title":"基本"},{"url":"#尺寸","title":"尺寸"},{"url":"#不可用","title":"不可用"},{"url":"#带文本","title":"带文本"},{"url":"#受控组件","title":"受控组件"},{"url":"#加载中","title":"加载中"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"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\": 48,\n  \"category\": \"输入类\",\n  \"title\": \"Switch 开关\",\n  \"icon\": \"doc-switch\",\n  \"width\": \"60%\",\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  }, \"\\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 { Switch } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" \\u76D1\\u542C\\u72B6\\u6001\\u53D8\\u5316\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultChecked\"), \" \\u6216\\u53D7\\u63A7\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checked\"), \" \\u5236\\u5B9A\\u9009\\u4E2D\\u72B6\\u6001\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"aria-label\"), \" \\u63CF\\u8FF0\\u8BE5 Switch \\u5F00\\u5173\\u7684\\u5177\\u4F53\\u4F5C\\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 { Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Switch onChange={(v, e) => console.log(v)} aria-label=\\\"a switch for demo\\\"></Switch>\\n        <br />\\n        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label=\\\"a switch for semi demo\\\"></Switch>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 size \\u6307\\u5B9A\\u5C3A\\u5BF8\"), 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 { Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Space style={{ marginBottom: 10, display: 'block' }}>\\n            <Switch size=\\\"small\\\" aria-label=\\\"a switch for demo\\\"></Switch>\\n            <Switch defaultChecked={true} size=\\\"small\\\" aria-label=\\\"a switch for demo\\\"></Switch>\\n            <Switch size=\\\"small\\\" loading aria-label=\\\"a switch for demo\\\" />\\n            <Switch size=\\\"small\\\" loading defaultChecked={true} aria-label=\\\"a switch for demo\\\" />\\n        </Space>\\n        <Space style={{ marginBottom: 10, display: 'block' }}>\\n            <Switch></Switch>\\n            <Switch defaultChecked={true} aria-label=\\\"a switch for demo\\\"></Switch>\\n            <Switch loading aria-label=\\\"a switch for demo\\\" />\\n            <Switch loading defaultChecked={true} aria-label=\\\"a switch for demo\\\" />\\n        </Space>\\n        <Space>\\n            <Switch size=\\\"large\\\"></Switch>\\n            <Switch defaultChecked={true} size=\\\"large\\\"></Switch>\\n            <Switch size=\\\"large\\\" loading />\\n            <Switch size=\\\"large\\\" loading defaultChecked={true} />\\n        </Space>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\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 from 'react';\\nimport { Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Switch disabled aria-label=\\\"a switch for demo\\\"></Switch>\\n        <br />\\n        <Switch disabled checked={true} aria-label=\\\"a switch for demo\\\"></Switch>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u6587\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checkedText\"), \" \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uncheckedText\"), \" \\u8BBE\\u7F6E\\u5F00\\u5173\\u65F6\\u7684\\u6587\\u672C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6CE8\\u610F\\uFF1A\\u6B64\\u9879\\u529F\\u80FD\\u5728\\u6700\\u5C0F\\u7684\\u5F00\\u5173(\\u5373 size='small'\\u65F6)\\u65E0\\u6548\"), 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 { Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Switch checkedText=\\\"\\u5F00\\\" uncheckedText=\\\"\\u5173\\\" />\\n        <Switch checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch defaultChecked checkedText=\\\"\\u5F00\\\" uncheckedText=\\\"\\u5173\\\" />\\n        <Switch defaultChecked checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch checkedText=\\\"\\u5F00\\\" uncheckedText=\\\"\\u5173\\\" size=\\\"large\\\" />\\n        <Switch checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" size=\\\"large\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch defaultChecked checkedText=\\\"\\u5F00\\\" uncheckedText=\\\"\\u5173\\\" size=\\\"large\\\" />\\n        <Switch defaultChecked checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" size=\\\"large\\\" style={{ marginLeft: 5 }} />\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u6BD4\\u4E8E\\u901A\\u8FC7 checkedText \\u4E0E uncheckedText \\u8BBE\\u7F6E\\u5185\\u5D4C\\u7684\\u6587\\u672C\\uFF0C\\u6211\\u4EEC\\u66F4\\u63A8\\u8350\\u5C06\\u6587\\u672C\\u8BF4\\u660E\\u653E\\u7F6E\\u5728 Switch \\u5916\\u90E8\"), 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 { Switch, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [open, setOpen] = useState();\\n    const { Title } = Typography;\\n    return (\\n        <div style={{ display: 'flex', alignItems: 'center' }}>\\n            <Title heading={6} style={{ margin: 8 }}>\\n                {open ? '\\u5DF2\\u5F00\\u542F' : '\\u5DF2\\u5173\\u95ED'}\\n            </Title>\\n            <Switch checked={open} onChange={setOpen} aria-label=\\\"a switch for demo\\\" />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u4EF6\\u662F\\u5426\\u9009\\u4E2D\\u5B8C\\u5168\\u53D6\\u51B3\\u4E8E\\u4F20\\u5165\\u7684 checked \\u503C\\uFF0C\\u914D\\u5408 onChange \\u56DE\\u8C03\\u51FD\\u6570\\u4F7F\\u7528\"), 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 { Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [checked, setChecked] = useState(true);\\n\\n    const onChange = checked => {\\n        setChecked(checked);\\n    };\\n\\n    return <Switch checked={checked} aria-label=\\\"a switch for demo\\\" onChange={onChange} />;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A0\\u8F7D\\u4E2D\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E loading=\\\"true\\\" \\u5F00\\u542F\\u52A0\\u8F7D\\u4E2D\\u72B6\\u6001\\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 { Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Switch loading />\\n        <br />\\n        <Switch loading defaultChecked={true} />\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), 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  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\"\n  }, \"aria-label\"), \"\\u5C5E\\u6027\\uFF0C\\u7528\\u6765\\u7ED9\\u5F53\\u524D\\u5143\\u7D20\\u52A0\\u4E0A\\u7684\\u6807\\u7B7E\\u63CF\\u8FF0, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-labelledby\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute\"\n  }, \"aria-labelledby\"), \"\\u5C5E\\u6027\\uFF0C\\u8868\\u660E\\u67D0\\u4E9B\\u5143\\u7D20\\u7684 id \\u662F\\u67D0\\u4E00\\u5BF9\\u8C61\\u7684\\u6807\\u7B7E\\u3002\\u5B83\\u88AB\\u7528\\u6765\\u786E\\u5B9A\\u63A7\\u4EF6\\u6216\\u63A7\\u4EF6\\u7EC4\\u4E0E\\u5B83\\u4EEC\\u6807\\u7B7E\\u4E4B\\u95F4\\u7684\\u8054\\u7CFB, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), 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  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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\\u793A\\u5F53\\u524D\\u662F\\u5426\\u9009\\u4E2D,\\u914D\\u5408 onChange \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"checkedText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6253\\u5F00\\u65F6\\u5C55\\u793A\\u7684\\u5185\\u5BB9, size \\u4E3A small \\u65F6\\u65E0\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u52A0\\u8F7D\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), 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(checked:boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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\\u65F6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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\\u65F6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C3A\\u5BF8,\\u53EF\\u9009\\u503C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\"), 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  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uncheckedText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5173\\u95ED\\u65F6\\u5C55\\u793A\\u7684\\u5185\\u5BB9, size \\u4E3A small \\u65F6\\u65E0\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), 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  }, \"Switch \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"switch\"), \" role\\uFF0C\\u5F53 checked \\u4E3A true \\u65F6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-checked\"), \" \\u5C06\\u88AB\\u81EA\\u52A8\\u8BBE\\u7F6E\\u4E3A true\\uFF0C\\u53CD\\u4E4B\\u4EA6\\u7136\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F5C\\u4E3A\\u8868\\u5355\\u63A7\\u4EF6\\u5E94\\u8BE5\\u5E26\\u6709 Label\\uFF0C\\u5F53\\u4F60\\u4F7F\\u7528 Form.Switch \\u65F6\\u4F1A\\u81EA\\u52A8\\u88AB\\u5E26\\u4E0A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u4F60\\u5355\\u72EC\\u4F7F\\u7528 Switch\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u63CF\\u8FF0\\u5F53\\u524D\\u6807\\u7B7E\\u4F5C\\u7528\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" \\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\"), \" \\u5207\\u6362\\u7126\\u70B9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u805A\\u7126\\u65F6\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" \\u952E\\u5207\\u6362\\u5F00\\u542F\\u6216\\u5173\\u95ED\\u72B6\\u6001\"))), 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  }, \"\\u5F00\\u5173\\u63CF\\u8FF0\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9996\\u5B57\\u6BCD\\u5927\\u5199\\uFF0C\\u4E0D\\u9700\\u8981\\u6807\\u70B9\\u7B26\\u53F7\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u95F4\\u63A5\\u660E\\u4E86\\u5730\\u8BF4\\u660E\\u8BE5\\u8BBE\\u7F6E\\u7684\\u5F00\\u542F\\u6216\\u5173\\u95ED\\u72B6\\u6001\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u9700\\u8981\\uFF0C\\u89E3\\u91CA\\u7ED9\\u7528\\u6237\\u5F00\\u542F\\u548C\\u5173\\u95ED\\u72B6\\u6001\\u6240\\u4EE3\\u8868\\u7684\\u60C5\\u51B5\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/switch","next":{"fields":{"slug":"en-US/input/taginput"},"id":"781fc497-ebcd-505d-8d14-31d21ab8f81a","frontmatter":{"title":"TagInput","localeCode":"en-US","icon":"doc-tagInput","showNew":null}},"previous":{"fields":{"slug":"en-US/input/switch"},"id":"6fc1e50c-e3bc-5e63-a005-252f7b01722c","frontmatter":{"title":"Switch","localeCode":"en-US","icon":"doc-switch","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}