From 0de1e66ff19130ef648af2fffe08df53d4afad1e Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 24 Mar 2022 21:54:20 +0800
Subject: [PATCH] refactor: move override code in form (#34694)

* refactor: move override code in form

* refactor: radio and checkbox

* chore: code clean

* test: fix lint

* test: fix lint
---
 .../__snapshots__/demo-extend.test.ts.snap    |  22 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  22 ++--
 components/calendar/Header.tsx                |  17 ++-
 components/calendar/style/index.tsx           |   2 +-
 components/cascader/index.tsx                 |   7 +-
 components/checkbox/Checkbox.tsx              |   4 +
 components/checkbox/style/index.tsx           |   1 +
 components/checkbox/style/mixin.less          |   7 ++
 .../generatePicker/generateRangePicker.tsx    |  10 +-
 .../generatePicker/generateSinglePicker.tsx   |  10 +-
 components/form/FormItem.tsx                  |   7 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 100 +++++++++---------
 .../__tests__/__snapshots__/demo.test.js.snap | 100 +++++++++---------
 components/form/context.tsx                   |   5 +-
 components/form/style/components.less         |  58 +---------
 components/form/style/mixin.less              |   4 -
 components/input-number/index.tsx             |   5 +-
 components/input/ClearableLabeledInput.tsx    |   6 +-
 components/input/Input.tsx                    |   4 +-
 components/input/TextArea.tsx                 |   4 +-
 components/mentions/index.tsx                 |   4 +-
 components/radio/radio.tsx                    |   4 +
 components/radio/style/index.less             |   7 ++
 components/radio/style/index.tsx              |   1 +
 components/select/index.tsx                   |   7 +-
 components/select/style/index.less            |   4 +
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +--
 .../__tests__/__snapshots__/demo.test.js.snap |  16 +--
 .../__snapshots__/demo-extend.test.ts.snap    |  32 +++---
 .../__tests__/__snapshots__/demo.test.js.snap |  32 +++---
 components/transfer/index.tsx                 |  15 +--
 components/tree-select/index.tsx              |   7 +-
 components/upload/Upload.tsx                  |   6 ++
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 components/upload/style/index.less            |   8 ++
 components/upload/style/index.tsx             |   1 +
 37 files changed, 282 insertions(+), 277 deletions(-)

diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
index 08fcb1420c..9e9454621c 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -543,7 +543,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -610,7 +610,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -754,7 +754,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -938,7 +938,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -1035,7 +1035,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -1151,7 +1151,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -1249,7 +1249,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -1365,7 +1365,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -1472,7 +1472,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:20%"
             >
               <div
@@ -1588,7 +1588,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index a157e619c3..a62c9568a8 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -195,7 +195,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -248,7 +248,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -332,7 +332,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -388,7 +388,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -442,7 +442,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -525,7 +525,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -581,7 +581,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -665,7 +665,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:30%"
             >
               <div
@@ -721,7 +721,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -814,7 +814,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
             class="ant-input-group ant-input-group-compact"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:20%"
             >
               <div
@@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index e8185482ec..e3e92277bc 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { GenerateConfig } from 'rc-picker/lib/generate';
 import { Locale } from 'rc-picker/lib/interface';
+import { useContext, useMemo } from 'react';
+import { FormItemInputContext } from '../form/context';
 import Select from '../select';
 import { Group, Button } from '../radio';
 import { CalendarMode } from './generateCalendar';
@@ -152,6 +154,15 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
   const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
 
+  const formItemInputContext = useContext(FormItemInputContext);
+  const mergedFormItemInputContext = useMemo(
+    () => ({
+      ...formItemInputContext,
+      isFormItemInput: false,
+    }),
+    [formItemInputContext],
+  );
+
   const sharedProps = {
     ...props,
     onChange,
@@ -161,8 +172,10 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
 
   return (
     <div className={`${prefixCls}-header`} ref={divRef}>
-      <YearSelect {...sharedProps} />
-      {mode === 'month' && <MonthSelect {...sharedProps} />}
+      <FormItemInputContext.Provider value={mergedFormItemInputContext}>
+        <YearSelect {...sharedProps} />
+        {mode === 'month' && <MonthSelect {...sharedProps} />}
+      </FormItemInputContext.Provider>
       <ModeSwitch {...sharedProps} onModeChange={onModeChange} />
     </div>
   );
diff --git a/components/calendar/style/index.tsx b/components/calendar/style/index.tsx
index 045b1fa400..1ee59b4a6b 100644
--- a/components/calendar/style/index.tsx
+++ b/components/calendar/style/index.tsx
@@ -2,7 +2,7 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
-// deps-lint-skip: date-picker
+// deps-lint-skip: date-picker, form
 import '../../select/style';
 import '../../radio/style';
 import '../../date-picker/style';
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 89f8caa1af..c12a7f9b74 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -20,7 +20,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import getIcons from '../select/utils/iconUtil';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 
 // Align the design since we use `rc-select` in root. This help:
@@ -145,8 +145,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const mergedDirection = direction || rootDirection;
   const isRtl = mergedDirection === 'rtl';
 
-  // =================== Status =====================
-  const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
+  // =================== Form =====================
+  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
@@ -255,6 +255,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
           [`${prefixCls}-sm`]: mergedSize === 'small',
           [`${prefixCls}-rtl`]: isRtl,
           [`${prefixCls}-borderless`]: !bordered,
+          [`${prefixCls}-in-form-item`]: isFormItemInput,
         },
         getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
         className,
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 8834aed75a..315a724759 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
+import { useContext } from 'react';
+import { FormItemInputContext } from '../form/context';
 import { GroupContext } from './Group';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
@@ -59,6 +61,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
 ) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const checkboxGroup = React.useContext(GroupContext);
