{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/form","result":{"data":{"current":{"frontmatter":{"title":"Form","order":40,"brief":null,"icon":"doc-form"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#form","title":"Form"},{"url":"#field","title":"Field","items":[{"url":"#supported-field-component","title":"Supported Field Component"}]},{"url":"#demos","title":"Demos","items":[{"url":"#various-ways-to-declare-form","title":"Various ways to declare form","items":[{"url":"#basic-usage","title":"Basic Usage"},{"url":"#other-declaration-methods","title":"Other declaration methods"},{"url":"#via-render-props","title":"Via render props"},{"url":"#via-children-function","title":"Via children function"},{"url":"#via-propscomponent","title":"Via props.component"}]},{"url":"#all-supported-field-components","title":"All supported field components"},{"url":"#field-binding-syntax","title":"Field binding syntax"},{"url":"#form-layout","title":"Form layout"},{"url":"#wrapper-col--label-col","title":"wrapper Col / label Col"},{"url":"#remove-automatically-added-label","title":"Remove automatically added Label"},{"url":"#embedded-label","title":"Embedded Label"},{"url":"#export-label-errormessage-use","title":"Export Label, ErrorMessage use"},{"url":"#use-formslot","title":"Use Form.Slot"},{"url":"#use-helptextextratext-set-prompt-information","title":"Use helpText、extraText set prompt information"},{"url":"#using-input-group","title":"Using Input Group"},{"url":"#form-in-the-modal-pop-up-layer","title":"Form in the Modal pop-up layer"},{"url":"#configure-initial-values-and-verification-rules","title":"Configure initial values and verification rules"},{"url":"#custom-validate-form-level","title":"Custom Validate (Form Level)","items":[{"url":"#synchronous-validate","title":"Synchronous Validate"},{"url":"#asynchronous-validate","title":"Asynchronous Validate"}]},{"url":"#custom-validate-field-level","title":"Custom Validate (Field Level)"},{"url":"#manually-trigger-specified-validation","title":"Manually Trigger specified validation"},{"url":"#silent-validation","title":"Silent Validation"},{"url":"#linkage-fields","title":"Linkage Fields"},{"url":"#dynamic-form","title":"Dynamic form","items":[{"url":"#dynamically-add-and-delete-fields","title":"Dynamically add and delete fields"}]},{"url":"#arrayfield-usage","title":"ArrayField Usage","items":[{"url":"#nesting-arrayfield","title":"Nesting ArrayField"},{"url":"#add-or-delete-form-items-dynamically---by-use-formapi","title":"Add or delete form items dynamically - by use formApi"}]},{"url":"#use-of-hook","title":"Use of Hook","items":[{"url":"#useformapi","title":"useFormApi"},{"url":"#useformstate","title":"useFormState"},{"url":"#usefieldapi","title":"useFieldApi"},{"url":"#usefieldstate","title":"useFieldState"}]},{"url":"#use-of-hoc","title":"Use of HOC","items":[{"url":"#hoc---withformapi","title":"HOC - withFormApi"},{"url":"#hoc---withformstate","title":"HOC - withFormState"}]},{"url":"#take-over-custom-components","title":"Take over custom components"}]},{"url":"#api-reference","title":"API reference"},{"url":"#form-props","title":"Form Props"},{"url":"#formstate","title":"FormState","items":[{"url":"#how-to-access-the-form-state","title":"How to access the form state"}]},{"url":"#formapi","title":"FormApi","items":[{"url":"#how-to-access-formapi","title":"How to access formApi","items":[{"url":"#using-formuseform","title":"Using Form.useForm()"}]}]},{"url":"#field-props","title":"Field Props"},{"url":"#field-api","title":"Field Api"},{"url":"#arrayfield-props","title":"ArrayField Props"},{"url":"#formsection","title":"Form.Section"},{"url":"#formlabel","title":"Form.Label"},{"url":"#forminputgroup","title":"Form.InputGroup"},{"url":"#formslot","title":"Form.Slot"},{"url":"#formerrormessage","title":"Form.ErrorMessage"},{"url":"#withfieldoption","title":"withFieldOption"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"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\": 40,\n  \"category\": \"Input\",\n  \"title\": \"Form\",\n  \"subTitle\": \"Form\",\n  \"icon\": \"doc-form\",\n  \"dir\": \"column\"\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 ApiType = makeShortcode(\"ApiType\");\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  }, \"Form\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Rerender on demand\"), \", avoids unnecessary full-volume rendering, higher performance\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Easy to use, \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"simple structure\"), \", avoids unnecessary hierarchical nesting\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Perfect accessibility support\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"FormState / FieldState can also be easily obtained from outside the Form\\nProvides an external method to operate inside the form: formApi / fieldApi\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Support for encapsulating custom components into form controls, and you can quickly access your team's components through the extension mechanism provided by Form (through \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"withField\"), \" HOC)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Support Form level / Field level assignment, verification (synchronous / asynchronous)\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Field\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi encapsulates all form field component (Input\\u3001Select\\u3001Checkbox\\u3001DatePicker etc.) with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withField\"), \" once.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Taking over their data flow (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.value\"), \" & \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.onChange\"), \")\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When in use, you need to import from the Form (note: only the control imported from the Form has data synchronization)  \"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Supported Field Component\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Input\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"InputNumber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TextArea\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Select\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Checkbox\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Radio\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"RadioGroup\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Switch\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"DatePicker\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TimePicker\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Slider\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"InputGroup\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TreeSelect\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Cascader\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Rating\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AutoComplete\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Upload\"), \",  \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Label\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ErrorMessage\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Section\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TagInput\"), \"\\nAll mounted under Form and declared directly in \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<Form.Input />\"), \"  and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<Form.Select />\"), \" when used.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\n\\nconst FormInput = Form.Input;\\nconst FormSelect = Form.Select;\\nconst Option = FormSelect.Option;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The Field level component provided by Form, its \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \" (or other properties specified by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"valueKey\"), \"), onChange (or other callback functions specified by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onKeyChangeFnName\"), \")\\nProperties are hijacked by Form, so\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. No longer need to manually bind the onChange event and update the value as controled component. But you can continue to listen onChange events for the latest values if you want\"), mdx(\"div\", null, \"2. You cannot set the state of component with attributes such as `value`, `defaultValue`, `checked`, `defaultChecked`, etc. The default value can be set by Field's `initValue` or Form's `unitValues`\"), mdx(\"div\", null, \"3. You should not modify the value of Form State directly, all changes to the data in the Form should be done by providing `formApi`, `fieldApi`\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Various ways to declare form\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Form supports multiple writing at the same time.\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Add \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \" property to each field component.\\nYou can also set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" properties for each field, by default is the same as field\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" can be passed in a string directly, or declared in the form of an object, configure \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"required\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"optional\"), \" and other attributes to deal with more complex scenarios\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, \"The field attribute is required props\"), 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 { Form, Tooltip } from '@douyinfe/semi-ui';\\nimport { IconHelpCircle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Form layout='horizontal'>\\n        <Form.Input field='username' label='UserName' style={{ width: 80 }}/>\\n        <Form.Input\\n            field='password'\\n            label={{ \\n                text: 'Password',\\n                extra: <Tooltip content='More info xxx'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> \\n            }}\\n            style={{ width: 176 }}\\n        />\\n        <Form.Select\\n            field=\\\"role\\\"\\n            label={{ text: 'Role', optional: true }}\\n            style={{ width: 176 }}\\n            optionList={[\\n                { label: 'Admin', value: 'admin' },\\n                { label: 'User', value: 'user' },\\n                { label: 'Guest', value: 'guest' },\\n            ]}\\n        >\\n        </Form.Select>\\n    </Form>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Other declaration methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need to get \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formState\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"values\"), \", etc. directly inside the Form structure, you can use the following writing\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Via render props\"), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form render={({ formState, formApi, values }) => (\\n        <>\\n            <Form.Select field=\\\"role\\\" label='Role' style={{ width: 120 }}>\\n                <Form.Select.Option value=\\\"admin\\\">Admin</Form.Select.Option>\\n                <Form.Select.Option value=\\\"user\\\">User</Form.Select.Option>\\n                <Form.Select.Option value=\\\"guest\\\">Guest</Form.Select.Option>\\n            </Form.Select>\\n            <Form.Input field='userName' label='UserName' />\\n            <Form.Input field='password' label='Password' />\\n            <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>\\n        </>\\n    )} layout='horizontal'>\\n    </Form>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Via children function\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"declare children as a function that returns all field components\"), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form layout='horizontal'>\\n        {\\n            ({ formState, values, formApi }) => (\\n                <>\\n                    <Form.Select field=\\\"role\\\" label='Role' style={{ width: 120 }}>\\n                        <Form.Select.Option value=\\\"admin\\\">Admin</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"user\\\">User</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"guest\\\">Guest</Form.Select.Option>\\n                    </Form.Select>\\n                    <Form.Input field='userName' label='UserName' />\\n                    <Form.Input field='password' label='Password' />\\n                    <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>\\n                </>\\n            )\\n        }\\n    </Form>\\n);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Via props.component\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Pass the entire internal structure directly in the form through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"component\"), \" attribute.\"), 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 { Form } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() { super(); }\\n    render() {\\n        const fields = ({ formState, formApi, values }) => (\\n            <>\\n                <Form.Input field='Role'/>\\n                <Form.Input field='UserName' />\\n                <Form.Input field='Password' />\\n                <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>\\n            </>\\n        );\\n        return <Form component={fields} layout='horizontal'/>;\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"All supported field components\"), 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 { Form, Col, Row, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\nclass BasicDemoWithInit extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            initValues: {\\n                name: 'semi',\\n                business: ['ulikeCam'],\\n                role: 'ued',\\n                switch: true,\\n                files: [\\n                    {\\n                        uid: '1',\\n                        name: 'vigo.png',\\n                        status: 'success',\\n                        size: '130KB',\\n                        preview: true,\\n                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/vigo.png'\\n                    },\\n                    {\\n                        uid: '2',\\n                        name: 'resso.jpeg',\\n                        status: 'validateFail',\\n                        size: '222KB',\\n                        percent: 50,\\n                        preview: true,\\n                        fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),\\n                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'\\n                    },\\n                    {\\n                        uid: '3',\\n                        name: 'dy.jpeg',\\n                        status: 'uploading',\\n                        size: '222KB',\\n                        percent: 50,\\n                        preview: true,\\n                        fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),\\n                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'\\n                    }\\n                ]\\n            }\\n        };\\n    }\\n\\n\\n    render() {\\n        const { Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput, Section } = Form;\\n        const { initValues } = this.state;\\n        const plainOptions = ['A', 'B', 'C'];\\n        const style = { width: '90%' };\\n        const treeData = [\\n            {\\n                label: 'Asia',\\n                value: 'Asia',\\n                key: '0',\\n                children: [\\n                    {\\n                        label: 'China',\\n                        value: 'China',\\n                        key: '0-0',\\n                        children: [\\n                            {\\n                                label: 'Beijing',\\n                                value: 'Beijing',\\n                                key: '0-0-0',\\n                            },\\n                            {\\n                                label: 'Shanghai',\\n                                value: 'Shanghai',\\n                                key: '0-0-1',\\n                            },\\n                        ],\\n                    },\\n                ],\\n            },\\n            {\\n                label: 'North America',\\n                value: 'North America',\\n                key: '1',\\n            }\\n        ];\\n\\n        return (\\n            <Form\\n                initValues={initValues}\\n                style={{ padding: 10, width: '100%' }}\\n                onValueChange={(v)=>console.log(v)}\\n            >\\n                <Section text={'Basic Info'}>\\n                    <Row>\\n                        <Col span={12}>\\n                            <Input\\n                                field=\\\"name\\\"\\n                                label=\\\"Name\\uFF08Input\\uFF09\\\"\\n                                initValue={'mikeya'}\\n                                style={style}\\n                                trigger='blur'\\n                            />\\n                        </Col>\\n                        <Col span={12}>\\n                            <DatePicker field=\\\"date\\\" label='Date\\uFF08DatePicker\\uFF09' style={style} initValue={new Date()} placeholder='Choose data' />\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <Select field=\\\"role\\\" style={style} label='Role\\uFF08Select\\uFF09' placeholder='Choose role'>\\n                                <Select.Option value=\\\"qa\\\">Quality Assurance</Select.Option>\\n                                <Select.Option value=\\\"rd\\\">Software Engineer</Select.Option>\\n                                <Select.Option value=\\\"pm\\\">Product Manager</Select.Option>\\n                                <Select.Option value=\\\"ued\\\">Designer</Select.Option>\\n                            </Select>\\n                        </Col>\\n                        <Col span={12}>\\n                            <Select\\n                                field=\\\"business\\\"\\n                                multiple\\n                                style={style}\\n                                placeholder='Choose application'\\n                                label=\\\"Application\\uFF08Multiple Select\\uFF09\\\"\\n                            >\\n                                <Select.Option value=\\\"semi\\\">Semi</Select.Option>\\n                                <Select.Option value=\\\"ulikeCam\\\">UlikeCam</Select.Option>\\n                                <Select.Option value=\\\"xigua\\\">BuzzVideo</Select.Option>\\n                            </Select>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <Form.Cascader\\n                                placeholder=\\\"Choose Area\\\"\\n                                treeData={treeData}\\n                                field='area'\\n                                label='Area\\uFF08Cascader\\uFF09'\\n                                style={style}\\n                            >\\n                            </Form.Cascader>\\n                        </Col>\\n                        <Col span={12}>\\n                            <Form.TreeSelect\\n                                field=\\\"tree\\\"\\n                                style={style}\\n                                label='Node\\uFF08TreeSelect\\uFF09'\\n                                placeholder='Select Service Node'\\n                                treeData={treeData}\\n                                filterTreeNode\\n                            >\\n                            </Form.TreeSelect>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <TagInput \\n                                field=\\\"product\\\"\\n                                label='Product\\uFF08TagInput\\uFF09'\\n                                initValue={['abc', 'ulikeCam']}\\n                                placeholder='Type and choose product name'\\n                                style={style}\\n                            />\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={24}>\\n                            <Form.Upload\\n                                field='files'\\n                                label='Files\\uFF08Upload\\uFF09'\\n                                action='//semi.design/api/upload'\\n                            >\\n                                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                                    Click to upload\\n                                </Button>\\n                            </Form.Upload>\\n                        </Col>\\n                    </Row>\\n                </Section>\\n                <Section text='Source Detail'>\\n                    <Row>\\n                        <Col span={12}>\\n                            <TextArea\\n                                style={style}\\n                                field='description'\\n                                label='Apply Reason\\uFF08TextArea\\uFF09'\\n                            />\\n                        </Col>\\n                        <Col span={12}>\\n                            <CheckboxGroup\\n                                field=\\\"type\\\"\\n                                label='Apply type\\uFF08CheckboxGroup\\uFF09'\\n                                initValue={['user', 'admin']}\\n                                rules={[\\n                                    { Requested: true }\\n                                ]}\\n                            >\\n                                <Checkbox value=\\\"admin\\\">admin</Checkbox>\\n                                <Checkbox value=\\\"user\\\">user</Checkbox>\\n                                <Checkbox value=\\\"guest\\\">guest</Checkbox>\\n                                <Checkbox value=\\\"root\\\">root</Checkbox>\\n                            </CheckboxGroup>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <RadioGroup field=\\\"isMonopolize\\\" label='Whether exclusive resources\\uFF08Radio\\uFF09'>\\n                                <Radio value={1}>Yes</Radio>\\n                                <Radio value={0}>No</Radio>\\n                            </RadioGroup>\\n                        </Col>\\n                        <Col span={12}>\\n                            <CheckboxGroup options={plainOptions} field=\\\"checkbox\\\" label='Type\\uFF08CheckboxGroup\\uFF09' direction='horizontal'/>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <TimePicker field=\\\"time\\\" label='End Time\\uFF08TimePicker\\uFF09' style={{ width: '90%' }}/>\\n                        </Col>\\n                        <Col span={12}>\\n                            <InputNumber field='number' label='Number of applications\\uFF08InputNumber\\uFF09' initValue={20} style={style}/>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <Slider field=\\\"range\\\" label='Resource usage alarm threshold(%)\\uFF08Slider\\uFF09' initValue={10} style={{ width: '90%' }}/>\\n                        </Col>\\n                        <Col span={12}>\\n                            <Switch field='switch' label='Switch(Switch)'/>\\n                        </Col>\\n                    </Row>\\n                    <Row>\\n                        <Col span={12}>\\n                            <Rating field=\\\"rating\\\" label='Satisfaction(Rating)' initValue={2} style={{ width: '90%' }}/>\\n                        </Col>\\n                    </Row>\\n                </Section>\\n                <Checkbox value=\\\"false\\\" field=\\\"agree\\\" noLabel={true}>\\n                    I have read and understood the relevant regulations\\uFF08Checkbox\\uFF09\\n                </Checkbox>\\n                <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">Submit</Button>\\n                <Button htmlType=\\\"reset\\\">Reset</Button>\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Field binding syntax\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Every Field component must have a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \" property. This is how the form manages the state of this field.\\nSee the field syntax section below for additional details on what you can pass in for field.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The field can be a simple string, can be contained\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".\"), \"Or\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[]\"), \"String that supports multi-level nesting\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Below is an example of the field name and their mapping path in FormState\"), 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  }, \"Field\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Resolution\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"username\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.username\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"user\", \"[\", \"0\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.user\", \"[\", \"0\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"siblings.1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.siblings\", \"[\", \"1\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"siblings\", \"[\", \"'2'\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.siblings\", \"[\", \"2\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parents\", \"[\", \"0\", \"]\", \".name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.parents\", \"[\", \"0\", \"]\", \".name\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parents\", \"[\", \"1\", \"]\", \"[\", \"'name'\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.parents\", \"[\", \"1\", \"]\", \".name\")))), 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 { Form, Row, Col, Toast, TextArea } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        onSubmit={values => Toast.info({ content: JSON.stringify(values) })}\\n    >\\n        {\\n            ({ formState, values, formApi }) => (\\n                <Row>\\n                    <Col span={12}>\\n                        <Form.Input field='username' placeholder='Try input something'/>\\n                        <Form.Input field='user[0]' placeholder='Try input something'/>\\n                        <Form.Input field='siblings.1' placeholder='Try input something'/>\\n                        <Form.Input field=\\\"siblings['2']\\\" placeholder='Try input something'/>\\n                        <Form.Input field='parents[0].name' placeholder='Try input something'/>\\n                        <Form.Input field=\\\"parents[1]['name']\\\" placeholder='Try input something'/>\\n                    </Col>\\n                    <Col span={10} offset={1} style={{ marginTop: 12 }}>\\n                        <Form.Label text='formState.values in real time\\uFF1A'></Form.Label>\\n                        <TextArea value={JSON.stringify(formState.values)}></TextArea>\\n                    </Col>\\n                </Row>\\n            )\\n        }\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Form layout\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Vertical Layout: Arrange each field vertically \\uFF08By default\\uFF09\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Semi Design recommends a vertical layout.\")), 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 { Form, Button, Toast } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const handleSubmit = (values) => {\\n        console.log(values);\\n        Toast.info('Submit Success');\\n    };\\n    return (\\n        <Form onSubmit={values => handleSubmit(values)} style={{ width: 400 }}>\\n            {({ formState, values, formApi }) => (\\n                <>\\n                    <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>\\n                    <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>\\n                    <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>\\n                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\\n                        <p>\\n                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>\\n                        </p>\\n                        <Button disabled={!values.agree} htmlType='submit' type=\\\"tertiary\\\">Log in</Button>\\n                    </div>\\n                </>\\n            )}\\n        </Form>\\n    );\\n};\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Horizontal Layout: Arrange each field horizontally\\nYou can use the horizontal layout by setting \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"layout='horizontal'\"))), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form layout='horizontal'>\\n        <Form.Input field='phone' label='PhoneNumber' placeholder='Enter your phone number'></Form.Input>\\n        <Form.Input field='password' label='Password' placeholder='Enter your password'></Form.Input>\\n    </Form>\\n);\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Label Position, Label Align\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"You can control the position of the label in the Field and the direction of text alignment by setting \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"labelPosition\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"labelAlign\"))), 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 { Form, Select, Checkbox, Radio } from '@douyinfe/semi-ui';\\n\\n\\nclass BasicDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            labelPosition: 'left',\\n            labelAlign: 'left',\\n        };\\n    }\\n\\n    render() {\\n        const { labelPosition, labelAlign } = this.state;\\n        const labelWidth = 120;\\n        return (\\n            <>\\n                <div style={{ borderBottom: '1px solid var(--semi-color-text-3)', paddingBottom: 10 }}>\\n                    <Form\\n                        labelPosition='inset'\\n                        layout='horizontal'\\n                        initValues={{ labelPosition: 'left', labelAlign: 'left' }}\\n                        onValueChange={values => this.setState(values)}\\n                    >\\n                        <Form.Select \\n                            field='labelPosition'\\n                            style={{ width: 240 }}\\n                            label='Current Label Position:'\\n                            optionList={[\\n                                { label: 'top', value: 'top' },\\n                                { label: 'left', value: 'left' },\\n                            ]}\\n                        />\\n                        <Form.Select \\n                            field='labelAlign'\\n                            style={{ width: 240 }}\\n                            label='Current Label Align:'\\n                            optionList={[\\n                                { label: 'left', value: 'left' },\\n                                { label: 'right', value: 'right' },\\n                            ]}\\n                        />\\n                    </Form>\\n                </div>\\n                <Form\\n                    labelPosition={labelPosition}\\n                    labelWidth={labelWidth}\\n                    labelAlign={labelAlign}\\n                    style={{ padding: '10px', width: 600 }}>\\n                    <Form.Input\\n                        field=\\\"input\\\"\\n                        label=\\\"PhoneNumber\\\"\\n                        trigger='blur'\\n                        style={{ width: 200 }}\\n                        rules={[\\n                            { required: true, message: 'required Error' },\\n                            { type: 'string', message: 'type error' },\\n                            { validator: (rule, value) => value === 'semi', message: 'not semi' }\\n                        ]}\\n                    />\\n                    <Form.Switch label=\\\"Agree\\\" field='agree'/>\\n                    <Form.InputNumber field='price' label='price' style={{ width: 200 }}/>\\n                    <Form.Select label=\\\"Name\\\" field='name' style={{ width: 200 }}>\\n                        <Form.Select.Option value=\\\"mike\\\">mike</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"jane\\\">jane</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"kate\\\">kate</Form.Select.Option>\\n                    </Form.Select>\\n                    <Form.CheckboxGroup label=\\\"Role\\\" field='role' direction='horizontal'>\\n                        <Checkbox value=\\\"admin\\\">admin</Checkbox>\\n                        <Checkbox value=\\\"user\\\">user</Checkbox>\\n                        <Checkbox value=\\\"guest\\\">guest</Checkbox>\\n                        <Checkbox value=\\\"root\\\">root</Checkbox>\\n                    </Form.CheckboxGroup>\\n                    <Form.RadioGroup field=\\\"Sex\\\">\\n                        <Radio value=\\\"1\\\">man</Radio>\\n                        <Radio value=\\\"2\\\">woman</Radio>\\n                    </Form.RadioGroup>\\n                </Form>\\n            </>\\n        );\\n    }\\n}\\n\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A more complex layout.\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"You can also combine the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Row\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Col\"), \" provided by the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Grid\"), \" to arrange the form structure as you want.\")), 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 { Form, Row, Col } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        labelPosition='top'\\n        getFormApi={this.getFormApi}\\n        style={{ padding: '10px' }}>\\n        <Row>\\n            <Col span={8}>\\n                <Form.Input\\n                    field=\\\"nickName1\\\"\\n                    label=\\\"NickName\\\"\\n                    style={{ width: '250px' }}\\n                    trigger='blur'\\n                    rules={[\\n                        { required: true, message: 'required error' },\\n                        { type: 'string', message: 'type error' },\\n                        { validator: (rule, value) => value === 'semi', message: 'not semi' }\\n                    ]}\\n                />\\n            </Col>\\n            <Col span={8}>\\n                <Form.DatePicker field='date1' label='Valid Date' style={{ width: '250px' }}/>\\n            </Col>\\n            <Col span={8}>\\n                <Form.Select label=\\\"Application\\\" field='business1' style={{ width: '250px' }}>\\n                    <Form.Select.Option value=\\\"abc\\\">Semi</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"hotsoon\\\">Vigo</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"xigua\\\">BussVideo</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n        </Row>\\n        <Row>\\n            <Col span={6}>\\n                <Form.Input\\n                    field=\\\"nickName2\\\"\\n                    label=\\\"NickName\\\"\\n                    style={{ width: '200px' }}\\n                    trigger='blur'\\n                    rules={[\\n                        { required: true, message: 'required error' },\\n                        { type: 'string', message: 'type error' },\\n                        { validator: (rule, value) => value === 'semi', message: 'not semi' }\\n                    ]}\\n                />\\n            </Col>\\n            <Col span={6}>\\n                <Form.DatePicker field='date2' label='Valid Date' style={{ width: '200px' }}/>\\n            </Col>\\n            <Col span={6}>\\n                <Form.Select label=\\\"Application\\\" field='business2' style={{ width: '250px' }}>\\n                    <Form.Select.Option value=\\\"abc\\\">Semi</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"hotsoon\\\">Vigo</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"xigua\\\">BussVideo</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n            <Col span={6}>\\n                <Form.Select field=\\\"role\\\" style={{ width: '250px' }} label='Role\\uFF08Select\\uFF09' placeholder='Choose role'>\\n                    <Form.Select.Option value=\\\"qa\\\">Quality Assurance</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"rd\\\">Software Engineer</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"pm\\\">Product Manager</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"ued\\\">Designer</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n        </Row>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"wrapper Col / label Col\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need to set a uniform layout for all Fields in a Form, you can set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrapperCol\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelCol\"), \" on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \" to quickly generate the layout. No need to manually use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Row\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Col\"), \" manual layout.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrapperCol\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelCol\"), \"Property Configuration Reference \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid#Col\"\n  }, \"Col components\")), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        wrapperCol={{ span: 20 }}\\n        labelCol={{ span: 2 }}\\n        labelPosition='left'\\n        labelAlign='right'\\n    >\\n        <Form.Input field='name' style={{ width: 250 }} label='Name' placeholder='Input Name' trigger='blur' />\\n        <Form.Select field=\\\"role\\\" label='Role' placeholder='Choose Role' style={{ width: 250 }}>\\n            <Form.Select.Option value=\\\"qa\\\">Quality Assurance</Form.Select.Option>\\n            <Form.Select.Option value=\\\"rd\\\">Software Engineer</Form.Select.Option>\\n            <Form.Select.Option value=\\\"pm\\\">Product Manager</Form.Select.Option>\\n            <Form.Select.Option value=\\\"ued\\\">Designer</Form.Select.Option>\\n        </Form.Select>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Remove automatically added Label\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Form will automatically insert \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Label\"), \" for Field control. If you don't need to automatically insert the Label module, you can turn off the automatic label insertion function by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"noLabel=true\"), \" in the Field (at this time, the Field still has the ability to automatically display ErrorMessage, so the DOM structure is still different from the original component)\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If you want to keep the DOM structure consistent with the original component, you can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pure=true\"), \". At this time, the DOM structure will not change except that the data flow is taken over (you need to be responsible for the rendering of ErrorMessage, and it cannot be used by formProps.wrapperCol property impact)\"), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form onSubmit={(values) => console.log(values)} style={{ width: 400 }}>\\n        <Form.Input\\n            field='name'\\n            label='Name'\\n            trigger='blur'\\n            noLabel={true}\\n            style={{ width: 250 }}\\n            validate={val => val !== 'semi' ? 'not semi' : '' }\\n            placeholder='Type your name'\\n        />\\n        <Form.Input field='purename' pure placeholder='DOM same as origin Input component'/>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Embedded Label\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A Label can be inlined in a field control by setting labelPosition to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"inset\"), \". Components currently supporting this feature include \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"InputNumber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DatePicker\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TimePicker\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Select\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeSelect\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Cascader\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TagInput\")), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form labelPosition='inset' layout='horizontal'>\\n        <Form.Input field='name' label='Name' trigger='blur' style={{ width: 250 }} initValue='semi'/>\\n        <Form.Select field=\\\"role\\\" label='Role' style={{ width: '250px' }} initValue='rd'>\\n            <Form.Select.Option value=\\\"operate\\\">operate</Form.Select.Option>\\n            <Form.Select.Option value=\\\"rd\\\">rd</Form.Select.Option>\\n            <Form.Select.Option value=\\\"pm\\\">pm</Form.Select.Option>\\n            <Form.Select.Option value=\\\"ued\\\">ued</Form.Select.Option>\\n        </Form.Select>\\n        <Form.DatePicker field=\\\"date\\\" label='StartDate' style={{ width: '250px' }} initValue={new Date()}>\\n        </Form.DatePicker>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Export Label, ErrorMessage use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When the built-in Label and ErrorMessage layout does not meet the business requirements, you need to combine the positions yourself, but you want to use the default styles of Label and ErrorMessage directly.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"you can import them from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \" module, and combine \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Label\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.ErrorMessage\"), \" by yourself.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"For details of their API, refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.Label\"\n  }, \"Label\"), \" / \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.ErrorMessage\"\n  }, \"ErrorMessage\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Label, ErrorMessage } = Form;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use Form.Slot\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When your custom component needs to maintain the same layout style as the Field component, you can place your custom component in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Slot\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelWidth\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelAlign\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrapperCol\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelCol\"), \" set on the Form component automatically acts on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Slot\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"For the Slot property configuration, refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.Slot\"\n  }, \"Form.Slot\")), 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 { Form } from '@douyinfe/semi-ui';\\n\\nclass AssistComponent extends React.Component {\\n    render() {\\n        return (\\n            <Form\\n                onChange={v=>console.log(v)}\\n                onSubmit={v=>console.log(v)}\\n                style={{ width: 600 }}\\n                labelPosition='left'\\n                labelWidth={100}\\n            >\\n                <Form.Input field='effectName' label='EffectName' style={{ width: 250 }}/>\\n                <Form.ErrorMessage />\\n                <Form.Slot label={{ text: 'SlotA' }}>\\n                    <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>\\n                        {`I'm Semi Form SlotA, a custom ReactNode`}\\n                    </div>\\n                </Form.Slot>\\n                <Form.Slot label={{ text: 'SlotB', width: 160, align: 'right' }}>\\n                    <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>\\n                        {`I'm Semi Form SlotA, i have different labelWidth and textAlign.`}\\n                    </div>\\n                </Form.Slot>\\n            </Form>\\n        );}\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use helpText\\u3001extraText set prompt information\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can place custom prompt information through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"helpText\"), \", and display it in the same block as the verification information (error). When both have values, the verification information will be displayed first.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Additional prompt information can be placed through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extraText\"), \". When the error message and prompt text need to appear at the same time, this configuration can be used. It is always displayed and located after helpText/error\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"validateStatus\"), \" is passed in, the UI style corresponding to the value of validateStatus will be displayed first. If not passed in, the internal verification status of the field shall prevail.  \"), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [helpText, setHelpText] = useState('');\\n    const [validateStatus, setValidateStatus] = useState('default');\\n    const formRef = useRef();\\n\\n    const validate = (val, values) => {\\n        if (!val) {\\n            setValidateStatus('error');\\n            return <span>Password can not be blank</span>;\\n        } else if (val && val.length <= 3) {\\n            setValidateStatus('warning');\\n            setHelpText(<span style={{ color: 'var(--semi-color-warning)' }}>Password Strength: Weak</span>); // show helpText\\n            return ''; // validate pass\\n        } else {\\n            setHelpText('');\\n            setValidateStatus('success');\\n            return '';\\n        }\\n    };\\n\\n    const random = () => {\\n        let pw = (Math.random() * 100000).toString().slice(0, 5);\\n        formRef.current.formApi.setValue('Password', pw);\\n        formRef.current.formApi.setError('Password', '');\\n        setHelpText('');\\n        setValidateStatus('success');\\n    };\\n\\n    return (\\n        <Form\\n            showValidateIcon={true}\\n            ref={formRef}\\n            onSubmit={(value) => console.log('submit success')}\\n            onSubmitFail={(errors) => console.log(errors)}\\n        >\\n            <Form.Input\\n                validate={validate}\\n                field=\\\"Password\\\"\\n                validateStatus={validateStatus}\\n                helpText={helpText}\\n                extraText={\\n                    <div\\n                        style={{\\n                            color: 'var(--semi-color-link)',\\n                            fontSize: 14,\\n                            userSelect: 'none',\\n                            cursor: 'pointer'\\n                        }}\\n                        onClick={random}\\n                    >\\n                        Don't have a suitable password? Click to generate a random\\n                    </div>\\n                }\\n            ></Form.Input>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By configuring \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extraTextPosition\"), \", you can control the display position of extraText. Optional values \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"middle\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"For example, when you want to display the extraText prompt information between the Label and Field component.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"This attribute can be configured uniformly on the Form or individually on each Field. When passing in at the same time, the configuration of the Field shall prevail.  \"), 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 { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const options = [\\n        { label: 'Lark Notification', value: 'lark' },\\n        { label: 'Email Notification', value: 'email' },\\n        { label: 'Banner Notification', value: 'notification' }\\n    ];\\n    const notifyText = \\\"When unchecked, the default is a red dot reminder, and the message enters the recipient's message list by default. For important notifications, you can check the corresponding notification methods at the same time\\\";\\n    const forceText = \\\"For dialog notifications, you can specify that the message must wait for a specified amount of time before it can be marked as read.\\\";\\n    return (\\n        <Form extraTextPosition='middle'>\\n            <Form.CheckboxGroup\\n                direction='horizontal'\\n                field='notify'\\n                label='Method to informe'\\n                extraText={notifyText}\\n                options={options}\\n            />\\n            <Form.InputNumber field='force' label='Force read (optional)' placeholder='seconds' extraText={forceText} extraTextPosition='bottom'/>\\n        </Form>\\n    );\\n};\\n\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Using Input Group\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need to combine some fields to use, you can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.InputGroup\"), \" to wrap them.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"In Semi Form, when you using field components like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Input\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Select\"), \", Form will insert Label module automatically for them.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"But usually, in\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"InputGroup\"), \" you only need a Label belonging to the entire Group.\\nYou can set the label property in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"InputGroup\"), \" to insert a Label belonging to the Group\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" configurable properties, see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.Label\"\n  }, \"Label\")), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form onSubmit={(values) => console.log(values)} labelPosition='top' style={{ width: 400 }}>\\n        <Form.InputGroup label={{ text: (<span>PhoneNumber</span>), required: true }} labelPosition='top'>\\n            <Form.Select style={{ width: 150 }} field='phonePrefix' initValue='+86' rules={[{ required: true }]} showClear>\\n                <Form.Select.Option value='+1'>USA +1</Form.Select.Option>\\n                <Form.Select.Option value='+86'>China +86</Form.Select.Option>\\n                <Form.Select.Option value='+81'>Japan+81</Form.Select.Option>\\n            </Form.Select>\\n            <Form.Input initValue='18912345678' style={{ width: 250 }} field='phoneNumber' rules={[{ required: true }]} showClear/>\\n        </Form.InputGroup>\\n        <Form.Input field='name' trigger='blur' initValue='Semi' label='Name'></Form.Input>\\n        <Button htmlType='submit'>Submit</Button>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Form in the Modal pop-up layer\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can place the Form in Modal and load it as a popup.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When submitting, use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.validate()\"), \" to centrally verify the Field\"), 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 { Form, Modal, Select, Button, Row, Col } from '@douyinfe/semi-ui';\\n\\n\\nclass ModalFormDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            visible: false,\\n        };\\n        this.showDialog = this.showDialog.bind(this);\\n        this.handleOk = this.handleOk.bind(this);\\n        this.handleCancel = this.handleCancel.bind(this);\\n        this.getFormApi = this.getFormApi.bind(this);\\n    }\\n\\n    showDialog() {\\n        this.setState({ visible: true });\\n    }\\n\\n    handleOk() {\\n        this.formApi.validate()\\n            .then((values) => {\\n                console.log(values);\\n            })\\n            .catch((errors) => {\\n                console.log(errors);\\n            });\\n    }\\n\\n    handleCancel() {\\n        this.setState({ visible: false });\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    render() {\\n        const { visible } = this.state;\\n        let message = 'Required';\\n        return (\\n            <>\\n                <Button onClick={this.showDialog}>Open Dialog</Button>\\n                <Modal\\n                    title=\\\"New\\\"\\n                    visible={visible}\\n                    onOk={this.handleOk}\\n                    style={{ width: 600 }}\\n                    onCancel={this.handleCancel}\\n                >\\n                    <Form\\n                        getFormApi={this.getFormApi}\\n                    >\\n                        <Row>\\n                            <Col span={7}>\\n                                <Form.Select\\n                                    field='region'\\n                                    label=\\\"Country/Region\\\"\\n                                    style={{ width: 120 }}\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                    optionList={[\\n                                        { label: 'China', value: 'China' },\\n                                        { label: 'USA', value: 'US' },\\n                                        { label: 'Europe', value: 'Europe' },\\n                                        { label: 'Japan', value: 'Japan' },\\n                                    ]}\\n                                >\\n                                </Form.Select>\\n                            </Col>\\n                            <Col span={17}>\\n                                <Form.Input\\n                                    field='owner'\\n                                    label=\\\"Owner\\\"\\n                                    trigger='blur'\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                />\\n                            </Col>\\n                            <Col span={7}>\\n                                <Form.Select\\n                                    field='area'\\n                                    label=\\\"Area\\\"\\n                                    placeholder='Choose Area'\\n                                    style={{ width: 120 }}\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                >\\n                                    <Form.Select.Option value=\\\"China\\\">China</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"US\\\">USA</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Europe\\\">Europe</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Japan\\\">Japan</Form.Select.Option>\\n                                </Form.Select>\\n                            </Col>\\n                            <Col span={17}>\\n                                <Form.Input\\n                                    field='department'\\n                                    label=\\\"Department\\\"\\n                                    trigger='blur'\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                />\\n                            </Col>\\n                        </Row>\\n                    </Form>\\n                </Modal>\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Configure initial values and verification rules\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can configure check rules for each Field through \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rules\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"The verification library inside the Form is based on \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"async-validator\"), \", and more configuration rules can be found in its \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/yiminghe/async-validator\"\n  }, \"official documentation\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can uniformly set the initial value for the entire form through the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"initValues\"), \" of form, or you can set the initial value through \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"initValue\"), \" in each field (the latter has a higher priority)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can configure different verification trigger timings for each Field through \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"trigger\"), \", and the default is \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"change\"), \" (that is, when onChange is triggered, the verification is performed automatically). Also supports \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"change\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"blur\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mount\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"custom\"), \" or a combination of the above. After v2.42, it supports unified configuration through FormProps. If both are configured, FieldProps shall prevail\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can use the `stopValidateWithError`` switch to decide whether to continue to trigger the validation of subsequent rules when the first rule that fails the validation is encountered. After v2.42, unified configuration through FormProps is supported. If both are configured, FieldProps shall prevail\")), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    \\n    const initValues = {\\n        name: 'semi',\\n        shortcut: 'se'\\n    };\\n    \\n    const style = { width: '100%' };\\n    \\n    const { Select, Input } = Form;\\n\\n    return (\\n        <Form initValues={initValues}>\\n            <Input\\n                field=\\\"name\\\"\\n                style={style}\\n                trigger='blur'\\n                rules={[\\n                    { required: true, message: 'required error' },\\n                    { type: 'string', message: 'type error' },\\n                    { validator: (rule, value) => value === 'semi', message: 'should be semi' },\\n                    { validator: (rule, value) => Boolean(value && value.startsWith('se')), message: 'should startsWith se' }\\n                ]}\\n            />\\n            <Input\\n                field=\\\"shortcut\\\"\\n                style={style}\\n                stopValidateWithError\\n                rules={[\\n                    { required: true, message: 'required error' },\\n                    { type: 'string', message: 'type error' },\\n                    { validator: (rule, value) => value === 'semi', message: 'should be semi' },\\n                    { validator: (rule, value) => Boolean(value && value.startsWith('se')), message: 'should startsWith se' }\\n                ]}\\n            />\\n            <Button htmlType='submit'>\\u63D0\\u4EA4</Button>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Validate (Form Level)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set a custom validation function validateFields for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"form\"), \" as a whole, which will be called when submit\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Synchronous Validate\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When validate success, you should return an empty string.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When validate fails, you should return the error message (Object, key is fieldName, value is the corresponding error message)\"), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormLevelValidateSync extends React.Component {\\n    constructor() {\\n        super();\\n        this.syncValidate = this.syncValidate.bind(this);\\n    }\\n\\n    syncValidate(values) {\\n        const errors = {};\\n        if (values.name !== 'mike') {\\n            errors.name = 'you must name mike';\\n        }\\n        if (values.sex !== 'female') {\\n            errors.sex = 'must be woman';\\n        }\\n        errors.familyName = [\\n            { before: 'before errror balabala ', after: 'after error balabala' },\\n            'familyName[1] error balabala'\\n        ];\\n        return errors;\\n    }\\n\\n    render() {\\n        return (\\n            <Form validateFields={this.syncValidate} layout='horizontal'>\\n                <Form.Input field='name' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].after' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[1]' trigger='blur'></Form.Input>\\n                <div style={{ display: 'flex', alignItems: 'flex-end' }}>\\n                    <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                        Submit\\n                    </Button>\\n                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                </div>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Asynchronous Validate\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For asynchronous validation, you should return a promise. In promise.then() you need to return the corresponding error message.\"), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormLevelValidateAsync extends React.Component {\\n    constructor() {\\n        super();\\n        this.asyncValidate = this.asyncValidate.bind(this);\\n    }\\n\\n    asyncValidate(values) {\\n        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\n        return sleep(2000).then(() => {\\n            let errors = {};\\n            if (values.name !== 'mike') {\\n                errors.name = 'you must name mike';\\n            }\\n            if (values.sex !== 'female') {\\n                errors.sex = 'sex not valid';\\n            }\\n            return errors;\\n        });\\n    }\\n\\n    render() {\\n        return (\\n            <Form validateFields={this.asyncValidate} layout='horizontal'>\\n                <Form.Input field='name' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[1]' trigger='blur'></Form.Input>\\n                <Form.Input field='sex' trigger='blur'></Form.Input>\\n                <div style={{ display: 'flex', alignItems: 'flex-end' }}>\\n                    <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                        Submit\\n                    </Button>\\n                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                </div>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Validate (Field Level)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can specify a custom validation function for field. Supports synchronous and asynchronous validation (by returning promises)\"), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FieldLevelValidateDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.validateName = this.validateName.bind(this);\\n        this.asyncValidate = this.asyncValidate.bind(this);\\n    }\\n\\n    validateName(val) {\\n        if (!val) {\\n            return '\\u3010sync\\u3011can\\\\'t be empty';\\n        } else if (val.length <= 5) {\\n            return '\\u3010sync\\u3011must more than 5';\\n        }\\n        return '';\\n    }\\n\\n    asyncValidate(val, values) {\\n        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\n        return sleep(2000).then(() => {\\n            if (!val) {\\n                return '\\u3010async\\u3011can\\\\'t be empty';\\n            } else if (val.length <= 5) {\\n                return '\\u3010async\\u3011must more than 5';\\n            } else {\\n                return '';\\n            }\\n        });\\n    }\\n\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' label='\\u3010name\\u3011asyncValidate after 2s' validate={this.asyncValidate} trigger='blur'></Form.Input>\\n                <Form.Input field='familyName' label='\\u3010familyName\\u3011syncValidate' validate={this.validateName} trigger='blur'></Form.Input>\\n                <Button htmlType=\\\"reset\\\">reset</Button>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Manually Trigger specified validation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you want to manually trigger the validation of some specific Field, you can do it through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.validate\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When no parameters are passed in, all Fields are checked by default. When parameters are passed in, the parameters specified shall prevail\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Silent Validation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need to get the validation result without triggering UI updates (no error messages shown, no touched state set), you can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.validate({ silent: true })\"), \". This is useful in scenarios where you want to decide whether to make a backend request based on the validation result.\"), 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 { Form, Button, Toast } from '@douyinfe/semi-ui';\\n\\nclass SilentValidationDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.handleSilentValidate = this.handleSilentValidate.bind(this);\\n        this.handleNormalValidate = this.handleNormalValidate.bind(this);\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    handleSilentValidate() {\\n        this.formApi.validate({ silent: true })\\n            .then(values => {\\n                Toast.success('Validation passed, ready to send request');\\n                console.log('Sending backend request:', values);\\n            })\\n            .catch(errors => {\\n                Toast.error('Validation failed, but no error UI shown');\\n                console.log('Validation errors:', errors);\\n            });\\n    }\\n\\n    handleNormalValidate() {\\n        this.formApi.validate()\\n            .then(values => {\\n                Toast.success('Validation passed');\\n            })\\n            .catch(errors => {\\n                Toast.error('Validation failed, showing error UI');\\n            });\\n    }\\n\\n    render() {\\n        return (\\n            <Form getFormApi={this.getFormApi} layout='horizontal'>\\n                <Form.Input\\n                    field=\\\"username\\\"\\n                    label=\\\"Username\\\"\\n                    rules={[{ required: true, message: 'Username is required' }, { min: 3, message: 'Username must be at least 3 characters' }]}\\n                />\\n                <Form.Input\\n                    field=\\\"email\\\"\\n                    label=\\\"Email\\\"\\n                    rules={[{ required: true, message: 'Email is required' }, { type: 'email', message: 'Invalid email format' }]}\\n                />\\n                <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>\\n                    <Button onClick={this.handleSilentValidate} type=\\\"primary\\\">Silent Validate (no error UI)</Button>\\n                    <Button onClick={this.handleNormalValidate}>Normal Validate (shows error UI)</Button>\\n                </div>\\n            </Form>\\n        );\\n    }\\n}\\n\")), 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 { Form, Button, Space } from '@douyinfe/semi-ui';\\nclass PartValidAndResetDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.validate = this.validate.bind(this);\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.validatePartial = this.validatePartial.bind(this);\\n        this.resetPartial = this.resetPartial.bind(this);\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    validate(val) {\\n        if (!val) {\\n            return 'can\\\\'t be empty';\\n        } else if (val.length <= 5) {\\n            return (<span>i am incoming reactNode</span>);\\n        }\\n        return;\\n    }\\n\\n    validatePartial(type) {\\n        let scope = this.formApi.getValue('validateScope');\\n        !scope ? scope = [] : null;\\n        type === 'all' ? scope = ['a', 'b', 'c', 'd', 'b.name'] : null;\\n        this.formApi.validate(scope)\\n            .then(values => {\\n                console.log(values);\\n                Toast.success('pass');\\n            }).catch(error => {\\n                Toast.error('error');\\n                console.log(error);\\n            });\\n    }\\n\\n    resetPartial() {\\n        let scope = this.formApi.getValue('resetScope');\\n        this.formApi.reset(scope);\\n    }\\n\\n    render() {\\n        let options = ['a', 'b', 'c', 'd', 'b.name'].map(item => ({ label: item, value: item }));\\n        return (\\n            <Form getFormApi={this.getFormApi} autoScrollToError layout='horizontal'>\\n                {\\n                    ({ formState, values, formApi }) => (\\n                        <>\\n                            <div>\\n                                <Form.Input field=\\\"a[1]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"a[0]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.name[0]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.name[1]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.type\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"c\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"d\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                            </div>\\n                            <div>\\n                                <Form.CheckboxGroup options={options} field=\\\"validateScope\\\" label=\\\"The Field you want to validate currently\\\" initValue={['a', 'b']} direction=\\\"horizontal\\\" />\\n                                <Form.CheckboxGroup options={options} field=\\\"resetScope\\\" label=\\\"The Field you want to reset currently\\\" direction=\\\"horizontal\\\" />\\n                                <Space>\\n                                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                                    <Button onClick={() => this.validatePartial('all')}>all validate</Button>\\n                                    <Button onClick={() => this.validatePartial()}>partial validate {JSON.stringify(values.validateScope)}</Button>\\n                                    <Button onClick={this.resetPartial}>partial reset</Button>\\n                                </Space>\\n                            </div>\\n                        </>\\n                    )\\n                }\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Linkage Fields\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can achieve the linkage between Fields by listening to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" of Field and then using formApi to make modifications.\"), 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 { Form, Button, Row } from '@douyinfe/semi-ui';\\n\\nclass LinkFieldForm extends React.Component {\\n    constructor() {\\n        super();\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.handleSelectChange = this.handleSelectChange.bind(this);\\n    }\\n\\n    handleSelectChange(value) {\\n        let text = value === 'male' ? 'Hi male' : 'Hi female!';\\n        this.formApi.setValue('Note', text);\\n    }\\n\\n    getFormApi(formApi) { this.formApi = formApi; }\\n\\n    render() {\\n        return (\\n            <Form getFormApi={this.getFormApi} onValueChange={values => console.log(values) } style={{ width: 300 }}>\\n                <Form.Input field=\\\"Note\\\" style={{ width: 300 }} placeholder='Automatically update after choose Sex'/>\\n                <Form.Select field=\\\"Sex\\\" onChange={this.handleSelectChange} style={{ width: 300 }}>\\n                    <Form.Select.Option value=\\\"female\\\">female</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"male\\\">male</Form.Select.Option>\\n                </Form.Select>\\n                <Row>\\n                    <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                        Submit\\n                    </Button>\\n                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                </Row>\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Dynamic form\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Dynamically add and delete fields\"), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form style={{ width: 450 }}>\\n        {({ formState }) => (\\n            <React.Fragment>\\n                <Form.Input field=\\\"name\\\" label='Name' />\\n                <Form.RadioGroup field=\\\"isAnchor\\\" label='Is registered anchor'>\\n                    <Form.Radio value=\\\"yes\\\">yes</Form.Radio>\\n                    <Form.Radio value=\\\"no\\\">no</Form.Radio>\\n                </Form.RadioGroup>\\n                {formState.values.isAnchor === 'yes' ? (\\n                    <Form.Input field=\\\"liveRoom\\\" label='Live room name' />\\n                ) : null}\\n                <Button htmlType=\\\"submit\\\">Submit</Button>\\n            </React.Fragment>\\n        )}\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ArrayField Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For array items that are dynamically added or deleted, we provide the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ArrayField\"), \" component to simplify the operation of add / remove\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For the detailed API of ArrayField, please refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#arrayfield-props\"\n  }, \"ArrayField Props\"), \" below\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note: The initValue type of ArrayField must be an array\")), 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 { ArrayField, TextArea, Form, Button, useFormState } from '@douyinfe/semi-ui';\\nimport { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';\\n\\nclass ArrayFieldDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            data: [\\n                { name: 'Semi D2C', role: 'Engineer' },\\n                { name: 'Semi C2D', role: 'Designer' },\\n            ]\\n        };\\n    }\\n\\n    render() {\\n        let { data } = this.state;\\n        const ComponentUsingFormState = () => {\\n            const formState = useFormState();\\n            return (\\n                <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState)} />\\n            );\\n        };\\n        return (\\n            <Form style={{ width: 800 }} labelPosition='left' labelWidth='100px' allowEmpty>\\n                <ArrayField field='rules' initValue={data}>\\n                    {({ add, arrayFields, addWithInitValue }) => (\\n                        <React.Fragment>\\n                            <Button onClick={add} icon={<IconPlusCircle />} theme='light'>Add new line</Button>\\n                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: 'Semi DSM', type: 'Designer' });}} style={{ marginLeft: 8 }}>Add new line with init value</Button>\\n                            {\\n                                arrayFields.map(({ field, key, remove }, i) => (\\n                                    <div key={key} style={{ width: 1000, display: 'flex' }}>\\n                                        <Form.Input\\n                                            field={`${field}[name]`}\\n                                            label={`${field}.name`}\\n                                            style={{ width: 200, marginRight: 16 }}\\n                                        >\\n                                        </Form.Input>\\n                                        <Form.Select\\n                                            field={`${field}[role]`}\\n                                            label={`${field}.role`}\\n                                            style={{ width: 120 }}\\n                                            optionList={[\\n                                                { label: 'Engineer', value: 'Engineer' },\\n                                                { label: 'Designer', value: 'Designer' },\\n                                            ]}\\n                                        >\\n                                        </Form.Select>\\n                                        <Button\\n                                            type='danger'\\n                                            theme='borderless'\\n                                            icon={<IconMinusCircle />}\\n                                            onClick={remove}\\n                                            style={{ margin: 12 }}\\n                                        />\\n                                    </div>\\n                                ))\\n                            }\\n                        </React.Fragment>\\n                    )}\\n                </ArrayField>\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Nesting ArrayField\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"ArrayField supports multi-level nesting. The following is an example of two-level nesting.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import { Form, ArrayField, Button, Card, Typography, } from \\\"@douyinfe/semi-ui\\\";\\nimport { IconPlusCircle, IconMinusCircle } from \\\"@douyinfe/semi-icons\\\";\\nimport React from \\\"react\\\";\\n\\nconst initValue = {\\n    group: [\\n        {\\n            name: \\\"Email filtering rule 1\\\",\\n            rules: [\\n                { itemName: \\\"Sender address\\\", type: \\\"include\\\" },\\n                { itemName: \\\"Email Title\\\", type: \\\"exclude\\\" },\\n            ],\\n        },\\n        {\\n            name: \\\"Email filtering rule 2\\\",\\n            rules: [\\n                { itemName: \\\"Send time\\\", type: \\\"include\\\" }\\n            ],\\n        },\\n    ]\\n};\\n\\nconst NestedField = (props) => {\\n    const rowStyle = {\\n        marginTop: 12,\\n        marginLeft: 12,\\n    };\\n    return (\\n        <ArrayField field={`${props.field}.rules`}>\\n            {({ add, arrayFields, addWithInitValue }) => (\\n                <React.Fragment>\\n                    {arrayFields.map(({ field, key, remove }, i) => (\\n                        <div style={{ display: \\\"flex\\\" }} key={key}>\\n                            <Form.Input\\n                                field={`${field}[itemName]`}\\n                                label={`${field}.itemName`}\\n                                noLabel\\n                                style={{ width: 140, marginRight: 12 }}\\n                            ></Form.Input>\\n                            <Form.Select\\n                                field={`${field}[type]`}\\n                                label={`${field}.type`}\\n                                noLabel\\n                                style={{ width: 140 }}\\n                                optionList={[\\n                                    { label: \\\"Include\\\", value: \\\"include\\\" },\\n                                    { label: \\\"Exclude\\\", value: \\\"exclude\\\" },\\n                                ]}\\n                            ></Form.Select>\\n                            <Button\\n                                type=\\\"danger\\\"\\n                                theme=\\\"borderless\\\"\\n                                style={rowStyle}\\n                                icon={<IconMinusCircle />}\\n                                onClick={remove}\\n                            />\\n                            <Button\\n                                icon={<IconPlusCircle />}\\n                                style={rowStyle}\\n                                disabled={i !== arrayFields.length - 1}\\n                                onClick={() => {\\n                                    addWithInitValue({\\n                                        itemName: `Condition ${arrayFields.length + 1}`,\\n                                        type: \\\"include\\\",\\n                                    });\\n                                }}\\n                            />\\n                        </div>\\n                    ))}\\n                </React.Fragment>\\n            )}\\n        </ArrayField>\\n    );\\n};\\n\\nconst NestArrayFieldDemo = () => {\\n    return (\\n        <Form\\n            onValueChange={(values) => console.log(values)}\\n            initValues={initValue}\\n            labelPosition=\\\"left\\\"\\n            style={{ textAlign: \\\"left\\\" }}\\n            allowEmpty\\n        >\\n            <ArrayField field=\\\"group\\\" >\\n                {({ add, arrayFields, addWithInitValue }) => (\\n                    <React.Fragment>\\n                        <Button\\n                            icon={<IconPlusCircle />}\\n                            theme=\\\"solid\\\"\\n                            onClick={() => {\\n                                addWithInitValue({\\n                                    name: \\\"New Rule\\\",\\n                                    rules: [\\n                                        { itemName: \\\"Main Text\\\", type: \\\"include\\\" },\\n                                        { itemName: \\\"Accessory name\\\", type: \\\"include\\\" },\\n                                    ],\\n                                });\\n                            }}\\n                        >\\n                            Add receiving rules\\n                        </Button>\\n                        {arrayFields.map(({ field, key, remove }, i) => (\\n                            <div\\n                                key={key}\\n                                style={{ width: 1000, display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}\\n                            >\\n                                <Form.Input\\n                                    field={`${field}[name]`}\\n                                    labelPosition=\\\"top\\\"\\n                                    label={\\\"RuleName\\\"}\\n                                    style={{ width: \\\"600px\\\" }}\\n                                ></Form.Input>\\n                                <Button\\n                                    type=\\\"danger\\\"\\n                                    theme=\\\"borderless\\\"\\n                                    style={{ margin: \\\"36px 0 0 12px\\\" }}\\n                                    icon={<IconMinusCircle />}\\n                                    onClick={remove}\\n                                />\\n                                <Typography.Text strong style={{ flexBasis: \\\"100%\\\" }}>\\n                                    When the mail arrives, the following conditions are met:\\n                                </Typography.Text>\\n                                <Card\\n                                    shadow=\\\"hover\\\"\\n                                    style={{\\n                                        width: 620,\\n                                        margin: \\\"12px 0 0 24px\\\",\\n                                    }}\\n                                >\\n                                    <NestedField field={field} />\\n                                </Card>\\n                            </div>\\n                        ))}\\n                    </React.Fragment>\\n                )}\\n            </ArrayField>\\n        </Form>\\n    );\\n};\\n\\nrender(NestArrayFieldDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Add or delete form items dynamically - by use formApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you don't use ArrayField, you can use the provided formApi to manually add or delete formState.\"), 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 { Form, Button, TextArea } from '@douyinfe/semi-ui';\\n\\nclass ArrayDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            initValues: {\\n                effects: [\\n                    { name: 'Face stickers', type: '2D', key: 1 },\\n                    { name: 'Background sticker', type: '3D', key: 2 },\\n                ]\\n            }\\n        };\\n        this.id = 3;\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.add = this.add.bind(this);\\n        this.remove = this.remove.bind(this);\\n        this.renderItems = this.renderItems.bind(this);\\n    }\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n    add(obj) {\\n        let effects = this.formApi.getValue('effects');\\n        if (!effects) {\\n            effects = [];\\n        }\\n        effects.push({ name: '', type: '', key: this.id++ });\\n        this.formApi.setValue('effects', effects);\\n    }\\n    remove(key) {\\n        let effects = this.formApi.getValue('effects');\\n        effects = effects.filter((effect, index) => key !== effect.key);\\n        if (!effects.length) {\\n            effects = undefined;\\n        }\\n        this.formApi.setValue('effects', effects);\\n    }\\n    renderItems(formState, values) {\\n        return values.effects && values.effects.map((effect, i) => (\\n            <div key={effect.key} style={{ width: 1000, display: 'flex' }}>\\n                <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 12 }}></Form.Input>\\n                <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}>\\n                    <Form.Select.Option value='2D'>2D</Form.Select.Option>\\n                    <Form.Select.Option value='3D'>3D</Form.Select.Option>\\n                </Form.Select>\\n                <Button type='danger' onClick={() => this.remove(effect.key)} style={{ margin: 12 }}>Remove</Button>\\n            </div>\\n        ));\\n    }\\n    render() {\\n        let { initValues } = this.state;\\n        return (\\n            <Form\\n                getFormApi={this.getFormApi}\\n                initValues={initValues}\\n                style={{ width: 500 }}\\n                labelPosition='left'\\n                labelWidth='180px'\\n            >\\n                {({ formState, values }) => (\\n                    <>\\n                        <Button onClick={this.add}>add</Button>\\n                        {this.renderItems(formState, values)}\\n                        <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState.values)} />\\n                    </>\\n                )}\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use of Hook\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We provide four Hooks so that you can easily access Form internal state and call Form and Field related api in Functional Component which placed inside the Form structure without passing through props.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { useFormApi, useFormState, useFieldApi, useFieldState } from '@douyinfe/semi-ui';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useFormApi\"), \" allows you to directly access the formApi of the parent Form component within Functional Component via hook\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFormApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFormApi = () => {\\n    const formApi = useFormApi();\\n    const change = () => {\\n        formApi.setValue('name', Math.random());\\n    };\\n    return (\\n        <Button onClick={change}>ChangeName By\\u3010formApi\\u3011</Button>\\n    );\\n};\\n\\nclass UseFromApiDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <ComponentUsingFormApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFromApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useFormState\"), \" allows you to directly access the form State of the parent Form component within Functional Component via hook\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFormState, Form } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass UseFromStateDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <h5>FormState read by \\u3010useFormState\\u3011\\uFF1A</h5>\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFromStateDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFieldApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useFieldApi\"), \" allows you to call the api of the specified Field directly within Functional Component via hook\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFieldApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFieldApi = () => {\\n    const nameFieldApi = useFieldApi('name');\\n    const change = () => {\\n        nameFieldApi.setValue(Math.random());\\n    };\\n    return (\\n        <Button onClick={change}>Click Me!!! changeNameBy\\u3010fieldApi\\u3011</Button>\\n    );\\n};\\n\\nclass UseFieldApiDemo extends React.PureComponent {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <ComponentUsingFieldApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFieldApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFieldState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useFieldState\"), \" allows you to directly access the State of the specified Field within Functional Component via hook\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFieldState, Form } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFieldState = props => {\\n    const fieldState = useFieldState(props.field);\\n    return (\\n        <div style={props.style}>\\n            <span>\\u3010{props.field}\\u3011FieldState read by \\u3010useFieldState\\u3011\\uFF1A</span>\\n            <code>{JSON.stringify(fieldState)}</code>\\n        </div>\\n    );\\n};\\nclass UseFieldStateDemo extends React.PureComponent {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <Form.Input field='role' initValue='designer'></Form.Input>\\n                <div style={{ width: 500, marginTop: 12 }}>\\n                    <ComponentUsingFieldState field='name' style={{ marginTop: 0 }} />\\n                    <ComponentUsingFieldState field='role' style={{ marginTop: 12 }} />\\n                </div>\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFieldStateDemo);\\n\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use of HOC\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We provided two HOC: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormApi\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormState\"), \", you can access the API of the Form and the internal state within other components\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Provided HOC: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withField\"), \", to encapsulating custom components as Field that conform the Semi Form data flow.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { withFormApi, withFormState, withField } from '@douyinfe/semi-ui';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"HOC - withFormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can encapsulate the component via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormApi\"), \" HOC so that the formApi of the parent Form component can be called directly inside the component\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Note that the encapsulated components must be placed inside the Form structure.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withFormApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst SomeComponetInsideForm = props => (\\n    <Button onClick={() => {\\n        props.formApi.setValue('name', Math.random());\\n    }}>Click Me!!! ChangeName By\\u3010formApi\\u3011</Button>\\n);\\nconst ComponentWithFormApi = withFormApi(SomeComponetInsideForm);\\n\\nclass WithFormApiDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='semi'></Form.Input>\\n                <Form.Input field='familyName' initValue='design'></Form.Input>\\n                <Button htmlType='submit' style={{ marginRight: 4 }}>submit</Button>\\n                <ComponentWithFormApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFormApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"HOC - withFormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can encapsulate the component via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormState\"), \" HOC so that the component has direct access to the Form State of the parent Form component.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Note that the encapsulated components must be placed inside the Form structure.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withFormState, Form } from '@douyinfe/semi-ui';\\n\\nconst SomeComponentInsideForm = props => (\\n    <code>{JSON.stringify(props.formState)}</code>\\n);\\nconst ComponentWithFormState = withFormState(SomeComponentInsideForm);\\n\\nclass WithFormStateDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='semi'></Form.Input>\\n                <Form.Input field='familyName' initValue='design'></Form.Input>\\n                <ComponentWithFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFormStateDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Take over custom components\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withField\"), \", you can extend other custom components into Field. Form will taking over its behavior.\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, \"Custom components must be controlled components.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With Field did the following things.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Take over the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"value\"), \" of the component (or other properties specified by valueKey), \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onChange\"), \" (or other callback functions specified by onKeyChangeFnName)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Insert Field's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<Form.Label>\"), \"above the field\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Insert Field's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<ErrorMessage>\"), \" under the field\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Insert Field's extraText under the field\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With Field Options specific configuration can be consulted \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#WithFieldOption\"\n  }, \"withFieldOption\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Your custom controlled component needs to do the following:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the value changes, call \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.onChange\"), \" and use the latest value as an input parameter\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Respond to changes in \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.value\"), \" and update your component UI rendering results\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"withField(YourComponent, withFieldOption);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withField, Form } from '@douyinfe/semi-ui';\\n\\n// encapsulated html native input\\nconst htmlInput = (props) => {\\n    let value = props.value || '';\\n    let { validateStatus, ...rest } = props; // prevent props being transparently transmitted to DOM\\n    return <input {...rest} value={value} />; \\n};\\nconst CustomInput = withField(htmlInput, { valueKey: 'value', onKeyChangeFnName: 'onChange', valuePath: 'target.value' });\\n\\n// This component is used as an example, you can observe the formState here to see if the input data flow has been taken over by the form\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass WithFieldDemo1 extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <CustomInput field='name' />\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFieldDemo1);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withField, Input, Select, Form } from '@douyinfe/semi-ui';\\n\\nconst MyComponent = (props) => {\\n    const { onChange, value } = props;\\n    const { name, role } = value || {};\\n    const handleChange = (v, type) => {\\n        let newValue = { ...value, [type==='name' ? 'name' : 'role']: v };\\n        onChange(newValue);\\n    };\\n    return (\\n        <div className='customField'>\\n            <Input prefix='Name' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight: 12 }} />\\n            <Select\\n                prefix='Role'\\n                value={role}\\n                onChange={v => handleChange(v, 'role')}\\n                style={{ width: 200 }}\\n                optionList={[{ value: 'rd', label: 'Engineer' }, { value: 'UED', label: 'Designer' }]}\\n            />\\n        </div>\\n    );\\n};\\nconst CustomField = withField(MyComponent, { valueKey: 'value', onKeyChangeFnName: 'onChange' });\\n\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass WithFieldDemo2 extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <CustomField field='baseInfo' label={{ text: 'Basic info', required: true }} />\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFieldDemo2);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API reference\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form Props\"), 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  }, \"autoScrollToError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"If setting true\\uFF0Cwhen submit or call formApi.validate () fails verification, it will automatically scroll to the wrong field, object config refer to \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/stipsan/scroll-into-view-if-needed#options\"\n  }, \"options\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" object\"), 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  }, \"allowEmpty\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to keep the key of the null field in the values, keep the key when true, and remove the key when false\"), 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  }, \"component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"For declaring fields, not used at the same time as render, props.children\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Classname for form tag\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"If true, all fields inside the form structure will automatically inherit the disabled attribute\"), 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  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The extraTextPosition property applied to each Field uniformly controls the display position of extraText. Middle (the vertical direction is displayed in the order of Label, extraText, and Field), bottom (the vertical direction is displayed in the order of Label, Field, and extraText)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormApi\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"This function will be executed once when the form is mounted and returns formApi. \", mdx(\"br\", null), \"formApi can be used to modify the internal state of the form (value, touched, error)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (formApi: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"External formApi instance created by \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Form.useForm()\"), \". Used to control form state from outside the Form component. \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \">=2.94.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"initValues\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Used to uniformly set the initial value of the form \", mdx(\"br\", null), \"(will be consumed only once when form is mount)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"layout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The layout of fields, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'vertical'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelCol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Uniformly applied to the label label layout of each Field, with \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid#Col\"\n  }, \"Col Component\"), \", \", mdx(\"br\", null), \"set \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \" values, such as {span: 6, selected: 2}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelAlign\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Text-align value of label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Location of label in Field, optional 'top', 'left', 'inset' \", mdx(\"br\", null), \" (inset label only partial component support)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Width of field'r label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"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  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked when form update, including Fields mount/unmount / value change / \", mdx(\"br\", null), \" blur / validation status change / error status change.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (formState: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onErrorChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when the validation state of form updated. The first parameter: formState.errors, second parameter: name of the field that has changed and it's error message (available after v2.66)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(values:object, changedError: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onValueChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked when form values update. The first parameter: formState.values, second parameter: name of the field and it's value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (values: object, changedValue: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onReset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked after clicked on reset button or executed \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.reset()\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function ()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSubmit\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked after clicked on submit button or executed \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.submit()\"), \", \", mdx(\"br\", null), \"and all validation pass.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (values: object, e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSubmitFail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked after clicked on submit button or executed \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.submit()\"), \",\", mdx(\"br\", null), \" but validate failed.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (error: object, values: object, e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"For declaring fields, not used at the same time as component, props.children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showValidateIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether the verification information block in the field automatically adds the corresponding status icon display\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), 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 of form element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopValidateWithError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Apply stopValidateWithError to each Field uniformly. For usage instructions, see the API of the same name in Field props (available after v2.42)\"), 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  }, \"stopPropagation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to prevent submit or reset events from bubbling. This is used in nested Form scenarios to prevent events from propagating outwards when the inner Form submits or resets, triggering events in the outer Form. The default is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ reset: false, submit: false }\"), \"(available after v2.63)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Apply the trigger uniformly to each Field to control the timing of verification. For detailed instructions, see the API of the same name in Field props.(available after v2.42)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'change'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateFields\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Form-level custom validate functions are called at submit or formApi.validate(). \", mdx(\"br\", null), \"Supported synchronous / asynchronous function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function (values)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrapperCol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Uniformly apply the layout on each Field, with \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/grid#Col\"\n  }, \"Col component\"), \", \", mdx(\"br\", null), \"set \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \" values, such as {span: 20, offset: 4}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"FormState stores all the state values within the Form, including the values of each field, error information, touched status\"), 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  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Initial value\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"values\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Value Collection of the form\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{fieldA: 'str', fieldB: true}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"errors\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Form error information collection, you can decide whether to allow users to submit by judging whether there is error information\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{fieldA: 'length not valid'}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"touched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The collection of fields the user has clicked on\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{fieldA: true}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to access the form state\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"By calling \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"formApi.getFormState()\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"By declaring fields through \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/form#Various%20ways%20to%20declare%20form\"\n  }, \"child render function\"), \",  formState will injected as a parameter\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"By declaring fields through \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/form#Various%20ways%20to%20declare%20form\"\n  }, \"render props\"), \", formState will injected as a parameter\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Via \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#useFormState\"\n  }, \"useFormState\"), \" hook\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Via \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#withFormState\"\n  }, \"withFormState\"), \" HOC\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We provide FormApi. You have easy access to FormApi both inside and outside the Form, which allows you to use getter and setter to get and manipulate the values of FormState.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"The table below describes the features available in the formApi.\"), mdx(Notice, {\n    title: \"About scope isolation\",\n    mdxType: \"Notice\"\n  }, \"In order to prevent the user from accidentally modifying the internal state of the Form component after reading the internal state of formState, values Semi will automatically execute deepClone once for  input parameters of `formApi.setValue` and `setValues` and the return results of `formApi.getFormState`, `getValue` and `getValues `\"), 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  }, \"Function\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get Form Component Props, support after v2.57.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFormProps(propNames?: string[])\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormState\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get FormState\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFormState()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"submitForm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Manually submit form operation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.submitForm()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"reset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Reset the form manually\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.reset(fields?: Array <string\", \">\", \")\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Manually trigger validation of the entire form. the verification of the entire Field will be triggered by default when no parameters are passed , if you want to trigger the verification of some fields, pass in the target field array \", mdx(\"br\", null), mdx(\"br\", null), \" After the Form level validator is configured, the Field level validator will not be triggered again when submit or formApi.validate()\", mdx(\"br\", null), mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"Supported since v2.94.0\"), \": Pass \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ silent: true }\"), \" to get validation results without triggering UI updates (no error messages shown, no touched state set). You can also use \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ fields: ['fieldA'], silent: true }\"), \" to perform silent validation on specific fields.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.validate() \", mdx(\"br\", null), \".then(values \\u200B\\u200B=> {})\", mdx(\"br\", null), \".catch(errors => {})\", mdx(\"br\", null), \"OR formApi.validate(\", \"['fieldA','fieldB']\", \")\", mdx(\"br\", null), \"OR formApi.validate({ silent: true })\", mdx(\"br\", null), \"OR formApi.validate({ fields: \", \"['fieldA']\", \", silent: true })\", mdx(\"br\", null))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setValues \\u200B\\u200B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set the values \\u200B\\u200Bof the entire form. The isOverride in the second parameter is false by default. \", mdx(\"br\", null), \" By default, only the values \\u200B\\u200Bof the existing field in the Form are updated from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"newValues\"), \" to\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formState.values\"), \". \", mdx(\"br\", null), \" When isOverride is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\"), \", the newValues \\u200B\\u200Bwill be overwritten and assigned to formState.values \\u200B\\u200B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setValues(newValues: object, {isOverride: boolean})\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getValues \\u200B\\u200B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get the values of all Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getValues()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"provides direct modification of formState.values \\u200B\\u200Bmethod.\", mdx(\"br\", null), \"The difference from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"setValues\"), \" \\u200B\\u200Bis that it only modifies a single field.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setValue(field: string, newFieldValue: any)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get the value of all / single Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getValue()\", mdx(\"br\", null), \"formApi.getValue(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Modify formState.touched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setTouched(field: string, isTouched: boolean)\", mdx(\"br\", null))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get the touched state of the Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getTouched(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Modify the error information of a field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setError(field: string, fieldErrorMessage: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get Error Status of Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getError(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFieldExist\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get whether the field exists in the Form\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFieldExist(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToField\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Scroll to the specified field, the second input parameter will be passed to scroll-into-view-if-needed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.scrollToField(field: string, scrollOpts: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/stipsan/scroll-into-view-if-needed#options\"\n  }, \"ScrollIntoViewOptions\"), \")\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Scroll to the field with validation error. You can pass a specified field or index. If you pass index, scroll to the index-th error DOM. If you do not pass any parameters, scroll to the first validation error position in the DOM tree. Available after v2.61.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.scrollToError(\", mdx(ApiType, {\n    detail: \"{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }\",\n    mdxType: \"ApiType\"\n  }, \"ScrollToErrorOptions\"), \")\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to access formApi\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Form.useForm()\"), \" to create formApi outside Form, then pass it via props.form to the Form component. This allows you to get formApi before Form renders, suitable for scenarios where you need to control the form from outside the component.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The Form component in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ComponentDidMount\"), \" phase will execute the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"getFormApi\"), \" callback passed in by props. You can save a reference to formApi in the callback function for subsequent calls (example code below)\\nIn addition, we provide other ways to get formApi, and you can choose different ways of calling according to your preference.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use reference to get form instance\\uFF0Cyou can access form instance & its formApi\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"By declaring fields through \\\"child render function\\\", formApi will injected as a parameter\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"By declaring fields through \\\"render props\\\", formApi will injected as a parameter\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Via \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#useFormApi\"\n  }, \"useFormApi\"), \" hook for children component of Form\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Via \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#withFormApi\"\n  }, \"withFormApi\"), \" HOC for children component of Form\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Using Form.useForm()\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.useForm()\"), \" is used to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create\"), \" a formApi instance \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"outside\"), \" the Form component, suitable for scenarios where you need to control the form before it renders. It returns an array \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[formApi, formState, formValues]\"), \". \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \">=2.94.0\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"Difference between Form.useForm() and useFormApi\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, mdx(\"strong\", null, \"Form.useForm()\"), \": Creates formApi \", mdx(\"strong\", null, \"outside\"), \" Form, needs to be passed to Form via props.form. Used for parent components controlling child Form.\"), mdx(\"div\", null, mdx(\"strong\", null, \"useFormApi\"), \": Gets formApi \", mdx(\"strong\", null, \"inside\"), \" Form, used for child components of Form to access the parent Form. See [useFormApi](#useFormApi).\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Usage example:\"), 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 { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    // Create formApi outside Form\\n    const [formApi, formState, formValues] = Form.useForm();\\n\\n    const handleClick = () => {\\n        // Call formApi outside Form\\n        formApi.setValue('username', 'semi');\\n        console.log('Current form values:', formValues);\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={handleClick}>Set Value Externally</Button>\\n            <Button onClick={() => formApi.reset()}>Reset Form</Button>\\n            \\n            {/* Pass formApi to Form component */}\\n            <Form form={formApi}>\\n                <Form.Input field='username' label='Username' />\\n                <Form.Input field='email' label='Email' />\\n            </Form>\\n            \\n            <div style={{ marginTop: 16 }}>\\n                <div>Form Values: {JSON.stringify(formValues)}</div>\\n                <div>Touched Status: {JSON.stringify(formState.touched)}</div>\\n            </div>\\n        </>\\n    );\\n};\\n\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, \"When using formApi created by `Form.useForm()` before the Form component mounts, a warning will be logged in the console. It is recommended to call formApi methods after the Form has mounted.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormApiDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.formBRef = React.createRef();\\n    }\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n        // After getting the formApi object, you can use it to make any changes you want to the form\\n    }\\n\\n    changeValues() {\\n        // use formApi to update formA\\n        this.formApi.setValues({ a: 1 });\\n        // use formApi to update formB\\n        this.formBRef.current.formApi.setValues({ b: 2 });\\n    }\\n\\n    render() {\\n        return (\\n            <>\\n                <Form getFormApi={this.getFormApi} />\\n                <Form ref={this.formBRef} />\\n                <Button onClick={()=>this.changeValues()}>Change</Button>\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    // functional compoentn usage\\n    const api = useRef();\\n\\n    return (\\n        <>\\n            <Form getFormApi={formApi => api.current = formApi}>\\n                <Form.Input field='a' />\\n                <Button onClick={()=>{console.log(api);}}>log</Button>\\n            </Form>\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Field Props\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"About Field ref\",\n    mdxType: \"Notice\"\n  }, \"Versions before v1.30.0, the Field component will not do ref forwarding\", mdx(\"br\", null), \"After v1.30, the underlying component instance can be obtained directly through ref, such as specifying ref to Form.Input and Form.Select, and directly obtaining the ref reference of the underlying original Input and Select components\"), 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  }, \"Description\"), 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  }, \"Examples\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The mapping path of the field's value in formState.values. Form will use this value to distinguish the internal form control. \", mdx(\"br\", null), \" \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"Required!!!\")), 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  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The label text for this field. When not passed, it defaults to the same name as field\"), 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  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label position of this field, optional 'top' / 'left' / 'inset'\"), 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  }, \"labelAlign\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Text-align of the label text of this field\"), 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  }, \"labelWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The width of the label text of this field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), 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  }, \"noLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When you don't need to add label automatically, you can set this value to true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"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  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Field name. When passed in, the corresponding className will be automatically added to the field wrapper div, such as: money => '.semi-form-field-money'. After v2.24, the name will also be transparently transmitted to the underlying component for consumption. For example, you can configure the name attribute of input\"), 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  }, \"fieldClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The className of the entire fieldWrapper is the same as the name parameter, except that the prefix is \\u200B\\u200Bnot automatically appended\"), 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  }, \"fieldStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The inline style of the entire fieldWrapper\"), 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  }, \"initValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The initial value of the field (consumed only once when Field mounted, subsequent updates are invalid), it has higher priority than the values \\u200B\\u200Bin Form's initValues \\u200B\\u200B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any(type depends on current component)\"), 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  }, \"validate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The custom validation function for this form control. Supports synchronous and asynchronous verification. \", mdx(\"br\", null), \" Rules does not take effect when validate is set\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue, values)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(fieldValue) => fieldValue.length>5? 'error balabala': ''\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rules\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validation rules, validation library based on \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/yiminghe/async-validator\"\n  }, \"async-validator\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"const rules = \", \"[\", \"{type:' string ', message:' invalidate string'} \", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The validation result status of this form control, optional: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), 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  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The timing of triggering the verification, optional: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blur\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"change\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"custom\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mount\"), \" \", mdx(\"br\", null), \" 1. When set to custom, only formApi will trigger the verification \", mdx(\"br\", null), \" 2.mount (triggered once when mounting)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'change'\"), 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 invoked when this field value changes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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  }, \"transform\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform field values before validation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value) => Number(value)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allowEmptyString\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to allow values to be empty strings. \", mdx(\"br\", null), \"When the value is '' by default, the key corresponding to this field will be removed from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"values\"), \". \", mdx(\"br\", null), \"If you want to keep the key, you need to set allowEmptyString to true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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  }, \"convert\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"After the field value changes, before rerender, update the value of filed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value) => newValue\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopValidateWithError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When it is true, the rules check is used. After encountering the first rule that fails the check, it will no longer trigger the check of subsequent rules\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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  }, \"helpText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom prompt information, which is displayed in the same block as the verification information. When both have values, the verification information is displayed first\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Additional prompt information, you can use this when both error information and prompt copy are required, after helpText/errorMessage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pure\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to only take over the data stream, when true, it will not automatically insert modules such as ErrorMessage, Label, extraText, etc. The style and DOM structure are consistent with the original components\"), 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  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"controls the display position of extraText. Middle (the vertical direction is displayed in the order of Label, extraText, and Field), bottom (the vertical direction is displayed in the order of Label, Field, and extraText)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"...other\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The other configurable properties of the component can be passed in together with the above properties, such as the size / placeholder of Input\\uFF0C\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"Field passes it to the component itself\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), 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  }, \"Field Api\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We also provide \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fieldApi\"), \", most of which is similar to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi\"), \", with the difference that fieldApi limits the scope of modification, and it can only modify the bound field\"), 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  }, \"Function\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Modify the value of the current Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.setValue(newValue: any)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gets the value of the current Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.getValue()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Modify the value of the current Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.setTouched(true)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get Field's status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.getTouched()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Modify the error information of the current Field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.setError(newErrorMessage: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gets field's error status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldApi.getError()\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"ArrayField Props\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For dynamically added and deleted array form items, we provide the ArrayField scope to simplify add/remove operations\"), 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  }, \"Description\"), 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  }, \"field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The mapping path of the value of the form control in formState.values\", mdx(\"br\", null), \"Required, for example, there is an ArrayField responsible for rendering a\", \"[0]\", \".name, a\", \"[1]\", \".name, a\", \"[2]\", \".name three lines, their The parent is a, here props.field should be \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"a\")), 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  }, \"initValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The initial value of ArrayField, if the initial value is configured in both formProps.initValues and arrayFieldProps.initValue, the priority of the latter is higher\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The content of ArrayField, the type is Function, the function input parameters are operation functions such as add, addWithInitValue and arrayFields, and it should return ReactNode after execution\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function(ArrayFieldChildrenProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface ArrayFieldChildrenProps {\\n    arrayFields: ArrayFieldItem<>;                               // The current array form, which can be used to perform map operations to render each row\\n    add: () => void;                                             // Add blank line\\n    addWithInitValue: (lineObject: Record<string, any>) => void; // Add a new row with an initial value\\n}\\n\\ninterface ArrayFieldItem {\\n    key: string;        // A key used to identify the current row, which should be bound to the wrapper of the current row\\n    field: string;      // This row fieldPath, which is equivalent to ArrayFieldProps.field + [index]\\n    remove: () => void; // Remove operation function of this line, when called, this line will be deleted directly\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Section\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Section } = Form;\\n\")), 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  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Title of section\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\")), 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  }, \"Classname\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content of section\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Label\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By default, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Label\"), \" is self-inserted into each \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Field\"), \" by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If you need to self-insert Label elsewhere, we have provided the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Label\"), \" component for you.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Label } = Form;\\n\")), 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  }, \"Description\"), 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  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label content\"), 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  }, \"required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to show the required \", \"*\"), 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  }, \"Content after required\"), 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  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Text-align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left'\")), 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  }, \"Classname of label wrapper\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style\"), 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  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label width\"), 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  }, \"optional\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to automatically append the \\\"(optional)\\\" text mark after the text (automatically switch the same semantic text according to different languages configured by Locale). When this item is true, the required \", \"*\", \" will no longer be displayed.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.InputGroup\"), 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  }, \"Description\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Classname of Form.InputGroup\"), 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  }, \"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  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label text of Form.InputGroup\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label \", \"|\", \" 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  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label position\\uFF0Coptional: 'top'/'left'/'inset'. When Form and InputGroup are passed in at the same time, the InputGroup props shall prevail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Additional prompt information, when the error message and prompt text need to appear at the same time, you can use this, located after errorMessage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.29.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Control the display position of extraText, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \" (vertical direction is displayed in the order of Label, extraText, Group), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" (vertical direction is displayed in the order of Label, Group, extraText)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.29.0\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When extraTextPositon is middle and labelPosition is left. Since extraText is allowed to be ReactNode, the height of the content is variable, and the Label will no longer ensure that it can be aligned with the first line of text in the Field / InputGroup.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Slot\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Slot } = Form;\\n\")), 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  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Slot's \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Form.Label\"\n  }, \"Label configuration\"), \", for example {text: 'semi', align: 'left'}; can also be passed directly into string, inside the Slot will be automatically encapsulated in legal Label format\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Classname of Slot Wrapper\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Slot inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content of slot. You can place your custom component here\"), 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  }, \"error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ErrorMessage of Slot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ErrorMessage\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.ErrorMessage\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { ErrorMessage } = Form;\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the error is React Node, String, boolean, render directly\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the error is an array, the join operation is automatically performed to aggregate the error information in the array\")), 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(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Error message content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\", \"|\", \"ReactNode\", \"|\", \"boolean\")), 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  }, \"Classname of ErrorMessage wrapper\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showValidateIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to automatically add the icon corresponding to validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The verification status of the information, optional: default/error/warning/success (success is generally recommended to be the same as default)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"withFieldOption\"), 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  }, \"key\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), 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  }, \"valueKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The component represents the property of the value, such as Switch, Radio is' checked 'and Input is' value '\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'value'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onKeyChangeFnName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The callback function when the component value changes, generally 'onChange'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'onChange'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"valuePath\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The path of the value attribute to the first parameter in the callback function, such as Radio's onChange (e.target. checked), then the value needs to be set to target .checked; Radio Group's onChange (e.target. value), which is' target .value '; if the first parameter is the value itself, there is no need to take the value down, the item does not need to be set\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"withCursor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Do you need to maintain a cursor for Input class components\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"))))), 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  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\"\n  }, \"aria-labelledby\"), \"\\u3001for\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Field component will automatically add label DOM. The for attribute of label is the same as \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.id\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.name\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.field\"), \"; the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \" attribute of label is determined by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.id\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.name\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.field\"), \", and the value format is \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-label\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the props.labelPosition of the Form or Field is set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"inset\"), \", there is no label tag at this time, but a div tag. The div tag corresponding to insetLabel will be automatically appended with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \", the value is the same as the id of the above label, corresponding to the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \" of the Field component\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The Field component will be automatically appended with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \", the value is the same as the id of the above label\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute\"\n  }, \"aria-required\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the Field is configured with required fields (that is, props.rules contains require: true or props.label is configured with required: true), the Field component will be automatically appended with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-required = true\"), \" (except Form.Switch, Form.CheckboxGroup)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute\"\n  }, \"aria-invalid\"), \" \\u3001\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\"\n  }, \"aria-errormessage\"), \" \", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the Field check fails, the Field component will be automatically added with the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-invalid\"), \" = true attribute, except for Form.CheckboxGroup.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the Field check fails, the Field component will be automatically appended with the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-errormessage\"), \" attribute, the value of which is the id of the DOM element corresponding to the errorMessage (format like: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-errormessage\"), \"), except for Form.CheckboxGroup.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute\"\n  }, \"aria-describedby\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the Field is configured with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"helpText\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"extraText\"), \", the Field component will be automatically added with the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" attribute, whose value is the id of the DOM element corresponding to helpText and extraText (format like: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-helpText\"), \" , \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-extraText\"), \")\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form title\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The title of the form needs to follow the writing specification of the title\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form label\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The label is a short description of the input box. The label is not a help text, so it should not be a description of the input\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Labels must:\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Place it above or below the input box\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Short (1-3 words)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use case conventions for statements (first letter uppercase, others lowercase)\"))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Help text\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Help text use statement writing conventions, capitalized\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form button\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"For the content Guidelines of the form button, refer to \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/button\"\n  }, \"Button component\"), \" \"))))), 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  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why did I declare the form, modify the value, and the data is not automatically mapped to formState.values?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Check that the field has been passed correctly, and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \" attribute on the Field component is a must-fill property !\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why doesn't the passed \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"defaultValue\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"defaultChecked\"), \" take effect?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Refer to the beginning of the document \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Field\"\n  }, \"Field\"), \". The Form.Field component unifies the default value. You should pass the default value using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why did the component not change and the value not take effect after \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"initValue\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"initValues\"), \" were updated asynchronously?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"), \" are only consumed once when Field and Form mount, and subsequent asynchronous updates will not take effect.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If your initial value needs to be taken remotely, you can update it using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.setValue / setValues\"), \" after you get the value\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Or send a new \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \" directly to Form or Field to force it to remount.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why can't getValues get a certain field?\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the field has no initial value, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getValues\"), \" cannot get this item. You can set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \" or set the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allowEmpty\"), \" attribute to the form.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why does hitting enter on the input box trigger the form's submit?\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"This is standard HTML behavior. We do not plan to intervene and we will remain the same as the HTML. If there is really only one input element in the form, and you don't want to trigger the submit callback when you press Enter, it is recommended to use preventDefault for the enter of the keydown event of input to prevent the default behavior.\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click \", mdx(\"a\", {\n    href: \"https://github.com/DouyinFE/semi-design/issues/767\",\n    target: \"_blank\"\n  }, \"#767\"), \" for background and content.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"The form will automatically save the historical input items, what should I do if I don't want this function?\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Before v2.3, Form did not configure \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"for\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"name\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" and other attributes for input controls strictly according to the A11y accessibility standard, so this function was not available in previous versions. After v2.3, we implemented it strictly according to the W3C standard. If you don't want the browser to automatically save history input items, you can also turn it off by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"autoComplete=off\"), \" at the Form level or Field level\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://bytedance.feishu.cn/docs/doccnNKaGhZMqyu0FufD1JGHOjf\"\n  }, \"\\uD83D\\uDD0D \\uD83E\\uDDFE More FAQ\")))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/form","next":{"fields":{"slug":"zh-CN/input/form"},"id":"676d290c-5a30-5695-8142-9e43b372f6cf","frontmatter":{"title":"Form 表单","localeCode":"zh-CN","icon":"doc-form","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/datepicker"},"id":"a1449d1d-6316-518e-a920-e733360043a4","frontmatter":{"title":"DatePicker 日期选择器","localeCode":"zh-CN","icon":"doc-datepicker","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}