feat: Form disabled (#35210)

* feat: add form disabled

* feat: add form disabled

* feat: add radio disabled

* feat: update snap

* feat: add test case

components/button/button.tsx

@@ -9,6 +9,7 @@ import Wave from '../_util/wave';
 import { tuple } from '../_util/type';
 import devWarning from '../_util/devWarning';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import LoadingIcon from './LoadingIcon';
 import { cloneElement } from '../_util/reactNode';
 
@@ -101,6 +102,7 @@ export interface BaseButtonProps {
    */
   shape?: ButtonShape;
   size?: SizeType;
+  disabled?: boolean;
   loading?: boolean | { delay?: number };
   prefixCls?: string;
   className?: string;
@@ -144,6 +146,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     danger,
     shape = 'default',
     size: customizeSize,
+    disabled: customDisabled,
     className,
     children,
     icon,
@@ -156,6 +159,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   } = props;
 
   const size = React.useContext(SizeContext);
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const groupSize = React.useContext(GroupSizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
@@ -209,9 +216,9 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   React.useEffect(fixTwoCNChar, [buttonRef]);
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
-    const { onClick, disabled } = props;
+    const { onClick } = props;
     // https://github.com/ant-design/ant-design/issues/30207
-    if (innerLoading || disabled) {
+    if (innerLoading || mergedDisabled) {
       e.preventDefault();
       return;
     }
@@ -284,6 +291,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
       type={htmlType}
       className={classes}
       onClick={handleClick}
+      disabled={mergedDisabled}
       ref={buttonRef}
     >
       {iconNode}

components/cascader/index.tsx

@@ -18,6 +18,7 @@ import devWarning from '../_util/devWarning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import getIcons from '../select/utils/iconUtil';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 import { FormItemInputContext } from '../form/context';
@@ -98,6 +99,7 @@ type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps;
 export type CascaderProps<DataNodeType> = UnionCascaderProps & {
   multiple?: boolean;
   size?: SizeType;
+  disabled?: boolean;
   bordered?: boolean;
   placement?: SelectCommonPlacement;
   suffixIcon?: React.ReactNode;
@@ -114,6 +116,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const {
     prefixCls: customizePrefixCls,
     size: customizeSize,
+    disabled: customDisabled,
     className,
     multiple,
     bordered = true,
@@ -212,6 +215,10 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const size = React.useContext(SizeContext);
   const mergedSize = customizeSize || size;
 
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   // ===================== Icon ======================
   let mergedExpandIcon = expandIcon;
   if (!expandIcon) {
@@ -267,6 +274,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
         getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
         className,
       )}
+      disabled={mergedDisabled}
       {...(restProps as any)}
       direction={mergedDirection}
       placement={getPlacement()}

components/config-provider/DisabledContext.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export type DisabledType = true | false | undefined;
+
+const DisabledContext = React.createContext<DisabledType>(false);
+
+export interface DisabledContextProps {
+  disabled?: DisabledType;
+  children?: React.ReactNode;
+}
+
+export const DisabledContextProvider: React.FC<DisabledContextProps> = ({ children, disabled }) => {
+  const originDisabled = React.useContext(DisabledContext);
+  return (
+    <DisabledContext.Provider value={disabled || originDisabled}>
+      {children}
+    </DisabledContext.Provider>
+  );
+};
+
+export default DisabledContext;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -10,6 +10,7 @@ import { GenerateConfig } from 'rc-picker/lib/generate/index';
 import enUS from '../locale/en_US';
 import { ConfigConsumerProps, ConfigContext } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
+import DisabledContext from '../../config-provider/DisabledContext';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { Components, getTimeProps, PickerLocale, RangePickerProps } from '.';
@@ -48,6 +49,7 @@ export default function generateRangePicker<DateType>(
         className,
         placement,
         size: customizeSize,
+        disabled: customDisabled,
         bordered = true,
         placeholder,
         status: customStatus,
@@ -65,65 +67,73 @@ export default function generateRangePicker<DateType>(
       const rootPrefixCls = getPrefixCls();
 
       return (
-        <SizeContext.Consumer>
+        <DisabledContext.Consumer>
-          {size => {
+          {disabled => {
-            const mergedSize = customizeSize || size;
+            const mergedDisabled = customDisabled || disabled;
-
             return (
-              <FormItemInputContext.Consumer>
+              <SizeContext.Consumer>
-                {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                {size => {
-                  const suffixNode = (
+                  const mergedSize = customizeSize || size;
-                    <>
-                      {picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                      {hasFeedback && feedbackIcon}
-                    </>
-                  );
 
                   return (
-                    <RCRangePicker<DateType>
+                    <FormItemInputContext.Consumer>
-                      separator={
+                      {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
-                        <span aria-label="to" className={`${prefixCls}-separator`}>
+                        const suffixNode = (
-                          <SwapRightOutlined />
+                          <>
-                        </span>
+                            {picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                      }
+                            {hasFeedback && feedbackIcon}
-                      ref={this.pickerRef}
+                          </>
-                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                        );
-                      placeholder={getRangePlaceholder(picker, locale, placeholder)}
+
-                      suffixIcon={suffixNode}
+                        return (
-                      clearIcon={<CloseCircleFilled />}
+                          <RCRangePicker<DateType>
-                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                            separator={
-                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                              <span aria-label="to" className={`${prefixCls}-separator`}>
-                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                                <SwapRightOutlined />
-                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                              </span>
-                      allowClear
+                            }
-                      transitionName={`${rootPrefixCls}-slide-up`}
+                            disabled={mergedDisabled}
-                      {...restProps}
+                            ref={this.pickerRef}
-                      {...additionalOverrideProps}
+                            dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                      className={classNames(
+                            placeholder={getRangePlaceholder(picker, locale, placeholder)}
-                        {
+                            suffixIcon={suffixNode}
-                          [`${prefixCls}-${mergedSize}`]: mergedSize,
+                            clearIcon={<CloseCircleFilled />}
-                          [`${prefixCls}-borderless`]: !bordered,
+                            prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                        },
+                            nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                        getStatusClassNames(
+                            superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                          prefixCls as string,
+                            superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                          getMergedStatus(contextStatus, customStatus),
+                            allowClear
-                          hasFeedback,
+                            transitionName={`${rootPrefixCls}-slide-up`}
-                        ),
+                            {...restProps}
-                        className,
+                            {...additionalOverrideProps}
-                      )}
+                            className={classNames(
-                      locale={locale!.lang}
+                              {
-                      prefixCls={prefixCls}
+                                [`${prefixCls}-${mergedSize}`]: mergedSize,
-                      getPopupContainer={customGetPopupContainer || getPopupContainer}
+                                [`${prefixCls}-borderless`]: !bordered,
-                      generateConfig={generateConfig}
+                              },
-                      components={Components}
+                              getStatusClassNames(
-                      direction={direction}
+                                prefixCls as string,
-                    />
+                                getMergedStatus(contextStatus, customStatus),
+                                hasFeedback,
+                              ),
+                              className,
+                            )}
+                            locale={locale!.lang}
+                            prefixCls={prefixCls}
+                            getPopupContainer={customGetPopupContainer || getPopupContainer}
+                            generateConfig={generateConfig}
+                            components={Components}
+                            direction={direction}
+                          />
+                        );
+                      }}
+                    </FormItemInputContext.Consumer>
                   );
                 }}
-              </FormItemInputContext.Consumer>
+              </SizeContext.Consumer>
             );
           }}
-        </SizeContext.Consumer>
+        </DisabledContext.Consumer>
       );
     };
 

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -13,6 +13,7 @@ import devWarning from '../../_util/devWarning';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import SizeContext from '../../config-provider/SizeContext';
+import DisabledContext from '../../config-provider/DisabledContext';
 import {
   PickerProps,
   PickerLocale,
@@ -72,6 +73,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           getPopupContainer: customizeGetPopupContainer,
           className,
           size: customizeSize,
+          disabled: customDisabled,
           bordered = true,
           placement,
           placeholder,
@@ -100,61 +102,72 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const rootPrefixCls = getPrefixCls();
 
         return (
-          <SizeContext.Consumer>
+          <DisabledContext.Consumer>
-            {size => {
+            {disabled => {
-              const mergedSize = customizeSize || size;
+              const mergedDisabled = customDisabled || disabled;
-
               return (
-                <FormItemInputContext.Consumer>
+                <SizeContext.Consumer>
-                  {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                  {size => {
-                    const suffixNode = (
+                    const mergedSize = customizeSize || size;
-                      <>
-                        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                        {hasFeedback && feedbackIcon}
-                      </>
-                    );
-
                     return (
-                      <RCPicker<DateType>
+                      <FormItemInputContext.Consumer>
-                        ref={this.pickerRef}
+                        {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
-                        placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+                          const suffixNode = (
-                        suffixIcon={suffixNode}
+                            <>
-                        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                              {mergedPicker === 'time' ? (
-                        clearIcon={<CloseCircleFilled />}
+                                <ClockCircleOutlined />
-                        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                              ) : (
-                        nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                                <CalendarOutlined />
-                        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                              )}
-                        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                              {hasFeedback && feedbackIcon}
-                        allowClear
+                            </>
-                        transitionName={`${rootPrefixCls}-slide-up`}
+                          );
-                        {...additionalProps}
+
-                        {...restProps}
+                          return (
-                        {...additionalOverrideProps}
+                            <RCPicker<DateType>
-                        locale={locale!.lang}
+                              ref={this.pickerRef}
-                        className={classNames(
+                              placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
-                          {
+                              suffixIcon={suffixNode}
-                            [`${prefixCls}-${mergedSize}`]: mergedSize,
+                              dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                            [`${prefixCls}-borderless`]: !bordered,
+                              clearIcon={<CloseCircleFilled />}
-                          },
+                              prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                          getStatusClassNames(
+                              nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                            prefixCls as string,
+                              superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                            getMergedStatus(contextStatus, customStatus),
+                              superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                            hasFeedback,
+                              allowClear
-                          ),
+                              transitionName={`${rootPrefixCls}-slide-up`}
-                          className,
+                              {...additionalProps}
-                        )}
+                              {...restProps}
-                        prefixCls={prefixCls}
+                              {...additionalOverrideProps}
-                        getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+                              locale={locale!.lang}
-                        generateConfig={generateConfig}
+                              className={classNames(
-                        components={Components}
+                                {
-                        direction={direction}
+                                  [`${prefixCls}-${mergedSize}`]: mergedSize,
-                      />
+                                  [`${prefixCls}-borderless`]: !bordered,
+                                },
+                                getStatusClassNames(
+                                  prefixCls as string,
+                                  getMergedStatus(contextStatus, customStatus),
+                                  hasFeedback,
+                                ),
+                                className,
+                              )}
+                              prefixCls={prefixCls}
+                              getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+                              generateConfig={generateConfig}
+                              components={Components}
+                              direction={direction}
+                              disabled={mergedDisabled}
+                            />
+                          );
+                        }}
+                      </FormItemInputContext.Consumer>
                     );
                   }}
-                </FormItemInputContext.Consumer>
+                </SizeContext.Consumer>
               );
             }}
-          </SizeContext.Consumer>
+          </DisabledContext.Consumer>
         );
       };
 

components/form/Form.tsx

@@ -11,6 +11,7 @@ import { FormContext, FormContextProps } from './context';
 import { FormLabelAlign } from './interface';
 import useForm, { FormInstance } from './hooks/useForm';
 import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
+import DisabledContext, { DisabledContextProvider } from '../config-provider/DisabledContext';
 
 export type RequiredMark = boolean | 'optional';
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
@@ -26,6 +27,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
   wrapperCol?: ColProps;
   form?: FormInstance<Values>;
   size?: SizeType;
+  disabled?: boolean;
   scrollToFirstError?: Options | boolean;
   requiredMark?: RequiredMark;
   /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
@@ -34,12 +36,14 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
 
 const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
   const contextSize = React.useContext(SizeContext);
+  const contextDisabled = React.useContext(DisabledContext);
   const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext);
 
   const {
     prefixCls: customizePrefixCls,
     className = '',
     size = contextSize,
+    disabled = contextDisabled,
     form,
     colon,
     labelAlign,
@@ -122,18 +126,20 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   };
 
   return (
-    <SizeContextProvider size={size}>
+    <DisabledContextProvider disabled={disabled}>
-      <FormContext.Provider value={formContextValue}>
+      <SizeContextProvider size={size}>
-        <FieldForm
+        <FormContext.Provider value={formContextValue}>
-          id={name}
+          <FieldForm
-          {...restFormProps}
+            id={name}
-          name={name}
+            {...restFormProps}
-          onFinishFailed={onInternalFinishFailed}
+            name={name}
-          form={wrapForm}
+            onFinishFailed={onInternalFinishFailed}
-          className={formClassName}
+            form={wrapForm}
-        />
+            className={formClassName}
-      </FormContext.Provider>
+          />
-    </SizeContextProvider>
+        </FormContext.Provider>
+      </SizeContextProvider>
+    </DisabledContextProvider>
   );
 };
 

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -1374,6 +1374,793 @@ exports[`renders ./components/form/demo/dep-debug.md correctly 1`] = `
 </form>
 `;
 
+exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        for="disabled"
+        title="Form disabled"
+      >
+        Form disabled
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <label
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+          >
+            <span
+              class="ant-checkbox ant-checkbox-checked"
+            >
+              <input
+                checked=""
+                class="ant-checkbox-input"
+                id="disabled"
+                type="checkbox"
+              />
+              <span
+                class="ant-checkbox-inner"
+              />
+            </span>
+            <span>
+              disabled
+            </span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Radio"
+      >
+        Radio
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-radio-group ant-radio-group-outline"
+          >
+            <label
+              class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
+            >
+              <span
+                class="ant-radio ant-radio-disabled"
+              >
+                <input
+                  class="ant-radio-input"
+                  disabled=""
+                  type="radio"
+                  value="apple"
+                />
+                <span
+                  class="ant-radio-inner"
+                />
+              </span>
+              <span>
+                 Apple 
+              </span>
+            </label>
+            <label
+              class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
+            >
+              <span
+                class="ant-radio ant-radio-disabled"
+              >
+                <input
+                  class="ant-radio-input"
+                  disabled=""
+                  type="radio"
+                  value="pear"
+                />
+                <span
+                  class="ant-radio-inner"
+                />
+              </span>
+              <span>
+                 Pear 
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Input"
+      >
+        Input
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input ant-input-disabled"
+            disabled=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Select"
+      >
+        Select
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-activedescendant="undefined_list_0"
+                  aria-autocomplete="list"
+                  aria-controls="undefined_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-owns="undefined_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  disabled=""
+                  readonly=""
+                  role="combobox"
+                  style="opacity:0"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="TreeSelect"
+      >
+        TreeSelect
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="undefined_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-owns="undefined_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  disabled=""
+                  readonly=""
+                  role="combobox"
+                  style="opacity:0"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Cascader"
+      >
+        Cascader
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="undefined_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-owns="undefined_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  disabled=""
+                  readonly=""
+                  role="combobox"
+                  style="opacity:0"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="DatePicker"
+      >
+        DatePicker
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-picker ant-picker-disabled"
+          >
+            <div
+              class="ant-picker-input"
+            >
+              <input
+                autocomplete="off"
+                disabled=""
+                placeholder="Select date"
+                readonly=""
+                size="12"
+                title=""
+                value=""
+              />
+              <span
+                class="ant-picker-suffix"
+              >
+                <span
+                  aria-label="calendar"
+                  class="anticon anticon-calendar"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="calendar"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="RangePicker"
+      >
+        RangePicker
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-picker ant-picker-range ant-picker-disabled"
+          >
+            <div
+              class="ant-picker-input ant-picker-input-active"
+            >
+              <input
+                autocomplete="off"
+                disabled=""
+                placeholder="Start date"
+                readonly=""
+                size="12"
+                value=""
+              />
+            </div>
+            <div
+              class="ant-picker-range-separator"
+            >
+              <span
+                aria-label="to"
+                class="ant-picker-separator"
+              >
+                <span
+                  aria-label="swap-right"
+                  class="anticon anticon-swap-right"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="swap-right"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-picker-input"
+            >
+              <input
+                autocomplete="off"
+                disabled=""
+                placeholder="End date"
+                readonly=""
+                size="12"
+                value=""
+              />
+            </div>
+            <div
+              class="ant-picker-active-bar"
+              style="left:0;width:0;position:absolute"
+            />
+            <span
+              class="ant-picker-suffix"
+            >
+              <span
+                aria-label="calendar"
+                class="anticon anticon-calendar"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="calendar"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="InputNumber"
+      >
+        InputNumber
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-input-number ant-input-number-in-form-item ant-input-number-disabled"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                aria-label="Decrease Value"
+                class="ant-input-number-handler ant-input-number-handler-down"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-input-number-handler-down-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="ant-input-number-input"
+                disabled=""
+                role="spinbutton"
+                step="1"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="TextArea"
+      >
+        TextArea
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <textarea
+            class="ant-input ant-input-disabled"
+            disabled=""
+            rows="4"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Switch"
+      >
+        Switch
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            aria-checked="false"
+            class="ant-switch ant-switch-disabled"
+            disabled=""
+            role="switch"
+            type="button"
+          >
+            <div
+              class="ant-switch-handle"
+            />
+            <span
+              class="ant-switch-inner"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Button"
+      >
+        Button
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-14 ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-default"
+            disabled=""
+            type="button"
+          >
+            <span>
+              Button
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/form/__tests__/index.test.js

@@ -9,12 +9,23 @@ import Input from '../../input';
 import Button from '../../button';
 import Select from '../../select';
 
+import Checkbox from '../../checkbox';
+import Radio from '../../radio';
+import TreeSelect from '../../tree-select';
+import Cascader from '../../cascader';
+import DatePicker from '../../date-picker';
+import InputNumber from '../../input-number';
+import Switch from '../../switch';
+
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep, render, fireEvent } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import zhCN from '../../locale/zh_CN';
 
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+
 jest.mock('scroll-into-view-if-needed');
 
 describe('Form', () => {
@@ -872,6 +883,96 @@ describe('Form', () => {
     expect(wrapper.find('form').hasClass('ant-form-hide-required-mark')).toBeTruthy();
   });
 
+  it('form should support disabled', () => {
+    const App = () => {
+      const [componentDisabled, setComponentDisabled] = React.useState(false);
+      const onFormLayoutChange = ({ disabled }) => {
+        setComponentDisabled(disabled);
+      };
+      return (
+        <Form
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 14 }}
+          layout="horizontal"
+          initialValues={{ disabled: componentDisabled }}
+          onValuesChange={onFormLayoutChange}
+          disabled={componentDisabled}
+        >
+          <Form.Item label="Form disabled" name="disabled" valuePropName="checked">
+            <Checkbox>disabled</Checkbox>
+          </Form.Item>
+          <Form.Item label="Radio">
+            <Radio.Group>
+              <Radio value="apple"> Apple </Radio>
+              <Radio value="pear"> Pear </Radio>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label="Input">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Select">
+            <Select>
+              <Select.Option value="demo">Demo</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item label="TreeSelect">
+            <TreeSelect
+              treeData={[
+                {
+                  title: 'Light',
+                  value: 'light',
+                  children: [{ title: 'Bamboo', value: 'bamboo' }],
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item label="Cascader">
+            <Cascader
+              options={[
+                {
+                  value: 'zhejiang',
+                  label: 'Zhejiang',
+                  children: [
+                    {
+                      value: 'hangzhou',
+                      label: 'Hangzhou',
+                    },
+                  ],
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item label="DatePicker">
+            <DatePicker />
+          </Form.Item>
+          <Form.Item label="RangePicker">
+            <RangePicker />
+          </Form.Item>
+          <Form.Item label="InputNumber">
+            <InputNumber />
+          </Form.Item>
+          <Form.Item label="TextArea">
+            <TextArea rows={4} />
+          </Form.Item>
+          <Form.Item label="Switch" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+          <Form.Item label="Button">
+            <Button>Button</Button>
+          </Form.Item>
+        </Form>
+      );
+    };
+
+    const wrapper = mount(<App />);
+
+    expect(wrapper.render()).toMatchSnapshot();
+    act(() => {
+      wrapper.find('.ant-checkbox-input').at(0).simulate('change');
+    });
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('_internalItemRender api test', () => {
     const wrapper = mount(
       <Form>

components/form/demo/disabled.md

@@ -0,0 +1,113 @@
+---
+order: 3.1
+title:
+  zh-CN: 表单禁用
+  en-US: Form disabled
+---
+
+## zh-CN
+
+设置表单组件禁用，仅对 antd 组件有效。
+
+## en-US
+
+Set component disabled, only works for antd components.
+
+```tsx
+import React, { useState } from 'react';
+import {
+  Form,
+  Input,
+  Button,
+  Radio,
+  Select,
+  Cascader,
+  DatePicker,
+  InputNumber,
+  TreeSelect,
+  Switch,
+  Checkbox,
+} from 'antd';
+
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+
+const FormDisabledDemo = () => {
+  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
+  const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
+    setComponentDisabled(disabled);
+  };
+
+  return (
+    <Form
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 14 }}
+      layout="horizontal"
+      initialValues={{ disabled: componentDisabled }}
+      onValuesChange={onFormLayoutChange}
+      disabled={componentDisabled}
+    >
+      <Form.Item label="Form disabled" name="disabled" valuePropName="checked">
+        <Checkbox>disabled</Checkbox>
+      </Form.Item>
+      <Form.Item label="Radio">
+        <Radio.Group>
+          <Radio value="apple"> Apple </Radio>
+          <Radio value="pear"> Pear </Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="Input">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Select">
+        <Select>
+          <Select.Option value="demo">Demo</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item label="TreeSelect">
+        <TreeSelect
+          treeData={[
+            { title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label="Cascader">
+        <Cascader
+          options={[
+            {
+              value: 'zhejiang',
+              label: 'Zhejiang',
+              children: [
+                {
+                  value: 'hangzhou',
+                  label: 'Hangzhou',
+                },
+              ],
+            },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label="DatePicker">
+        <DatePicker />
+      </Form.Item>
+      <Form.Item label="RangePicker">
+        <RangePicker />
+      </Form.Item>
+      <Form.Item label="InputNumber">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item label="TextArea">
+        <TextArea rows={4} />
+      </Form.Item>
+      <Form.Item label="Switch" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      <Form.Item label="Button">
+        <Button>Button</Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default () => <FormDisabledDemo />;
+```

components/input-number/index.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { cloneElement } from '../_util/reactNode';
 import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
@@ -19,6 +20,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   addonAfter?: React.ReactNode;
   prefix?: React.ReactNode;
   size?: SizeType;
+  disabled?: boolean;
   bordered?: boolean;
   status?: InputStatus;
   controls?: boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode };
@@ -35,6 +37,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const {
     className,
     size: customizeSize,
+    disabled: customDisabled,
     prefixCls: customizePrefixCls,
     addonBefore,
     addonAfter,
@@ -75,6 +78,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const mergeSize = customizeSize || size;
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const inputNumberClass = classNames(
     {
       [`${prefixCls}-lg`]: mergeSize === 'large',
@@ -91,6 +98,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   let element = (
     <RcInputNumber
       ref={inputRef}
+      disabled={mergedDisabled}
       className={inputNumberClass}
       upHandler={upIcon}
       downHandler={downIcon}
@@ -168,7 +176,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       <div className={mergedGroupClassName} style={props.style}>
         <div className={mergedWrapperClassName}>
           {addonBeforeNode && <NoFormStatus>{addonBeforeNode}</NoFormStatus>}
-          {cloneElement(element, { style: null })}
+          {cloneElement(element, { style: null, disabled: mergedDisabled })}
           {addonAfterNode && <NoFormStatus>{addonAfterNode}</NoFormStatus>}
         </div>
       </div>

components/input/Input.tsx

@@ -4,6 +4,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
@@ -111,6 +112,7 @@ export interface InputProps
     'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'
   > {
   size?: SizeType;
+  disabled?: boolean;
   status?: InputStatus;
   bordered?: boolean;
   [key: `data-${string}`]: string;
@@ -122,6 +124,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     bordered = true,
     status: customStatus,
     size: customSize,
+    disabled: customDisabled,
     onBlur,
     onFocus,
     suffix,
@@ -139,6 +142,10 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const size = React.useContext(SizeContext);
   const mergedSize = customSize || size;
 
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   // ===================== Status =====================
   const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
@@ -209,6 +216,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       prefixCls={prefixCls}
       autoComplete={input?.autoComplete}
       {...rest}
+      disabled={mergedDisabled || undefined}
       onBlur={handleBlur}
       onFocus={handleFocus}
       suffix={suffixNode}

components/input/TextArea.tsx

@@ -6,6 +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 DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
 import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
 import ClearableLabeledInput from './ClearableLabeledInput';
@@ -44,6 +45,7 @@ export interface TextAreaProps extends RcTextAreaProps {
   bordered?: boolean;
   showCount?: boolean | ShowCountProps;
   size?: SizeType;
+  disabled?: boolean;
   status?: InputStatus;
 }
 
@@ -63,6 +65,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       className,
       style,
       size: customizeSize,
+      disabled: customDisabled,
       onCompositionStart,
       onCompositionEnd,
       onChange,
@@ -74,6 +77,10 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
+    // ===================== Disabled =====================
+    const disabled = React.useContext(DisabledContext);
+    const mergedDisabled = customDisabled || disabled;
+
     const {
       status: contextStatus,
       hasFeedback,
@@ -173,6 +180,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const textArea = (
       <RcTextArea
         {...omit(props, ['allowClear'])}
+        disabled={mergedDisabled}
         className={classNames(
           {
             [`${prefixCls}-borderless`]: !bordered,
@@ -201,6 +209,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     // TextArea
     const textareaNode = (
       <ClearableLabeledInput
+        disabled={mergedDisabled}
         {...props}
         prefixCls={prefixCls}
         direction={direction}

components/radio/interface.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AbstractCheckboxGroupProps } from '../checkbox/Group';
 import { AbstractCheckboxProps } from '../checkbox/Checkbox';
 import { SizeType } from '../config-provider/SizeContext';
+import { DisabledType } from '../config-provider/DisabledContext';
 
 export type RadioGroupButtonStyle = 'outline' | 'solid';
 export type RadioGroupOptionType = 'default' | 'button';
@@ -11,6 +12,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   value?: any;
   onChange?: (e: RadioChangeEvent) => void;
   size?: SizeType;
+  disabled?: DisabledType;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   name?: string;

components/radio/radio.tsx

@@ -7,6 +7,7 @@ import { FormItemInputContext } from '../form/context';
 import { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
+import DisabledContext from '../config-provider/DisabledContext';
 import devWarning from '../_util/devWarning';
 
 const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (props, ref) => {
@@ -27,7 +28,14 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
     groupContext?.onChange?.(e);
   };
 
-  const { prefixCls: customizePrefixCls, className, children, style, ...restProps } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    children,
+    style,
+    disabled: customDisabled,
+    ...restProps
+  } = props;
   const radioPrefixCls = getPrefixCls('radio', customizePrefixCls);
   const prefixCls =
     (groupContext?.optionType || radioOptionTypeContext) === 'button'
@@ -35,11 +43,16 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
       : radioPrefixCls;
 
   const radioProps: RadioProps = { ...restProps };
+
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  radioProps.disabled = customDisabled || disabled;
+
   if (groupContext) {
     radioProps.name = groupContext.name;
     radioProps.onChange = onChange;
     radioProps.checked = props.value === groupContext.value;
-    radioProps.disabled = props.disabled || groupContext.disabled;
+    radioProps.disabled = radioProps.disabled || groupContext.disabled;
   }
   const wrapperClassString = classNames(
     `${prefixCls}-wrapper`,

components/select/index.tsx

@@ -10,6 +10,7 @@ import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import getIcons from './utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
@@ -32,6 +33,7 @@ export interface InternalSelectProps<
 > extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
   suffixIcon?: React.ReactNode;
   size?: SizeType;
+  disabled?: boolean;
   mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
   bordered?: boolean;
 }
@@ -61,6 +63,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     placement,
     listItemHeight = 24,
     size: customizeSize,
+    disabled: customDisabled,
     notFoundContent,
     status: customStatus,
     showArrow,
@@ -135,6 +138,11 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   });
 
   const mergedSize = customizeSize || size;
+
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const mergedClassName = classNames(
     {
       [`${prefixCls}-lg`]: mergedSize === 'large',
@@ -183,6 +191,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       dropdownClassName={rcSelectRtlDropdownClassName}
       showArrow={hasFeedback || showArrow}
+      disabled={mergedDisabled}
     />
   );
 };

components/switch/index.tsx

@@ -6,6 +6,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import devWarning from '../_util/devWarning';
 
 export type SwitchSize = 'small' | 'default';
@@ -41,9 +42,9 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
     {
       prefixCls: customizePrefixCls,
       size: customizeSize,
+      disabled: customDisabled,
       loading,
       className = '',
-      disabled,
       ...props
     },
     ref,
@@ -56,6 +57,11 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
 
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
+
+    // ===================== Disabled =====================
+    const disabled = React.useContext(DisabledContext);
+    const mergedDisabled = customDisabled || disabled || loading;
+
     const prefixCls = getPrefixCls('switch', customizePrefixCls);
     const loadingIcon = (
       <div className={`${prefixCls}-handle`}>
@@ -78,7 +84,7 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
           {...props}
           prefixCls={prefixCls}
           className={classes}
-          disabled={disabled || loading}
+          disabled={mergedDisabled}
           ref={ref}
           loadingIcon={loadingIcon}
         />

components/tree-select/index.tsx

@@ -18,6 +18,7 @@ import { SwitcherIcon } from '../tree/Tree';
 import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 import { FormItemInputContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
@@ -47,6 +48,7 @@ export interface TreeSelectProps<
   > {
   suffixIcon?: React.ReactNode;
   size?: SizeType;
+  disabled?: boolean;
   placement?: SelectCommonPlacement;
   bordered?: boolean;
   treeLine?: TreeProps['showLine'];
@@ -58,6 +60,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   {
     prefixCls: customizePrefixCls,
     size: customizeSize,
+    disabled: customDisabled,
     bordered = true,
     className,
     treeCheckable,
@@ -153,6 +156,10 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   };
 
   const mergedSize = customizeSize || size;
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const mergedClassName = classNames(
     !customizePrefixCls && treeSelectPrefixCls,
     {
@@ -171,6 +178,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     <RcTreeSelect
       virtual={virtual}
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+      disabled={mergedDisabled}
       {...selectProps}
       ref={ref as any}
       prefixCls={prefixCls}