+  const { isFormItemInput } = useContext(FormItemInputContext);
 
   const prevValue = React.useRef(restProps.value);
 
@@ -104,6 +107,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
       [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
+      [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
     },
     className,
   );
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index 3a3ab0de59..d53a9fa2e6 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+// deps-lint-skip: form
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
index c16a3f091a..ae4a39d949 100644
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -169,6 +169,13 @@
     & + & {
       margin-left: 8px;
     }
+
+    &&-in-form-item {
+      input[type='checkbox'] {
+        width: 14px;
+        height: 14px;
+      }
+    }
   }
 
   .@{checkbox-prefix-cls} + span {
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 60279b949d..bad66a7eb8 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -14,7 +14,7 @@ import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
-import { FormItemStatusContext } from '../../form/context';
+import { FormItemInputContext } from '../../form/context';
 import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateRangePicker<DateType>(
@@ -40,13 +40,13 @@ export default function generateRangePicker<DateType>(
     };
 
     renderFeedback = (prefixCls: string) => (
-      <FormItemStatusContext.Consumer>
+      <FormItemInputContext.Consumer>
         {({ hasFeedback, status: contextStatus }) => {
           const { status: customStatus } = this.props;
           const status = getMergedStatus(contextStatus, customStatus);
           return hasFeedback && getFeedbackIcon(prefixCls, status);
         }}
-      </FormItemStatusContext.Consumer>
+      </FormItemInputContext.Consumer>
     );
 
     renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
@@ -88,7 +88,7 @@ export default function generateRangePicker<DateType>(
             const mergedSize = customizeSize || size;
 
             return (
-              <FormItemStatusContext.Consumer>
+              <FormItemInputContext.Consumer>
                 {({ hasFeedback, status: contextStatus }) => (
                   <RCRangePicker<DateType>
                     separator={
@@ -129,7 +129,7 @@ export default function generateRangePicker<DateType>(
                     direction={direction}
                   />
                 )}
-              </FormItemStatusContext.Consumer>
+              </FormItemInputContext.Consumer>
             );
           }}
         </SizeContext.Consumer>
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 852e62145a..2e182f900a 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -21,7 +21,7 @@ import {
   Components,
 } from '.';
 import { PickerComponentClass } from './interface';
-import { FormItemStatusContext } from '../../form/context';
+import { FormItemInputContext } from '../../form/context';
 import {
   getFeedbackIcon,
   getMergedStatus,
@@ -69,13 +69,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
       };
 
       renderFeedback = (prefixCls: string) => (
-        <FormItemStatusContext.Consumer>
+        <FormItemInputContext.Consumer>
           {({ hasFeedback, status: contextStatus }) => {
             const { status: customStatus } = this.props;
             const status = getMergedStatus(contextStatus, customStatus);
             return hasFeedback && getFeedbackIcon(prefixCls, status);
           }}
-        </FormItemStatusContext.Consumer>
+        </FormItemInputContext.Consumer>
       );
 
       renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
@@ -127,7 +127,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               const mergedSize = customizeSize || size;
 
               return (
-                <FormItemStatusContext.Consumer>
+                <FormItemInputContext.Consumer>
                   {({ hasFeedback, status: contextStatus }) => (
                     <RCPicker<DateType>
                       ref={this.pickerRef}
@@ -164,7 +164,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                       direction={direction}
                     />
                   )}
-                </FormItemStatusContext.Consumer>
+                </FormItemInputContext.Consumer>
               );
             }}
           </SizeContext.Consumer>
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 2e64434ece..2772ec5967 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -15,7 +15,7 @@ import FormItemLabel, { FormItemLabelProps, LabelTooltipType } from './FormItemL
 import FormItemInput, { FormItemInputProps } from './FormItemInput';
 import {
   FormContext,
-  FormItemStatusContext,
+  FormItemInputContext,
   NoStyleItemContext,
   FormItemStatusContextProps,
 } from './context';
@@ -223,6 +223,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
     () => ({
       status: mergedValidateStatus,
       hasFeedback,
+      isFormItemInput: true,
     }),
     [mergedValidateStatus, hasFeedback],
   );
