{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/switch","result":{"data":{"current":{"frontmatter":{"title":"Switch","order":48,"brief":"Switch is an interactive form used to switch two mutually exclusive states.","icon":"doc-switch"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#size","title":"Size"},{"url":"#disabled","title":"Disabled"},{"url":"#with-text","title":"With text"},{"url":"#controlled-component","title":"Controlled component"},{"url":"#loading","title":"loading"}]},{"url":"#api-reference","title":"API reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n  \"order\": 48,\n  \"category\": \"Input\",\n  \"title\": \"Switch\",\n  \"subTitle\": \"Switch\",\n  \"icon\": \"doc-switch\",\n  \"width\": \"60%\",\n  \"brief\": \"Switch is an interactive form used to switch two mutually exclusive states.\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), 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  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can monitor state changes through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \", and set the selected state through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultChecked\"), \" or controlled \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checked\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"aria-label\"), \" to describe the specific function of the Switch\"), 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 demo\\\"></Switch>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), 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 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        <br />\\n        <br />\\n        <Switch></Switch>\\n        <Switch defaultChecked={true}></Switch>\\n        <Switch loading />\\n        <Switch loading defaultChecked={true} />\\n        <br />\\n        <br />\\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    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Disabled\"), 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  }, \"With text\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Can pass \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checkedText\"), \" with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uncheckedText\"), \" Text when setting the switch\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"The long text is recommended to be placed directly on the outside.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Note: This does not work with the smallest switch (size = 'small')\"), 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=\\\"on\\\" uncheckedText=\\\"off\\\" />\\n        <Switch checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch defaultChecked checkedText=\\\"on\\\" uncheckedText=\\\"off\\\" />\\n        <Switch defaultChecked checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch checkedText=\\\"on\\\" uncheckedText=\\\"off\\\" size=\\\"large\\\" />\\n        <Switch checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" size=\\\"large\\\" style={{ marginLeft: 5 }} />\\n        <br />\\n        <br />\\n        <Switch defaultChecked checkedText=\\\"on\\\" uncheckedText=\\\"off\\\" size=\\\"large\\\" />\\n        <Switch defaultChecked checkedText=\\\"\\uFF5C\\\" uncheckedText=\\\"\\u3007\\\" size=\\\"large\\\" style={{ marginLeft: 5 }} />\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Compared to setting the embedded text through checkedText and uncheckedText, we recommend placing the text description outside the Switch\"), 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 ? 'Open' : 'Closed'}\\n            </Title>\\n            <Switch checked={open} onChange={setOpen} />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlled component\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Whether the component is selected depends entirely on the incoming checked value, used with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\")), 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    const [checked, setChecked] = useState(true);\\n\\n    const onChange = (checked) => {\\n        setChecked(checked);\\n    };\\n\\n    return (\\n        <Switch\\n            checked={checked}\\n            aria-label='a switch for demo'\\n            onChange={onChange}\\n        />\\n    );\\n\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"loading\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can turn on the loading state by setting loading=\\\"true\\\".\"), 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 reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), 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\"), \" used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen\"), 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\"), \"attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.\"), 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  }, \"The CSS class name of the wrapper element\"), 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  }, \"Indicates whether currently selected, used with onchange\"), 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  }, \"Content displayed when open, invalid when size is small\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React Node\"), 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  }, \"Whether selected when component mounted\"), 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  }, \"If true, the switch will be disabled.\"), 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  }, \"Turn on loading status\"), 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  }, \"Callback function when changing\"), 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  }, \"A callback when the mouse moves in\"), 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  }, \"A callback when the mouse moves out\"), 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  }, \"Size, optional value \", 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  }, \"Inline style\"), 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  }, \"Content displayed when closed, invalid when size is small\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React Node\"), 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 has a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"switch\"), \" role, when checked is true, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-checked\"), \" will be automatically set to true, and vice versa.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"As a form field, it should have a Label, which will be automatically brought on when you use Form.Switch.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If you use Switch alone, it is recommended to use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" to describe the current label function.\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Keyboard and Focus\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keyboard users can use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\"), \" to switch focus.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When focusing, you can switch on or off by pressing the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" key.\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Switch description\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"First letter is capitalized, no punctuation is required\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Indirectly and explicitly state whether the setting is on or off\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If needed, explain to the user what the on and off states represent\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/switch","next":{"fields":{"slug":"zh-CN/input/switch"},"id":"210a5567-5b34-5bdb-9668-fd25117f2d67","frontmatter":{"title":"Switch 开关","localeCode":"zh-CN","icon":"doc-switch","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/slider"},"id":"720d1ff5-55f0-51c8-80c6-6590d99845ed","frontmatter":{"title":"Slider 滑动选择器","localeCode":"zh-CN","icon":"doc-slider","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}