{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/select","result":{"data":{"current":{"frontmatter":{"title":"Select","order":46,"brief":"The user can select one or more options from a set of options through the Select selector and present the final selection result","icon":"doc-select"},"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":"#pass-option-as-an-array","title":"Pass Option as an array"},{"url":"#multi-choice","title":"Multi-choice"},{"url":"#with-group","title":"With Group"},{"url":"#different-sizes","title":"Different sizes"},{"url":"#different-validate-status","title":"Different validate status"},{"url":"#configure-prefix-suffix-clear-button","title":"Configure Prefix, Suffix, Clear Button"},{"url":"#additional-items","title":"Additional items"},{"url":"#controlled-component","title":"Controlled component"},{"url":"#linkage-select","title":"Linkage Select"},{"url":"#search","title":"Search"},{"url":"#search-position","title":"Search position"},{"url":"#remote-search","title":"Remote search"},{"url":"#custom-search-strategy","title":"Custom search strategy"},{"url":"#custom-selection-rendering","title":"Custom selection rendering"},{"url":"#custom-pop-up-layer-style","title":"Custom pop-up layer style"},{"url":"#dynamic-modification-options","title":"Dynamic Modification Options"},{"url":"#get-all-attribute-of-selected-option","title":"Get all attribute of selected option"},{"url":"#create-entries","title":"Create entries"},{"url":"#virtualize","title":"Virtualize"},{"url":"#custom-trigger","title":"Custom Trigger"},{"url":"#custom-option-render","title":"Custom Option Render"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#select-props","title":"Select Props"},{"url":"#option-props","title":"Option Props"},{"url":"#optgroup-props","title":"OptGroup Props"}]},{"url":"#methods","title":"Methods"},{"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"},{"url":"#typescript-generic-support","title":"TypeScript Generic Support"},{"url":"#faq","title":"FAQ"}]},"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\": 46,\n \"category\": \"Input\",\n \"title\": \"Select\",\n \"subTitle\": \"Select\",\n \"icon\": \"doc-select\",\n \"width\": \"60%\",\n \"brief\": \"The user can select one or more options from a set of options through the Select selector and present the final selection result\"\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 Notice = makeShortcode(\"Notice\");\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 { Select } from '@douyinfe/semi-ui';\\nconst Option = Select.Option;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Each Option tag must declare the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" attribute, and the Option \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"children\"), \" content will be rendered to the drop-down list\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Pass Option as an array\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can pass an array of objects directly through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"optionList\"), \". Each object must contain the value / label attribute.\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const list = [\\n { value: 'douyin', label: 'Douyin' },\\n { value: 'capcut', label: 'Capcut' },\\n { value: 'coze', label: 'Coze' },\\n { value: 'toutiao', label: 'TooBuzz' },\\n ];\\n return ;\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Multi-choice\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Since v2.28, the selector will have its own maxHeight 270, and the content can be viewed by scrolling vertically after it exceeds.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configuration \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"multiple\"), \" properties that can support multi-selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configuration \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxTagCount\"), \". You can limit the number of options displayed, and the excess will be displayed in the form of + N\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ellipsisTrigger\"), \" (>= v2.28.0) to do adaptive processing on the overflow part of the tag. When the width is insufficient, the last tag content will be truncated. After enabling this function, there will be a certain performance loss, and it is not recommended to use it in large form scenarios\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"expandRestTagsOnClick\"), \" (>= v2.28.0) to display all remaining tags by clicking when \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxTagCount\"), \" is set\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showRestTagsPopover\"), \" (>= v2.22.0) to set whether hover +N displays Popover after exceeding \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxTagCount\"), \", the default is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \". Also, popovers can be configured in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"restTagsPopoverProps\"), \" property\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configuration \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"max\"), \" Properties can limit the maximum number of options and cannot be selected beyond the maximum limit, while triggering\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"On Exceed\"), \"callback\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n Semi\\n Coze\\n Capcut\\n BuzzVideo\\n \\n\\n
\\n
\\n Toast.warning('Only two options are allowed')}\\n >\\n Semi\\n Coze\\n Capcut\\n BuzzVideo\\n \\n
\\n
\\n \\n Semi\\n Coze\\n Capcut\\n BuzzVideo\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"With Group\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Grouping Option with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"OptGroup\"), \"(Only supports the declaration of children through jsx, and does not support pass in through optionList)\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = [\\n {\\n label: 'Asia',\\n children: [\\n { value: 'a-1', label: 'China' },\\n { value: 'a-2', label: 'Korea' },\\n ],\\n },\\n {\\n label: 'Europe',\\n children: [\\n { value: 'b-1', label: 'Germany' },\\n { value: 'b-2', label: 'France' },\\n ],\\n },\\n {\\n label: 'South America',\\n children: [{ value: 'c-1', label: 'Peru' }],\\n },\\n ];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Different sizes\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Size: small / default / large\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Different validate status\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"validateStatus: default / warning / error\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Configure Prefix, Suffix, Clear Button\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can pass the selection box prefix through \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"prefix\"), \", the selection box suffix through \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"suffix\"), \", for text or React Node\", mdx(\"br\", {\n parentName: \"li\"\n }), \"The left and right padding is automatically brought when the content passed in by prefix and reactix is text or Icon. If it is a custom ReactNode, the left and right padding is 0.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Whether to show the clear button is displayed by \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"showClear\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Whether to show the right drop-down arrow is displayed by \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"showArrow\"))), 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 { Select } from '@douyinfe/semi-ui';\\nimport { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';\\n\\n() => (\\n <>\\n \\n
\\n
\\n }\\n suffix={}\\n showArrow={false}\\n >\\n Douyin\\n Capcut\\n Coze\\n BuzzVideo\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Additional items\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"We have reserved two slots at the bottom of the pop-up layer, which you can use when you need to add a custom node to the pop-up layer.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Use\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"innerTopSlot\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outerTopSlot\"), \" to pass the custom node, which will be rendered at the top of the pop-up layer. Use\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"innerBottomSlot\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outerBottomSlot\"), \" instead at the bottom.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"innerTopSlot\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"innerBottomSlot\"), \" will be rendered inside the Option List\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outerTopSlot\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outerBottomSlot\"), \" will be rendered to level with the option List\"))), 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 { Select } from '@douyinfe/semi-ui';\\nimport { IconClock } from '@douyinfe/semi-icons';\\n\\n() => {\\n let selectStyle = { width: 180, margin: 20 };\\n let innerSlotStyle = {\\n backgroundColor: '#FFF',\\n height: '40px',\\n color: '#0077FA',\\n display: 'flex',\\n justifyContent: 'center',\\n alignItems: 'center',\\n cursor: 'pointer',\\n };\\n let innerSlotNode =
No suitable product?
;\\n let outSlotStyle = {\\n backgroundColor: 'whitesmoke',\\n height: '29px',\\n display: 'flex',\\n justifyContent: 'center',\\n alignItems: 'center',\\n cursor: 'pointer',\\n };\\n let outSlotNode = (\\n
\\n \\n More recently viewed pages\\n
\\n );\\n\\n return (\\n
\\n

outerBottomSlot:

\\n \\n Douyin\\n Capcut\\n Coze\\n BuzzVideo\\n \\n

innerBottomSlot:

\\n \\n
\\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Using outerTopSlot to insert content\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const list = {\\n component: [\\n { value: 'select', label: 'Select' },\\n { value: 'tabs', label: 'Tabs' },\\n { value: 'avatar', label: 'Avatar' },\\n { value: 'button', label: 'Button' },\\n ],\\n design: [\\n { value: 'color', label: 'Color' },\\n { value: 'dark', label: 'Dark Mode' },\\n { value: 'icon', label: 'Icon' },\\n { value: 'font', label: 'Topography' },\\n ],\\n feedback: [\\n { value: 'faq', label: 'FAQ' },\\n { value: 'join', label: 'Join Chat Group' },\\n { value: 'hornbill', label: 'Hornbill' },\\n ],\\n };\\n\\n const [key, setKey] = useState('component');\\n const [value, setValue] = useState({ value: 'faq', label: 'FAQ' });\\n const handleTabClick = itemKey => {\\n setKey(itemKey);\\n };\\n\\n const tabStyle = {\\n cursor: 'pointer',\\n marginRight: 12,\\n paddingBottom: 4,\\n };\\n const tabActiveStyle = {\\n ...tabStyle,\\n borderBottom: '1px solid var(--semi-color-primary)',\\n fontWeight: 700,\\n };\\n const tabWrapper = {\\n display: 'flex',\\n paddingTop: 8,\\n paddingLeft: 32,\\n paddingRight: 32,\\n borderBottom: '0.5px solid var(--semi-color-border)',\\n };\\n const tabOptions = [\\n { itemKey: 'component', label: 'Compoonent' },\\n { itemKey: 'design', label: 'Design' },\\n { itemKey: 'feedback', label: 'Feedback' },\\n ];\\n\\n const outerTopSlotNode = (\\n
\\n {tabOptions.map((item, index) => {\\n style = item.itemKey === key ? tabActiveStyle : tabStyle;\\n return (\\n
handleTabClick(item.itemKey)}>\\n {item.label}\\n
\\n );\\n })}\\n
\\n );\\n return (\\n setValue(obj)}\\n style={{ width: 200 }}\\n outerTopSlot={outerTopSlotNode}\\n optionList={list[key]}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Controlled component\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" is passed, Select is a controlled component, and the value selected is entirely determined by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \".\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n let [value, setValue] = useState('xigua');\\n return (\\n <>\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Linkage Select\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"If it is a complex linkage with a hierarchical relationship, it is recommended to use Cascader components directly\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const continents = ['Asia', 'Europe'];\\n const maps = {\\n Asia: ['China', 'Korea'],\\n Europe: ['United Kingdom', 'France', 'Germany'],\\n };\\n\\n const [continent, setContinent] = useState(continents[0]);\\n const countrys = maps[continent];\\n const [country, setCountry] = useState(countrys[0]);\\n\\n const continentsChange = newContinent => {\\n setContinent(newContinent);\\n setCountry(maps[newContinent][0]);\\n };\\n const countryChange = newCountry => setCountry(newCountry);\\n\\n return (\\n <>\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Search\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can turn on the search capability by setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filter\"), \" to true.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"The default search strategy will include comparison of the input value with the label value of option\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default, the search keywords will be cleared automatically after multiple selection is selected. If you want to keep it, you can turn off the default behavior by setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"autoClearSearchValue\"), \" to false (provided after v2.3)\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n Semi-0\\n Semi-1\\n Semi-2\\n Semi-3\\n Semi-4\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Search position\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The default search input is displayed on the Select Trigger. You can specify different positions through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"searchPosition\"), \", and you can choose \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dropdown\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"trigger\"), \". Available after \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"v2.61.0\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If you want to customize the placeholder of the Input search box in the dropdown, you can control it through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"searchPlaceholder\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"searchPosition\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"trigger\"), \", when \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showClear=true\"), \", clicking the clear button of the input will clear the selected items and the search text in the input at the same time\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"searchPosition\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dropdown\"), \", when \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showClear=true\"), \", clicking the clear button of the trigger will clear the selected items, clicking the clear button in the dropdown input will clear search text \"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n Douyin\\n UlikeCam\\n Capcut\\n XiguaVideo\\n \\n
\\n
\\n \\n Semi-0\\n Semi-1\\n Semi-2\\n Semi-3\\n Semi-4\\n \\n \\n);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Remote search\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"A multi-select example with remote search, request debounce, loading status.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"filter\"), \" turn on the search capability.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"remote\"), \" to disabled local filter\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Dynamic Update \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"optionList\"), \" after \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onSearch\"), \" callback\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Update \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"loading\"), \" when fetching data / finish\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use controlled value attribute\")), 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 { debounce } from 'lodash-es';\\nimport { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [loading, setLoading] = useState(false);\\n const optionList = [\\n { value: 'dsm', label: 'Semi DSM', type: 1 },\\n { value: 'd2c', label: 'Semi DesignToCode', type: 2 },\\n { value: 'c2d', label: 'Semi CodeToDesign', type: 3 },\\n { value: 'plugin', label: 'Semi Plugin', type: 4 },\\n ];\\n const [list, setList] = useState(optionList);\\n const [value, setValue] = useState('');\\n\\n const handleMultipleChange = newValue => {\\n setValue(newValue);\\n };\\n\\n const handleSearch = inputValue => {\\n setLoading(true);\\n let result = [];\\n if (inputValue) {\\n let length = Math.ceil(Math.random() * 100);\\n result = Array.from({ length }, (v, i) => {\\n return { value: inputValue + i, label: `Relative: ${inputValue}${i}`, type: i + 1 };\\n });\\n setTimeout(() => {\\n setLoading(false);\\n setList(result);\\n }, 1000);\\n } else {\\n setLoading(false);\\n }\\n };\\n\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom search strategy\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default, the user's search input will be compared with the option's label value as a string include.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"You can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filter\"), \" as a custom function to customize your filter strategy.\"), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n function search(sugInput, option) {\\n // Search for both label and value\\n let label = option.label.toUpperCase();\\n let value = option.value.toUpperCase();\\n let sug = sugInput.toUpperCase();\\n return label.includes(sug) || value.includes(sug);\\n }\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom selection rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default, the content of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"option.label\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"option.children\"), \" will be backfilled into the selection box when the option is selected.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"But you can customize the rendering of the selection box through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedItem\"), \" function\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Select: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"renderSelectedItem(optionNode: object) => content: ReactNode\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Multiple Select: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"renderSelectedItem(optionNode: object, { index: number, onClose: function }) => { isRenderInTag: boolean, content: ReactNode }\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"isRenderInTag\"), \" is true, content will automatically wrapped in \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Tag\"), \" rendering (with background color and close button)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"isRenderInTag\"), \" is false, it renders the returned content directly\")))), 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 { Select, Avatar, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n const list = [\\n {\\n name: 'Keman Xia',\\n email: 'xiakeman@example.com',\\n avatar:\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',\\n },\\n {\\n name: 'Yue Shen',\\n email: 'shenyue@example.com',\\n avatar:\\n 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',\\n },\\n {\\n name: 'Chenyi Qu',\\n email: 'quchenyi@example.com',\\n avatar:\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Viamaker.png',\\n },\\n {\\n name: 'Jiamao Wen',\\n email: 'wenjiamao@example.com',\\n avatar:\\n 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png',\\n },\\n ];\\n\\n const renderSelectedItem = optionNode => (\\n
\\n \\n {optionNode.abbr}\\n \\n {optionNode.email}\\n
\\n );\\n\\n // avatarSrc & avatarShape are supported\\n const renderMultipleWithCustomTag = (optionNode, { onClose }) => {\\n const content = (\\n \\n {optionNode.name}\\n \\n );\\n return {\\n isRenderInTag: false,\\n content,\\n };\\n };\\n\\n const renderMultipleWithCustomTag2 = (optionNode, { onClose }) => {\\n const content = (\\n \\n {optionNode.name}\\n \\n );\\n return {\\n isRenderInTag: false,\\n content,\\n };\\n };\\n\\n const renderCustomOption = (item, index) => {\\n const optionStyle = {\\n display: 'flex',\\n paddingLeft: 24,\\n paddingTop: 10,\\n paddingBottom: 10,\\n };\\n return (\\n \\n \\n
\\n
{item.name}
\\n \\n {item.email}\\n
\\n \\n \\n );\\n };\\n\\n return (\\n <>\\n console.log(v)}\\n defaultValue={'Keman Xia'}\\n renderSelectedItem={renderSelectedItem}\\n >\\n {list.map((item, index) => renderCustomOption(item, index))}\\n \\n console.log(v)}\\n defaultValue={['Keman Xia', 'Yue Shen']}\\n multiple\\n renderSelectedItem={renderMultipleWithCustomTag}\\n >\\n {list.map((item, index) => renderCustomOption(item, index))}\\n \\n console.log(v)}\\n defaultValue={['Keman Xia', 'Yue Shen']}\\n multiple\\n renderSelectedItem={renderMultipleWithCustomTag2}\\n >\\n {list.map((item, index) => renderCustomOption(item, index))}\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom pop-up layer style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can control the style of the pop-up layer through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dropdownClassName\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dropdownStyle\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"For example, when you customize the width of the pop-up layer, you can pass the width through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"drowndownStyle\")), 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 { Select } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Dynamic Modification Options\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"If you need to update Options dynamically, you should use controlled value\"), 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 { Select, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n let [options, setOptions] = useState([1, 2, 3, 4]);\\n function add() {\\n let length = Math.ceil(Math.random() * 10);\\n let newOptions = Array.from({ length }, (v, i) => i + 1);\\n setOptions(newOptions);\\n }\\n return (\\n <>\\n \\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Get all attribute of selected option\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default, through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \" uou can only get value attribute of selected option.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If you need to take other attributes of the selected option, you can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChangeWithObject\"), \" Properties\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"At this time, the argument of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \" will be object, containing various attributes of selected option, eg: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange({ value, label, ...rest })\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Note that when onChange With Object is set to true,\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultValue\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Value\"), \"it should also be object and must have \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" key\"), 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 { Select, TextArea } from '@douyinfe/semi-ui';\\n\\n() => {\\n const list = [\\n { value: 'douyin', label: 'Douyin', type: 1 },\\n { value: 'capcut', label: 'Capcut', type: 2 },\\n { value: 'xigua', label: 'BuzzVideo', type: 3 },\\n ];\\n const [cbValue, setCbValue] = useState();\\n const [multipleCbValue, setMultipleCbValue] = useState();\\n\\n const onChange = value => {\\n setCbValue(value);\\n console.log(value);\\n };\\n\\n const onMultipleChange = value => {\\n setMultipleCbValue(value);\\n console.log(value);\\n };\\n\\n return (\\n
\\n
\\n \\n

onChang callback:

\\n