@@ -300,9 +301,9 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
           help={help}
         >
           <NoStyleItemContext.Provider value={onSubItemMetaChange}>
-            <FormItemStatusContext.Provider value={formItemStatusContext}>
+            <FormItemInputContext.Provider value={formItemStatusContext}>
               {baseChildren}
-            </FormItemStatusContext.Provider>
+            </FormItemInputContext.Provider>
           </NoStyleItemContext.Provider>
         </FormItemInput>
       </Row>
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 260c24f505..50d6db95ec 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                 class="ant-form-item-control-input-content"
               >
                 <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
+                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                 >
                   <div
                     class="ant-select-selector"
@@ -329,7 +329,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                 class="ant-form-item-control-input-content"
               >
                 <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
+                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                 >
                   <div
                     class="ant-select-selector"
@@ -691,7 +691,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -934,7 +934,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -1200,7 +1200,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -1440,7 +1440,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
               value="0"
             />
             <div
-              class="ant-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:80px;margin:0 8px"
             >
               <div
@@ -2451,7 +2451,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -2859,7 +2859,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox"
@@ -3412,7 +3412,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
             id="layout"
           >
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -3432,7 +3432,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -3451,7 +3451,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -3774,7 +3774,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -4060,7 +4060,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -4472,7 +4472,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
               class="ant-input-number-wrapper ant-input-number-group"
             >
               <div
-                class="ant-input-number"
+                class="ant-input-number ant-input-number-in-form-item"
               >
                 <div
                   class="ant-input-number-handler-wrap"
@@ -5117,7 +5117,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -5224,7 +5224,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -5458,7 +5458,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox"
@@ -5550,7 +5550,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
             id="requiredMarkValue"
           >
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -5570,7 +5570,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -5589,7 +5589,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -5835,7 +5835,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
             id="size"
           >
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -5854,7 +5854,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -5874,7 +5874,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -5951,7 +5951,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -6090,7 +6090,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -6268,7 +6268,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -7022,7 +7022,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -14780,7 +14780,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -14948,7 +14948,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-multiple ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -15104,7 +15104,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -15398,7 +15398,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             id="validate_other_radio-group"
           >
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -15417,7 +15417,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
               </span>
             </label>
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -15436,7 +15436,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
               </span>
             </label>
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -15487,7 +15487,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             id="validate_other_radio-button"
           >
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -15506,7 +15506,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -15525,7 +15525,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -15582,7 +15582,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -15607,7 +15607,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -15633,7 +15633,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -15657,7 +15657,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -15681,7 +15681,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -15705,7 +15705,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -16081,7 +16081,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class=""
           >
             <div
-              class="ant-upload ant-upload-select ant-upload-select-picture"
+              class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
             >
               <span
                 class="ant-upload"
@@ -16160,7 +16160,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
         >
           <span>
             <div
-              class="ant-upload ant-upload-drag"
+              class="ant-upload ant-upload-drag ant-upload-in-form-item"
             >
               <span
                 class="ant-upload ant-upload-btn"
@@ -19981,7 +19981,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -20187,7 +20187,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -20334,7 +20334,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -21793,7 +21793,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
             style="width:100%"
           >
             <div
