{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/pincode","result":{"data":{"current":{"frontmatter":{"title":"PinCode","order":43,"brief":"For easy and intuitive verification code entry","icon":"doc-pincode"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#code-demonstration","title":"Code demonstration","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#controlled","title":"Controlled"},{"url":"#limit-verification-code-format","title":"Limit verification code format","items":[{"url":"#set-the-number-of-digits","title":"Set the number of digits"},{"url":"#set-character-range","title":"Set character range"}]},{"url":"#manual-focus-and-blur","title":"Manual focus and blur"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#methods","title":"Methods"}]},"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\": 43,\n  \"category\": \"Input\",\n  \"title\": \"PinCode\",\n  \"icon\": \"doc-pincode\",\n  \"width\": \"60%\",\n  \"brief\": \"For easy and intuitive verification code entry\"\n};\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  }, \"Code demonstration\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"PinCode supported from 2.62.0\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { PinCode } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic usage\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { PinCode } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <PinCode\\n                size={'small'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n            <br />\\n            <PinCode\\n                size={'default'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n            <br />\\n            <PinCode\\n                size={'large'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlled\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use value to pass in the verification code string and use it with onChange for controlled use\"), 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 { PinCode, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState('69af41');\\n    return (\\n        <>\\n            <Button onClick={() => setValue(String(parseInt(Math.random() * 100000000)).slice(0, 6))}>\\n                Set Random Value\\n            </Button>\\n            <br />\\n            <br />\\n            <PinCode\\n                format={'mixed'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                value={value}\\n                onChange={v => {\\n                    console.log(v);\\n                    setValue(v);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Limit verification code format\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Set the number of digits\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set the number of digits through count, the default is 6 digits, the demo below is set to 4 digits\"), 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 { PinCode } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <PinCode\\n                size={'large'}\\n                defaultValue={'6688'}\\n                count={4}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Set character range\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use format to control the character range that can be entered\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Pass \\\"number\\\" to only allow numbers\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Pass \\\"mixed\\\" to allow numbers and letters\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Pass in a regular expression to only allow characters that can be judged by the regular expression\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Pass in a function, and the verification code will be passed in as parameters in units of characters for verification when entering. When the function returns true, the character is allowed to be entered into the PinCode\"))), 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 { PinCode, Button, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <Typography.Text>\\u7EAF\\u6570\\u5B57</Typography.Text>\\n            <PinCode format={'number'} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u5B57\\u6BCD\\u548C\\u6570\\u5B57</Typography.Text>\\n            <PinCode format={'mixed'} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u53EA\\u5927\\u5199\\u5B57\\u6BCD</Typography.Text>\\n            <PinCode format={/[A-Z]/} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u53EA\\u5C0F\\u5199\\u5B57\\u6BCD(\\u51FD\\u6570\\u5224\\u65AD)</Typography.Text>\\n            <PinCode\\n                format={char => {\\n                    return /[a-z]/.test(char);\\n                }}\\n                onComplete={value => console.log('pincode: ', value)}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Manual focus and blur\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use the focus and blur methods on Ref, and the input parameter is the serial number of the corresponding Input\"), 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 { PinCode, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState('69af41');\\n    const ref = useRef();\\n    return (\\n        <>\\n            <Button onClick={() => ref.current.focus(2)}>Focus Third Input</Button>\\n            <br />\\n            <br />\\n            <PinCode\\n                format={'mixed'}\\n                ref={ref}\\n                onComplete={value => console.log('pincode: ', value)}\\n                value={value}\\n                onChange={v => {\\n                    console.log(v);\\n                    setValue(v);\\n                }}\\n            />\\n        </>\\n    );\\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  }, \"Property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default value\"), 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  }, \"autoFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to automatically focus on the first element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"Class name\"), 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  }, \"count\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Number of digits of verification code\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"Default value of input box content\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disable\"), 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  }, \"format\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Limitation of single character format of verification code\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'number'\", \"|\", \" 'mixed\\u2018 \", \"|\", \" RegExp \", \"|\", \" (char:string)=>boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'number'\"), 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  }, \"Input box size, large, default, 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  }, \"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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Input box content\"), 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  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Input callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value:string)=>void\"), 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  }, \"onComplete\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback after all digits of verification code are entered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string) => void\"), 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  }, \"Methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Methods bound to component instances can be called through ref to implement certain special interactions\"), 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  }, \"Attributes\"), 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  }, \"focus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Focus, the input parameter is the verification code number\")), 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, the input parameter is the verification code number\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/pincode","next":{"fields":{"slug":"zh-CN/input/pincode"},"id":"e7c3a0d4-cbbf-5a92-9ad4-975207e7fc41","frontmatter":{"title":"PinCode 验证码输入","localeCode":"zh-CN","icon":"doc-pincode","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/inputnumber"},"id":"acab1ac3-a9e6-5f83-a513-92fa952f7667","frontmatter":{"title":"InputNumber 数字输入框","localeCode":"zh-CN","icon":"doc-inputnumber","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}