{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/checkbox","result":{"data":{"current":{"frontmatter":{"title":"Checkbox","order":37,"brief":"Checkboxes allow the user to select one or more items from a set.","icon":"doc-checkbox"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#disabled","title":"Disabled"},{"url":"#checkbox-group-in-jsx","title":"Checkbox Group in JSX"},{"url":"#checkbox-group-in-options","title":"Checkbox Group in options"},{"url":"#layout-direction","title":"Layout Direction"},{"url":"#controlled-component","title":"Controlled Component"},{"url":"#checkbox-state","title":"Checkbox State"},{"url":"#card-style","title":"Card Style"},{"url":"#pure-card-style","title":"Pure Card Style"},{"url":"#using-with-grid","title":"Using with Grid"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#checkbox","title":"Checkbox"},{"url":"#checkboxgroup","title":"CheckboxGroup"}]},{"url":"#methods","title":"Methods","items":[{"url":"#checkbox-1","title":"Checkbox"}]},{"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"},{"url":"#related-material","title":"Related Material"}]},"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\": 37,\n \"category\": \"Input\",\n \"title\": \"Checkbox\",\n \"subTitle\": \"Checkbox\",\n \"icon\": \"doc-checkbox\",\n \"brief\": \"Checkboxes allow the user to select one or more items from a set.\"\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 }, \"When to use\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When making multiple choices in a set of options;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use independently to select from different states, similar to the Switch component. The difference is that switching the Switch triggers a state change directly, while Checkbox is generally used for tagging status and works with the submission.\"))), 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 { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When the Checkbox is used individually, you can control whether to check it through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultChecked\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"checked\"), \" attributes.\\nWhen \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"checked\"), \" is passed in, it is controlled component.\"), 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 console.log(e)}>\\n Semi Design\\n \\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 console.log(e)}\\n aria-label=\\\"Checkbox demo\\\"\\n >\\n Semi Design\\n \\n);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra\"), \" to add extra information. The extra information usually is longer and even has line changes.\"), 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 \\n Semi Design\\n \\n
\\n \\n Semi Design\\n \\n \\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 { Checkbox } from '@douyinfe/semi-ui';\\n\\n() => (\\n
\\n UnChecked Disabled\\n
\\n Checked Disabled\\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Checkbox Group in JSX\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By placing the Checkbox element inside the CheckboxGroup, you can declare the Checkbox group\\nUsing the Checkbox group, you can more conveniently control the selection of a group of Checkboxes through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultValue\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" properties of the CheckboxGroup\\nAt this time, Checkbox does not need to declare \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultChecked\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"checked\"), \" attributes\"), 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, CheckboxGroup } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n A\\n B\\n C\\n D\\n E\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Checkbox Group in options\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can pass an array using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"CheckboxGroup\"), \" directly to generate a set of checkboxs.\"), 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', 'vigo', 'helo'];\\n const options = [\\n { label: 'Aim for the highest', value: '1', extra: \\\"Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing\\\" },\\n { label: 'Be grounded & courageous', value: '2', extra: \\\"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities.\\\" },\\n { label: 'Be open & humble', value: '3', extra: \\\"Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas.\\\" },\\n { label: 'Be candid & clear', value: '4', extra: \\\"Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \\\\'leader-pleasing.\\\\' Be accurate and forthright; be methodical and focused.\\\" }\\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
\\n \\n

\\n \\n

\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Layout Direction\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"horizontal\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vertical\"), \", You can adjust the layout within the Checkbox Group.\"), 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: 'semi', value: 'semi' },\\n { label: 'hotsoon', value: 'hotsoon' },\\n { label: 'pipixia', value: 'pipixia' },\\n { label: 'toutiao', value: 'toutiao' }\\n ];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Controlled Component\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Used as a controlled component.\"), 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, 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
\\n

\\n \\n {label}\\n \\n

\\n

\\n \\n \\n {!disabled ? 'Disable' : 'Enable'}\\n \\n

\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Checkbox State\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You may use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"indeterminate\"), \" property to set the state to indeterminate.\"), 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
\\n
\\n \\n Check all\\n \\n
\\n \\n
\\n );\\n};\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Card Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type='card'\"), \" to CheckboxGroup to realize card style with background.\"), 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 \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Pure Card Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type='pureCard'\"), \" to CheckboxGroup to realize a pure card style with background and no checkbox.\"), 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 \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n Checkbox Title\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Using with Grid\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Checkbox.Group\"), \" with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Grid\"), \" to achieve flexible layouts.\"), 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, Row, Col } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n \\n \\n A\\n \\n \\n B\\n \\n \\n C\\n \\n \\n D\\n \\n \\n E\\n \\n \\n \\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), 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 }, \"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(\"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 }, \"id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.11.0\")), 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 }, \"Define label of the Checkbox\"), 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 }, \"Specify whether the current Checkbox is selected (it is invalid when used in Group)\"), 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 }, \"Set the type of checkboxe, one of: \", 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 }, \"provided after v2.18.0\")), 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 }, \"Whether Checked by default (it is invalid when used in Group)\"), 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 }, \"Disabled state\"), 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 }, \"Provide extra information\"), 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 }, \"id of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.11.0\")), 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 }, \"The value that the checkbox represents in the CheckboxGroup\"), 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 }, \"Set to indeterminate state, style control only\"), 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 }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), 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 }, \"Callback function when change\"), 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 }, \"CheckboxGroup\"), 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(\"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 }, \"Options selected by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\\\\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 }, \"direction\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Layout of checkbox within a group, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"horizontal\")), 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 }, \"Disable the entire group\"), 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 }, \"The \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"name\"), \" attribute for all \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"input[type=\\\"checkbox\\\"]\"), \" in Checkbox Group\"), 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 }, \"Specify optional\"), 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 }, \"Set the type of checkboxes, one of: \", 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 }, \"provided after v1.30.0\")), 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 }, \"Specify selected options\"), 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 }, \"Callback function when selected options change\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(checkedValue)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Some internal methods provided by Checkbox can be accessed through ref:\"), 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 }, \"Name\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), 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 }, \"Remove focus\")), 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 }, \"Get focus\"))))), 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 }, \"The role of Checkbox is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"checkbox\"), \", the role of CheckboxGroup is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"list\"), \", and its direct child element is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"listitem\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \": When using the Checkbox alone, if Children have no text, it is recommended to pass in the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" prop to describe the function of the Checkbox in one sentence, which will make the screen reader read out the content of this label. If you are using Form.Checkbox, you can use the label provided by Form without passing in \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-labelledby\"), \" points to the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"addon\"), \" node, used to explain the role of the current Checkbox\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-describedby\"), \" points to the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"extra\"), \" node, which is used to supplement the explanation of the current Checkbox\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-disabled\"), \" indicates the current disabled state, which is consistent with the value of the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"disabled\"), \" prop\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-checked\"), \" indicates the current checked state\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard and focus\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Checkbox can be focused, keyboard users can use Tab and Shift + Tab to switch focus.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The Checkbox that gets the focus can switch the selected and unselected states through Space.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The click area of \\u200B\\u200BCheckbox is larger than the box itself and contains the text behind the box; for checkboxes with auxiliary text, the auxiliary text is also included in the click area.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Disabled Checkbox is not focusable.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), 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 }, \"Capitalize the first letter\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"No punctuation\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Related Material\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"semi-material-list\", {\n code: \"123\"\n }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/checkbox","next":{"fields":{"slug":"zh-CN/input/checkbox"},"id":"54c9fb24-e413-5954-9e78-eb2a6bfeeff5","frontmatter":{"title":"Checkbox 复选框","localeCode":"zh-CN","icon":"doc-checkbox","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/cascader"},"id":"0b3bedc9-00dc-595b-842a-f3816d129693","frontmatter":{"title":"Cascader 级联选择","localeCode":"zh-CN","icon":"doc-cascader","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}