-              class="ant-input-number ant-input-number-status-success"
+              class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
             >
               <div
                 class="ant-input-number-handler-wrap"
@@ -22453,7 +22453,7 @@ exports[`renders ./components/form/demo/without-form-create.md extend context co
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 68b60453d2..e785a95fcc 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                 class="ant-form-item-control-input-content"
               >
                 <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
+                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                 >
                   <div
                     class="ant-select-selector"
@@ -247,7 +247,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                 class="ant-form-item-control-input-content"
               >
                 <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
+                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                 >
                   <div
                     class="ant-select-selector"
@@ -527,7 +527,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -770,7 +770,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -937,7 +937,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -1078,7 +1078,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
               value="0"
             />
             <div
-              class="ant-select ant-select-single ant-select-show-arrow"
+              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
               style="width:80px;margin:0 8px"
             >
               <div
@@ -2007,7 +2007,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -2333,7 +2333,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox"
@@ -2886,7 +2886,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
             id="layout"
           >
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -2906,7 +2906,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -2925,7 +2925,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -3248,7 +3248,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -3534,7 +3534,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -3922,7 +3922,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -4148,7 +4148,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               class="ant-input-number-wrapper ant-input-number-group"
             >
               <div
-                class="ant-input-number"
+                class="ant-input-number ant-input-number-in-form-item"
               >
                 <div
                   class="ant-input-number-handler-wrap"
@@ -4313,7 +4313,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -4406,7 +4406,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -4541,7 +4541,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox"
@@ -4633,7 +4633,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
             id="requiredMarkValue"
           >
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -4653,7 +4653,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -4672,7 +4672,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
             id="size"
           >
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -4889,7 +4889,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button ant-radio-button-checked"
@@ -4909,7 +4909,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -4986,7 +4986,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -5068,7 +5068,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -5149,7 +5149,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -5295,7 +5295,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -6028,7 +6028,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -6114,7 +6114,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-multiple ant-select-show-search"
+            class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
           >
             <div
               class="ant-select-selector"
@@ -6189,7 +6189,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
@@ -6459,7 +6459,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             id="validate_other_radio-group"
           >
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -6478,7 +6478,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -6497,7 +6497,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-wrapper"
+              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
             >
               <span
                 class="ant-radio"
@@ -6548,7 +6548,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             id="validate_other_radio-button"
           >
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -6567,7 +6567,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -6586,7 +6586,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               </span>
             </label>
             <label
-              class="ant-radio-button-wrapper"
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
             >
               <span
                 class="ant-radio-button"
@@ -6643,7 +6643,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -6668,7 +6668,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -6694,7 +6694,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -6718,7 +6718,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -6742,7 +6742,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -6766,7 +6766,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 class="ant-col ant-col-8"
               >
                 <label
-                  class="ant-checkbox-wrapper"
+                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                   style="line-height:32px"
                 >
                   <span
@@ -7142,7 +7142,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class=""
           >
             <div
-              class="ant-upload ant-upload-select ant-upload-select-picture"
+              class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
             >
               <span
                 class="ant-upload"
@@ -7221,7 +7221,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
         >
           <span>
             <div
-              class="ant-upload ant-upload-drag"
+              class="ant-upload ant-upload-drag ant-upload-in-form-item"
             >
               <span
                 class="ant-upload ant-upload-btn"
@@ -8026,7 +8026,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -8133,7 +8133,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -8249,7 +8249,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -8523,7 +8523,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             style="width:100%"
           >
             <div
-              class="ant-input-number ant-input-number-status-success"
+              class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
             >
               <div
                 class="ant-input-number-handler-wrap"
@@ -9183,7 +9183,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"
diff --git a/components/form/context.tsx b/components/form/context.tsx
index 6ce2ac970d..6ece4507a7 100644
--- a/components/form/context.tsx
+++ b/components/form/context.tsx
@@ -53,16 +53,17 @@ export const FormItemPrefixContext = React.createContext<FormItemPrefixContextPr
 });
 
 export interface FormItemStatusContextProps {
+  isFormItemInput?: boolean;
   status?: ValidateStatus;
   hasFeedback?: boolean;
 }
 
-export const FormItemStatusContext = React.createContext<FormItemStatusContextProps>({});
+export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});
 
 export const NoFormStatus: FC<PropsWithChildren<{}>> = ({ children }: PropsWithChildren<{}>) => {
   const emptyContext = useMemo(() => ({}), []);
 
   return (
-    <FormItemStatusContext.Provider value={emptyContext}>{children}</FormItemStatusContext.Provider>
+    <FormItemInputContext.Provider value={emptyContext}>{children}</FormItemInputContext.Provider>
   );
 };
diff --git a/components/form/style/components.less b/components/form/style/components.less
index 53d4773d9b..10bf6cb964 100644
--- a/components/form/style/components.less
+++ b/components/form/style/components.less
@@ -6,67 +6,11 @@
 // ================================================================
 // =                      Children Component                      =
 // ================================================================
+// FIXME: useless, remove in v5
 .@{form-item-prefix-cls} {
-  // input[type=file]
-  .@{ant-prefix}-upload {
-    background: transparent;
-  }
-  .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
-    background: @background-color-light;
-  }
-
-  input[type='radio'],
-  input[type='checkbox'] {
-    width: 14px;
-    height: 14px;
-  }
-
-  // Radios and checkboxes on same line
-  .@{ant-prefix}-radio-inline,
-  .@{ant-prefix}-checkbox-inline {
-    display: inline-block;
-    margin-left: 8px;
-    font-weight: normal;
-    vertical-align: middle;
-    cursor: pointer;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .@{ant-prefix}-checkbox-vertical,
-  .@{ant-prefix}-radio-vertical {
-    display: block;
-  }
-
-  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
-  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
-    margin-left: 0;
-  }
-
   .@{ant-prefix}-input-number {
     + .@{form-prefix-cls}-text {
       margin-left: 8px;
     }
-
-    &-handler-wrap {
-      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
-    }
-  }
-
-  .@{ant-prefix}-select,
-  .@{ant-prefix}-cascader-picker {
-    width: 100%;
-  }
-
-  // Don't impact select inside input group and calendar header select
-  .@{ant-prefix}-picker-calendar-year-select,
-  .@{ant-prefix}-picker-calendar-month-select,
-  .@{ant-prefix}-input-group .@{ant-prefix}-select,
-  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker,
-  .@{ant-prefix}-input-number-group .@{ant-prefix}-select,
-  .@{ant-prefix}-input-number-group .@{ant-prefix}-cascader-picker {
-    width: auto;
   }
 }
diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less
index 60ab5646f5..c7ca146854 100644
--- a/components/form/style/mixin.less
+++ b/components/form/style/mixin.less
@@ -10,10 +10,6 @@
   .@{ant-prefix}-form-item-split {
     color: @text-color;
   }
-
-  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
-    .active(@border-color, @hoverBorderColor, @outlineColor);
-  }
 }
 
 // Reset form styles
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index 798f0bfde3..8f67c71ddd 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { FormItemStatusContext, NoFormStatus } from '../form/context';
+import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { cloneElement } from '../_util/reactNode';
 import {
   getFeedbackIcon,
@@ -71,7 +71,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       );
   }
 
-  const { hasFeedback, status: contextStatus } = useContext(FormItemStatusContext);
+  const { hasFeedback, status: contextStatus, isFormItemInput } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const mergeSize = customizeSize || size;
@@ -82,6 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-readonly`]: readOnly,
       [`${prefixCls}-borderless`]: !bordered,
+      [`${prefixCls}-in-form-item`]: isFormItemInput,
     },
     getStatusClassNames(prefixCls, mergedStatus),
     className,
diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx
index d325223925..39e1de411e 100644
--- a/components/input/ClearableLabeledInput.tsx
+++ b/components/input/ClearableLabeledInput.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { DirectionType } from '../config-provider';
 import { SizeType } from '../config-provider/SizeContext';
-import { FormItemStatusContext, FormItemStatusContextProps } from '../form/context';
+import { FormItemInputContext, FormItemStatusContextProps } from '../form/context';
 import { cloneElement } from '../_util/reactNode';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 import { tuple } from '../_util/type';
@@ -118,14 +118,14 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
 
   render() {
     return (
-      <FormItemStatusContext.Consumer>
+      <FormItemInputContext.Consumer>
         {statusContext => {
           const { prefixCls, inputType, element } = this.props;
           if (inputType === ClearableInputType[0]) {
             return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
           }
         }}
-      </FormItemStatusContext.Consumer>
+      </FormItemInputContext.Consumer>
     );
   }
 }
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index e39e6346ad..0ca902cb72 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -11,7 +11,7 @@ import {
   InputStatus,
 } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
-import { FormItemStatusContext, NoFormStatus } from '../form/context';
+import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
 import devWarning from '../_util/devWarning';
 
@@ -145,7 +145,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const mergedSize = customSize || size;
 
   // ===================== Status =====================
-  const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
+  const { status: contextStatus, hasFeedback } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Focus warning =====================
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 88001c7365..d29bbc399e 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -6,7 +6,7 @@ import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import {
   getFeedbackIcon,
   getStatusClassNames,
@@ -79,7 +79,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
-    const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext);
+    const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
     const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
     const innerRef = React.useRef<RcTextArea>(null);
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index cff2ba6317..188d42aebd 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -5,7 +5,7 @@ import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
 import { composeRef } from 'rc-util/lib/ref';
 import Spin from '../spin';
 import { ConfigContext } from '../config-provider';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import {
   getFeedbackIcon,
   getMergedStatus,
@@ -70,7 +70,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
   const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
-  const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext);
+  const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index c2cf862333..2e2fcceb3b 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import RcCheckbox from 'rc-checkbox';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
+import { useContext } from 'react';
+import { FormItemInputContext } from '../form/context';
 import { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
 import RadioGroupContext from './context';
@@ -12,6 +14,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
+  const { isFormItemInput } = useContext(FormItemInputContext);
 
   React.useEffect(() => {
     devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
@@ -37,6 +40,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
       [`${prefixCls}-wrapper-checked`]: radioProps.checked,
       [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
       [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
+      [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
     },
     className,
   );
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index 713dc25d0d..3578015906 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -42,6 +42,13 @@
     overflow: hidden;
     content: '\a0';
   }
+
+  &&-in-form-item {
+    input[type='radio'] {
+      width: 14px;
+      height: 14px;
+    }
+  }
 }
 
 .@{radio-prefix-cls} {
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
index 3a3ab0de59..d53a9fa2e6 100644
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+// deps-lint-skip: form
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 6c3dce851c..82c1b85d16 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -10,7 +10,7 @@ import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import getIcons from './utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 
@@ -99,8 +99,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   const mergedShowArrow =
     showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
 
-  // ===================== Validation Status =====================
-  const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
+  // ===================== Form Status =====================
+  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Empty =====================
@@ -136,6 +136,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
       [`${prefixCls}-sm`]: mergedSize === 'small',
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-borderless`]: !bordered,
+      [`${prefixCls}-in-form-item`]: isFormItemInput,
     },
     getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
     className,
diff --git a/components/select/style/index.less b/components/select/style/index.less
index a63f49ca05..9146204034 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -317,6 +317,10 @@
     border-color: transparent !important;
     box-shadow: none !important;
   }
+
+  &&-in-form-item {
+    width: 100%;
+  }
 }
 
 @import './rtl';
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5761cff88c..5f7834f555 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -292,7 +292,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -312,7 +312,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -331,7 +331,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -380,7 +380,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -400,7 +400,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -419,7 +419,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -468,7 +468,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -487,7 +487,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index 893a134e40..c9be57e5f8 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -292,7 +292,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -312,7 +312,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -331,7 +331,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -380,7 +380,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -400,7 +400,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -419,7 +419,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -468,7 +468,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -487,7 +487,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 55d91540cc..b10acd84ae 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2707,7 +2707,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2727,7 +2727,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2746,7 +2746,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2795,7 +2795,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2814,7 +2814,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2833,7 +2833,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2882,7 +2882,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2901,7 +2901,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2950,7 +2950,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2969,7 +2969,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2988,7 +2988,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -3007,7 +3007,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -3057,7 +3057,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -3076,7 +3076,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -3095,7 +3095,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -3115,7 +3115,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 73427055bd..989ab570b3 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -2216,7 +2216,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2236,7 +2236,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2255,7 +2255,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2304,7 +2304,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2323,7 +2323,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2342,7 +2342,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2391,7 +2391,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2410,7 +2410,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2459,7 +2459,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2478,7 +2478,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2497,7 +2497,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2516,7 +2516,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2566,7 +2566,7 @@ Array [
               class="ant-radio-group ant-radio-group-outline"
             >
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2585,7 +2585,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
@@ -2604,7 +2604,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button ant-radio-button-checked"
@@ -2624,7 +2624,7 @@ Array [
                 </span>
               </label>
               <label
-                class="ant-radio-button-wrapper"
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
                   class="ant-radio-button"
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index 009d18fd50..3ed64aba02 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -9,7 +9,7 @@ import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../conf
 import { TransferListBodyProps } from './ListBody';
 import { PaginationType } from './interface';
 import devWarning from '../_util/devWarning';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 
 export { TransferListProps } from './list';
@@ -79,9 +79,12 @@ export interface TransferProps<RecordType> {
   showSearch?: boolean;
   filterOption?: (inputValue: string, item: RecordType) => boolean;
   locale?: Partial<TransferLocale>;
-  footer?: (props: TransferListProps<RecordType>, info?: {
-    direction: TransferDirection;
-  }) => React.ReactNode;
+  footer?: (
+    props: TransferListProps<RecordType>,
+    info?: {
+      direction: TransferDirection;
+    },
+  ) => React.ReactNode;
   rowKey?: (record: RecordType) => string;
   onSearch?: (direction: TransferDirection, value: string) => void;
   onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
@@ -348,7 +351,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
   renderTransfer = (transferLocale: TransferLocale) => (
     <ConfigConsumer>
       {({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => (
-        <FormItemStatusContext.Consumer>
+        <FormItemInputContext.Consumer>
           {({ hasFeedback, status: contextStatus }) => {
             const {
               prefixCls: customizePrefixCls,
@@ -458,7 +461,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
               </div>
             );
           }}
-        </FormItemStatusContext.Consumer>
+        </FormItemInputContext.Consumer>
       )}
     </ConfigConsumer>
   );
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 16d7f27186..be69a2a862 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -18,7 +18,7 @@ import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
-import { FormItemStatusContext } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 
 type RawValue = string | number;
@@ -104,8 +104,8 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   const isMultiple = !!(treeCheckable || multiple);
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
 
-  // ===================== Status =====================
-  const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext);
+  // ===================== Form =====================
+  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Icons =====================
@@ -153,6 +153,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       [`${prefixCls}-sm`]: mergedSize === 'small',
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-borderless`]: !bordered,
+      [`${prefixCls}-in-form-item`]: isFormItemInput,
     },
     getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
     className,
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 305caad216..5f2a385fee 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import RcUpload, { UploadProps as RcUploadProps } from 'rc-upload';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
+import { useContext } from 'react';
+import { FormItemInputContext } from '../form/context';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
 import {
@@ -300,6 +302,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const prefixCls = getPrefixCls('upload', customizePrefixCls);
 
+  const { isFormItemInput } = useContext(FormItemInputContext);
+
   const rcUploadProps = {
     onBatchStart,
     onError,
@@ -373,6 +377,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
         [`${prefixCls}-drag-hover`]: dragState === 'dragover',
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-in-form-item`]: isFormItemInput,
       },
       className,
     );
@@ -399,6 +404,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     [`${prefixCls}-select-${listType}`]: true,
     [`${prefixCls}-disabled`]: disabled,
     [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-in-form-item`]: isFormItemInput,
   });
 
   const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => (
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index d43fa5fb08..0b8471194e 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3806,7 +3806,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
             class=""
           >
             <div
-              class="ant-upload ant-upload-select ant-upload-select-text"
+              class="ant-upload ant-upload-select ant-upload-select-text ant-upload-in-form-item"
             >
               <span
                 class="ant-upload"
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index d9e77dfba2..9a08340a85 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -3590,7 +3590,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
             class=""
           >
             <div
-              class="ant-upload ant-upload-select ant-upload-select-text"
+              class="ant-upload ant-upload-select ant-upload-select-text ant-upload-in-form-item"
             >
               <span
                 class="ant-upload"
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 49ba7f211b..fe6fbf7e48 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -137,6 +137,14 @@
     display: inline-block;
     width: 100%;
   }
+
+  &&-in-form-item {
+    background: transparent;
+
+    &.@{upload-prefix-cls}-drag {
+      background: @background-color-light;
+    }
+  }
 }
 
 .@{upload-prefix-cls}-list {
diff --git a/components/upload/style/index.tsx b/components/upload/style/index.tsx
index 582def0ccd..591032d5dd 100644
--- a/components/upload/style/index.tsx
+++ b/components/upload/style/index.tsx
@@ -2,6 +2,7 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
+// deps-lint-skip: form
 import '../../button/style';
 import '../../progress/style';
 import '../../tooltip/style';