From e3974850fad158364c2caefb3dc17aa99056d9d9 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 14 Jun 2022 14:00:33 +0800
Subject: [PATCH 01/13] fix: Radio.Group focus and blur should work (#36041)

---
 components/radio/__tests__/group.test.js |  14 ++-
 components/radio/group.tsx               | 154 +++++++++++------------
 components/radio/interface.tsx           |   2 +
 3 files changed, 91 insertions(+), 79 deletions(-)

diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js
index cf62cccc24..dcb4203537 100644
--- a/components/radio/__tests__/group.test.js
+++ b/components/radio/__tests__/group.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import { render as testLibRender } from '@testing-library/react';
+import { fireEvent, render as testLibRender } from '@testing-library/react';
 import Radio from '..';
 
 describe('Radio Group', () => {
@@ -224,4 +224,16 @@ describe('Radio Group', () => {
       });
     });
   });
+
+  it('onBlur & onFocus should work', () => {
+    const handleBlur = jest.fn();
+    const handleFocus = jest.fn();
+    const { container } = testLibRender(
+      <Radio.Group options={['1', '2', '3']} onBlur={handleBlur} onFocus={handleFocus} />,
+    );
+    fireEvent.focus(container.firstChild);
+    expect(handleFocus).toHaveBeenCalledTimes(1);
+    fireEvent.blur(container.firstChild);
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index 76dead66dc..60ea4703c8 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -28,93 +28,91 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     }
   };
 
-  const renderGroup = () => {
-    const {
-      prefixCls: customizePrefixCls,
-      className = '',
-      options,
-      buttonStyle = 'outline' as RadioGroupButtonStyle,
-      disabled,
-      children,
-      size: customizeSize,
-      style,
-      id,
-      onMouseEnter,
-      onMouseLeave,
-    } = props;
-    const prefixCls = getPrefixCls('radio', customizePrefixCls);
-    const groupPrefixCls = `${prefixCls}-group`;
-    let childrenToRender = children;
-    // 如果存在 options, 优先使用
-    if (options && options.length > 0) {
-      childrenToRender = options.map(option => {
-        if (typeof option === 'string' || typeof option === 'number') {
-          // 此处类型自动推导为 string
-          return (
-            <Radio
-              key={option.toString()}
-              prefixCls={prefixCls}
-              disabled={disabled}
-              value={option}
-              checked={value === option}
-            >
-              {option}
-            </Radio>
-          );
-        }
-        // 此处类型自动推导为 { label: string value: string }
+  const {
+    prefixCls: customizePrefixCls,
+    className = '',
+    options,
+    buttonStyle = 'outline' as RadioGroupButtonStyle,
+    disabled,
+    children,
+    size: customizeSize,
+    style,
+    id,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+  } = props;
+  const prefixCls = getPrefixCls('radio', customizePrefixCls);
+  const groupPrefixCls = `${prefixCls}-group`;
+  let childrenToRender = children;
+  // 如果存在 options, 优先使用
+  if (options && options.length > 0) {
+    childrenToRender = options.map(option => {
+      if (typeof option === 'string' || typeof option === 'number') {
+        // 此处类型自动推导为 string
         return (
           <Radio
-            key={`radio-group-value-options-${option.value}`}
+            key={option.toString()}
             prefixCls={prefixCls}
-            disabled={option.disabled || disabled}
-            value={option.value}
-            checked={value === option.value}
-            style={option.style}
+            disabled={disabled}
+            value={option}
+            checked={value === option}
           >
-            {option.label}
+            {option}
           </Radio>
         );
-      });
-    }
+      }
+      // 此处类型自动推导为 { label: string value: string }
+      return (
+        <Radio
+          key={`radio-group-value-options-${option.value}`}
+          prefixCls={prefixCls}
+          disabled={option.disabled || disabled}
+          value={option.value}
+          checked={value === option.value}
+          style={option.style}
+        >
+          {option.label}
+        </Radio>
+      );
+    });
+  }
 
-    const mergedSize = customizeSize || size;
-    const classString = classNames(
-      groupPrefixCls,
-      `${groupPrefixCls}-${buttonStyle}`,
-      {
-        [`${groupPrefixCls}-${mergedSize}`]: mergedSize,
-        [`${groupPrefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-    );
-    return (
-      <div
-        {...getDataOrAriaProps(props)}
-        className={classString}
-        style={style}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        id={id}
-        ref={ref}
+  const mergedSize = customizeSize || size;
+  const classString = classNames(
+    groupPrefixCls,
+    `${groupPrefixCls}-${buttonStyle}`,
+    {
+      [`${groupPrefixCls}-${mergedSize}`]: mergedSize,
+      [`${groupPrefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
+  return (
+    <div
+      {...getDataOrAriaProps(props)}
+      className={classString}
+      style={style}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      id={id}
+      ref={ref}
+    >
+      <RadioGroupContextProvider
+        value={{
+          onChange: onRadioChange,
+          value,
+          disabled: props.disabled,
+          name: props.name,
+          optionType: props.optionType,
+        }}
       >
         {childrenToRender}
-      </div>
-    );
-  };
-
-  return (
-    <RadioGroupContextProvider
-      value={{
-        onChange: onRadioChange,
-        value,
-        disabled: props.disabled,
-        name: props.name,
-        optionType: props.optionType,
-      }}
-    >
-      {renderGroup()}
-    </RadioGroupContextProvider>
+      </RadioGroupContextProvider>
+    </div>
   );
 });
 
diff --git a/components/radio/interface.tsx b/components/radio/interface.tsx
index 89143e148f..e38d232829 100644
--- a/components/radio/interface.tsx
+++ b/components/radio/interface.tsx
@@ -20,6 +20,8 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   id?: string;
   optionType?: RadioGroupOptionType;
   buttonStyle?: RadioGroupButtonStyle;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
 export interface RadioGroupContextProps {

From 34dfb808ad6ed85a0b7d426d4e531487a39d2385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 15 Jun 2022 17:30:10 +0800
Subject: [PATCH 02/13] feat: Form support `setFieldValue` (#36058)

---
 components/form/index.en-US.md | 3 ++-
 components/form/index.zh-CN.md | 3 ++-
 package.json                   | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index ec0110ea83..50919c7689 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -245,7 +245,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 | resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void |  |
 | scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
 | setFields | Set fields status | (fields: [FieldData](#FieldData)\[]) => void |  |
-| setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (values) => void |  |
+| setFieldValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (name: [NamePath](#NamePath), value: any) => void | 4.22.0 |
+| setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void |  |
 | submit | Submit the form. It's same as click `submit` button | () => void |  |
 | validateFields | Validate fields | (nameList?: [NamePath](#NamePath)\[]) => Promise |  |
 
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index d4f94df523..3b82689f7b 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -244,7 +244,8 @@ Form.List 渲染表单相关操作函数。
 | resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void |  |
 | scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void |  |
 | setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)\[]) => void |  |
-| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (values) => void |  |
+| setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#NamePath), value: any) => void | 4.22.0 |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void |  |
 | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void |  |
 | validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)\[]) => Promise |  |
 
diff --git a/package.json b/package.json
index 2d4aa42010..f5037198a2 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,7 @@
     "rc-dialog": "~8.9.0",
     "rc-drawer": "~4.4.2",
     "rc-dropdown": "~4.0.0",
-    "rc-field-form": "~1.26.1",
+    "rc-field-form": "~1.27.0",
     "rc-image": "~5.7.0",
     "rc-input": "~0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",

From d692a88ed723a3bf038e0971e9913c6a62c2e0eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=B7=83=E0=B6=BA=E0=B7=94=E0=B6=BB=E0=B7=92=20=7C=20Sayu?=
 =?UTF-8?q?ri?= <85907926+sayuri-gi@users.noreply.github.com>
Date: Wed, 22 Jun 2022 18:38:21 +0700
Subject: [PATCH 03/13] feat: add si_LK locale (#36149)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* දින තේරුම සකස් කිරීම

* චීන ප්‍රලේඛනය යාවත්කාල කිරීම

* ඉංග්‍රීසි ප්‍රලේඛනය යාවත්කාල කිරීම

* තවත් දත්ත ඇතුල් කිරීම

* දින දසුනට භාෂාව යෙදීම

* ප්‍රධාන දේශීයකරණ සංරචකය යෙදීම

* සැපයුම්කරු සඳහා ගොනුව යෙදීම

* කාලය තේරීමට අදාළ සංරචකය යෙදීම

* යෝජනාව ඇතුළු කෙරිණි

Co-authored-by: Amumu <yoyo837@hotmail.com>

* නව ඇසුරුමට වෙනස් කළා

* ගොනුව යාවත්කාල කෙරිණි

Co-authored-by: Amumu <yoyo837@hotmail.com>
---
 components/calendar/locale/si_LK.tsx          |   3 +
 components/date-picker/locale/si_LK.tsx       |  28 ++++
 .../locale-provider/__tests__/index.test.js   |   2 +
 components/locale-provider/si_LK.tsx          |   3 +
 components/locale/si_LK.tsx                   | 136 ++++++++++++++++++
 components/time-picker/locale/si_LK.tsx       |   8 ++
 docs/react/i18n.en-US.md                      |   1 +
 docs/react/i18n.zh-CN.md                      |   1 +
 package.json                                  |   4 +-
 9 files changed, 184 insertions(+), 2 deletions(-)
 create mode 100644 components/calendar/locale/si_LK.tsx
 create mode 100644 components/date-picker/locale/si_LK.tsx
 create mode 100644 components/locale-provider/si_LK.tsx
 create mode 100644 components/locale/si_LK.tsx
 create mode 100644 components/time-picker/locale/si_LK.tsx

diff --git a/components/calendar/locale/si_LK.tsx b/components/calendar/locale/si_LK.tsx
new file mode 100644
index 0000000000..15c7d248cc
--- /dev/null
+++ b/components/calendar/locale/si_LK.tsx
@@ -0,0 +1,3 @@
+import siLK from '../../date-picker/locale/si_LK';
+
+export default siLK;
diff --git a/components/date-picker/locale/si_LK.tsx b/components/date-picker/locale/si_LK.tsx
new file mode 100644
index 0000000000..7408ebc55a
--- /dev/null
+++ b/components/date-picker/locale/si_LK.tsx
@@ -0,0 +1,28 @@
+import CalendarLocale from 'rc-picker/lib/locale/si_LK';
+import TimePickerLocale from '../../time-picker/locale/si_LK';
+import type { PickerLocale } from '../generatePicker';
+
+// Merge into a locale object
+const locale: PickerLocale = {
+  lang: {
+    placeholder: 'දිනය තෝරන්න',
+    yearPlaceholder: 'අවුරුද්ද තෝරන්න',
+    quarterPlaceholder: 'කාර්තුව තෝරන්න',
+    monthPlaceholder: 'මාසය තෝරන්න',
+    weekPlaceholder: 'සතිය තෝරන්න',
+    rangePlaceholder: ['ආරම්භක දිනය', 'නිමවන දිනය'],
+    rangeYearPlaceholder: ['ආර්ම්භක අවුරුද්ද', 'නිමවන අවුරුද්ද'],
+    rangeQuarterPlaceholder: ['ආරම්භක කාර්තුව', 'නිමවන කාර්තුව'],
+    rangeMonthPlaceholder: ['ආරම්භක මාසය', 'නිමවන මාසය'],
+    rangeWeekPlaceholder: ['ආරම්භක සතිය', 'නිමවන සතිය'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;
diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
index b87470b2ab..23f426d255 100644
--- a/components/locale-provider/__tests__/index.test.js
+++ b/components/locale-provider/__tests__/index.test.js
@@ -68,6 +68,7 @@ import ptBR from '../pt_BR';
 import ptPT from '../pt_PT';
 import roRO from '../ro_RO';
 import ruRU from '../ru_RU';
+import siLK from '../si_LK';
 import skSK from '../sk_SK';
 import slSI from '../sl_SI';
 import srRS from '../sr_RS';
@@ -134,6 +135,7 @@ const locales = [
   ptPT,
   roRO,
   ruRU,
+  siLK,
   skSK,
   slSI,
   srRS,
diff --git a/components/locale-provider/si_LK.tsx b/components/locale-provider/si_LK.tsx
new file mode 100644
index 0000000000..aa719688da
--- /dev/null
+++ b/components/locale-provider/si_LK.tsx
@@ -0,0 +1,3 @@
+import locale from '../locale/si_LK';
+
+export default locale;
diff --git a/components/locale/si_LK.tsx b/components/locale/si_LK.tsx
new file mode 100644
index 0000000000..e051b409c7
--- /dev/null
+++ b/components/locale/si_LK.tsx
@@ -0,0 +1,136 @@
+/* eslint-disable no-template-curly-in-string */
+import Pagination from 'rc-pagination/lib/locale/si_LK';
+import DatePicker from '../date-picker/locale/si_LK';
+import TimePicker from '../time-picker/locale/si_LK';
+import Calendar from '../calendar/locale/si_LK';
+import type { Locale } from '../locale-provider';
+
+const typeTemplate = '${label} වලංගු ${type} ක් නොවේ';
+
+const localeValues: Locale = {
+  locale: 'si',
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Calendar,
+  global: {
+    placeholder: 'කරුණාකර තෝරන්න',
+  },
+  Table: {
+    filterTitle: 'පෙරහන්',
+    filterConfirm: 'හරි',
+    filterReset: 'යළි සකසන්න',
+    filterEmptyText: 'පෙරහන් නැත',
+    filterCheckall: 'සියළු අථක තෝරන්න',
+    filterSearchPlaceholder: 'පෙරහන් තුළ සොයන්න',
+    emptyText: 'දත්ත නැත',
+    selectAll: 'වත්මන් පිටුව තෝරන්න',
+    selectInvert: 'වත්මන් පිටුව යටියනය',
+    selectNone: 'සියළු දත්ත ඉවතලන්න',
+    selectionAll: 'සියළු දත්ත තෝරන්න',
+    sortTitle: 'පෙළගැසීම',
+    expand: 'පේළිය දිගහරින්න',
+    collapse: 'පේළිය හකුළන්න',
+    triggerDesc: 'අවරෝහණව පෙළගැසීමට ඔබන්න',
+    triggerAsc: 'ආරෝහණව පෙළගැසීමට ඔබන්න',
+    cancelSort: 'පෙළගැසීම අවලංගු කිරීමට ඔබන්න',
+  },
+  Modal: {
+    okText: 'හරි',
+    cancelText: 'අවලංගු කරන්න',
+    justOkText: 'හරි',
+  },
+  Popconfirm: {
+    okText: 'හරි',
+    cancelText: 'අවලංගු කරන්න',
+  },
+  Transfer: {
+    titles: ['', ''],
+    searchPlaceholder: 'මෙතැන සොයන්න',
+    itemUnit: 'අථකය',
+    itemsUnit: 'අථක',
+    remove: 'ඉවත් කරන්න',
+    selectCurrent: 'වත්මන් පිටුව තෝරන්න',
+    removeCurrent: 'වත්මන් පිටුව ඉවත් කරන්න',
+    selectAll: 'සියළු දත්ත තෝරන්න',
+    removeAll: 'සියළු දත්ත ඉවතලන්න',
+    selectInvert: 'වත්මන් පිටුව යටියනය',
+  },
+  Upload: {
+    uploading: 'උඩුගත වෙමින්...',
+    removeFile: 'ගොනුව ඉවතලන්න',
+    uploadError: 'උඩුගත වීමේ දෝෂයකි',
+    previewFile: 'ගොනුවේ පෙරදසුන',
+    downloadFile: 'ගොනුව බාගන්න',
+  },
+  Empty: {
+    description: 'දත්ත නැත',
+  },
+  Icon: {
+    icon: 'නිරූපකය',
+  },
+  Text: {
+    edit: 'සංස්කරණය',
+    copy: 'පිටපත්',
+    copied: 'පිටපත් විය',
+    expand: 'විහිදුවන්න',
+  },
+  PageHeader: {
+    back: 'ආපසු',
+  },
+  Form: {
+    optional: '(විකල්පයකි)',
+    defaultValidateMessages: {
+      default: '${label} සඳහා ක්‍ෂේත්‍රය වලංගුකරණයේ දෝෂයකි',
+      required: '${label} ඇතුල් කරන්න',
+      enum: '[${enum}] වලින් එකක් ${label} විය යුතුය',
+      whitespace: '${label} හිස් අකුරක් නොවිය යුතුය',
+      date: {
+        format: '${label} දිනයේ ආකෘතිය වැරදිය',
+        parse: '${label} දිනයකට පරිවර්තනය කළ නොහැකිය',
+        invalid: '${label} වලංගු නොවන දිනයකි',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label} අකුරු ${len}ක් විය යුතුය',
+        min: '${label} අවමය අකුරු ${min}ක් විය යුතුය',
+        max: '${label} අකුරු ${max}ක් දක්වා විය යුතුය',
+        range: '${label} අකුරු ${min}-${max}ක් අතර විය යුතුය',
+      },
+      number: {
+        len: '${label} නිසැකව ${len} සමාන විය යුතුය',
+        min: '${label} අවමය ${min} විය යුතුය',
+        max: '${label} උපරිමය ${max} විය යුතුය',
+        range: '${label} නිසැකව ${min}-${max} අතර විය යුතුය',
+      },
+      array: {
+        len: '${len} ${label} විය යුතුය',
+        min: 'අවම වශයෙන් ${min} ${label}',
+        max: 'උපරිම වශයෙන් ${max} ${label}',
+        range: '${label} ගණන ${min}-${max} අතර විය යුතුය',
+      },
+      pattern: {
+        mismatch: '${pattern} රටාවට ${label} නොගැළපේ',
+      },
+    },
+  },
+  Image: {
+    preview: 'පෙරදසුන',
+  },
+};
+
+export default localeValues;
diff --git a/components/time-picker/locale/si_LK.tsx b/components/time-picker/locale/si_LK.tsx
new file mode 100644
index 0000000000..f0737dbcf1
--- /dev/null
+++ b/components/time-picker/locale/si_LK.tsx
@@ -0,0 +1,8 @@
+import type { TimePickerLocale } from '../index';
+
+const locale: TimePickerLocale = {
+  placeholder: 'වේලාව තෝරන්න',
+  rangePlaceholder: ['ආරම්භක වේලාව', 'නිමවන වේලාව'],
+};
+
+export default locale;
diff --git a/docs/react/i18n.en-US.md b/docs/react/i18n.en-US.md
index 6b4b07e9ce..724cda5983 100644
--- a/docs/react/i18n.en-US.md
+++ b/docs/react/i18n.en-US.md
@@ -81,6 +81,7 @@ The following languages are currently supported:
 | Portuguese               | pt_PT    |
 | Romanian                 | ro_RO    |
 | Russian                  | ru_RU    |
+| Sinhalese / Sinhala      | si_LK    |
 | Slovak                   | sk_SK    |
 | Serbian                  | sr_RS    |
 | Slovenian                | sl_SI    |
diff --git a/docs/react/i18n.zh-CN.md b/docs/react/i18n.zh-CN.md
index ac32d741b4..78ccfb3cb7 100644
--- a/docs/react/i18n.zh-CN.md
+++ b/docs/react/i18n.zh-CN.md
@@ -78,6 +78,7 @@ return (
 | 葡萄牙语             | pt_PT  |
 | 罗马尼亚语           | ro_RO  |
 | 俄罗斯语             | ru_RU  |
+| 僧伽罗语             | si_LK  |
 | 斯洛伐克语           | sk_SK  |
 | 塞尔维亚语           | sr_RS  |
 | 斯洛文尼亚语         | sl_SI  |
diff --git a/package.json b/package.json
index f5037198a2..f8af6bec8b 100644
--- a/package.json
+++ b/package.json
@@ -137,8 +137,8 @@
     "rc-menu": "~9.6.0",
     "rc-motion": "^2.5.1",
     "rc-notification": "~4.6.0",
-    "rc-pagination": "~3.1.16",
-    "rc-picker": "~2.6.8",
+    "rc-pagination": "~3.1.17",
+    "rc-picker": "~2.6.10",
     "rc-progress": "~3.3.2",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.2.0",

From ebc7527de30e79ad9ed6a23529f2efa5df86dea4 Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Wed, 22 Jun 2022 20:05:11 +0800
Subject: [PATCH 04/13] fix: fix snapshot after si_LK locale is merged (#36181)

---
 .../__snapshots__/index.test.js.snap          | 5087 +++++++++++++++++
 1 file changed, 5087 insertions(+)

diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index 0e4be32ee6..68304b7a66 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -266390,6 +266390,5093 @@ exports[`Locale Provider should display the text as ru 1`] = `
 </div>
 `;
 
+exports[`Locale Provider should display the text as si 1`] = `
+<div>
+  <ul
+    class="ant-pagination"
+    unselectable="unselectable"
+  >
+    <li
+      aria-disabled="true"
+      class="ant-pagination-prev ant-pagination-disabled"
+      title="කලින් පිටුව"
+    >
+      <button
+        class="ant-pagination-item-link"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="ඊළඟ පිටුව"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="පිටුවේ ප්‍රමාණය"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="පිටුවේ ප්‍රමාණය"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / පිටුව"
+          >
+            10 / පිටුව
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="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>
+    </li>
+  </ul>
+  <div
+    class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
+    style="width: 200px;"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      />
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="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
+    class="ant-picker"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="දිනය තෝරන්න"
+        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
+      class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0;"
+    >
+      <div
+        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel ant-picker-panel-focused"
+          tabindex="-1"
+        >
+          <div
+            class="ant-picker-date-panel"
+          >
+            <div
+              class="ant-picker-header"
+            >
+              <button
+                class="ant-picker-header-super-prev-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-super-prev-icon"
+                />
+              </button>
+              <button
+                class="ant-picker-header-prev-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-prev-icon"
+                />
+              </button>
+              <div
+                class="ant-picker-header-view"
+              >
+                <button
+                  class="ant-picker-year-btn"
+                  tabindex="-1"
+                  type="button"
+                >
+                  2017
+                </button>
+                <button
+                  class="ant-picker-month-btn"
+                  tabindex="-1"
+                  type="button"
+                >
+                  සැප්
+                </button>
+              </div>
+              <button
+                class="ant-picker-header-next-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-next-icon"
+                />
+              </button>
+              <button
+                class="ant-picker-header-super-next-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-super-next-icon"
+                />
+              </button>
+            </div>
+            <div
+              class="ant-picker-body"
+            >
+              <table
+                class="ant-picker-content"
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      ඉ
+                    </th>
+                    <th>
+                      ස
+                    </th>
+                    <th>
+                      අ
+                    </th>
+                    <th>
+                      බ
+                    </th>
+                    <th>
+                      බ්‍ර
+                    </th>
+                    <th>
+                      සි
+                    </th>
+                    <th>
+                      සෙ
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-08-27"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        27
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-08-28"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        28
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-08-29"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        29
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-08-30"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        30
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-end"
+                      title="2017-08-31"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        31
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                      title="2017-09-01"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        1
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-02"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        2
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-03"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        3
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-04"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        4
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-05"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        5
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-06"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        6
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-07"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        7
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-08"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        8
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-09"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        9
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-10"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        10
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-11"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        11
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-12"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        12
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-13"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        13
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-14"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        14
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-15"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        15
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-16"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        16
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-17"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        17
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                      title="2017-09-18"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        18
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-19"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        19
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-20"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        20
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-21"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        21
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-22"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        22
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-23"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        23
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-24"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        24
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-25"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        25
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-26"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        26
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-27"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        27
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-28"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        28
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2017-09-29"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        29
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                      title="2017-09-30"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        30
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-start"
+                      title="2017-10-01"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        1
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-02"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        2
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-03"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        3
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-04"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        4
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-05"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        5
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-06"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        6
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2017-10-07"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        7
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="ant-picker-footer"
+          >
+            <a
+              class="ant-picker-today-btn"
+            >
+              අද
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-picker"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="වේලාව තෝරන්න"
+        readonly=""
+        size="10"
+        title=""
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div>
+    <div
+      class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0;"
+    >
+      <div
+        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel ant-picker-panel-focused"
+          tabindex="-1"
+        >
+          <div
+            class="ant-picker-time-panel"
+          >
+            <div
+              class="ant-picker-content"
+            >
+              <ul
+                class="ant-picker-time-panel-column"
+                style="position: relative;"
+              >
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    00
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    01
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    02
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell ant-picker-time-panel-cell-selected"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    03
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    04
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    05
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    06
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    07
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    08
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    09
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    10
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    11
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    12
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    13
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    14
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    15
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    16
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    17
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    18
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    19
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    20
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    21
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    22
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    23
+                  </div>
+                </li>
+              </ul>
+              <ul
+                class="ant-picker-time-panel-column"
+                style="position: relative;"
+              >
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    00
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    01
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    02
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    03
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    04
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    05
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    06
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    07
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    08
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    09
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    10
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    11
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    12
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    13
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    14
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    15
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    16
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    17
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    18
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    19
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    20
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    21
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    22
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    23
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    24
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    25
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    26
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    27
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    28
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    29
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell ant-picker-time-panel-cell-selected"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    30
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    31
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    32
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    33
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    34
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    35
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    36
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    37
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    38
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    39
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    40
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    41
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    42
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    43
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    44
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    45
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    46
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    47
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    48
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    49
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    50
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    51
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    52
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    53
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    54
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    55
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    56
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    57
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    58
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    59
+                  </div>
+                </li>
+              </ul>
+              <ul
+                class="ant-picker-time-panel-column"
+                style="position: relative;"
+              >
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    00
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    01
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    02
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    03
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    04
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    05
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    06
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell ant-picker-time-panel-cell-selected"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    07
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    08
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    09
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    10
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    11
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    12
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    13
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    14
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    15
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    16
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    17
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    18
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    19
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    20
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    21
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    22
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    23
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    24
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    25
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    26
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    27
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    28
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    29
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    30
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    31
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    32
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    33
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    34
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    35
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    36
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    37
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    38
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    39
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    40
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    41
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    42
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    43
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    44
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    45
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    46
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    47
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    48
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    49
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    50
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    51
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    52
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    53
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    54
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    55
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    56
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    57
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    58
+                  </div>
+                </li>
+                <li
+                  class="ant-picker-time-panel-cell"
+                >
+                  <div
+                    class="ant-picker-time-panel-cell-inner"
+                  >
+                    59
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="ant-picker-footer"
+          >
+            <ul
+              class="ant-picker-ranges"
+            >
+              <li
+                class="ant-picker-now"
+              >
+                <a
+                  class="ant-picker-now-btn"
+                >
+                  දැන්
+                </a>
+              </li>
+              <li
+                class="ant-picker-ok"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    හරි
+                  </span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-picker ant-picker-range"
+    style="width: 200px;"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        autocomplete="off"
+        placeholder="ආරම්භක දිනය"
+        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"
+        placeholder="නිමවන දිනය"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left: 0px; width: 0px; 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
+      class="ant-picker-dropdown ant-picker-dropdown-range ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0;"
+    >
+      <div
+        class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+        style="min-width: 0;"
+      >
+        <div
+          class="ant-picker-range-arrow"
+          style="left: 0px;"
+        />
+        <div
+          class="ant-picker-panel-container"
+          style="margin-left: 0px;"
+        >
+          <div
+            class="ant-picker-panels"
+          >
+            <div
+              class="ant-picker-panel ant-picker-panel-focused"
+              tabindex="-1"
+            >
+              <div
+                class="ant-picker-date-panel"
+              >
+                <div
+                  class="ant-picker-header"
+                >
+                  <button
+                    class="ant-picker-header-super-prev-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-prev-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-prev-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-prev-icon"
+                    />
+                  </button>
+                  <div
+                    class="ant-picker-header-view"
+                  >
+                    <button
+                      class="ant-picker-year-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2017
+                    </button>
+                    <button
+                      class="ant-picker-month-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      සැප්
+                    </button>
+                  </div>
+                  <button
+                    class="ant-picker-header-next-btn"
+                    style="visibility: hidden;"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-next-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-super-next-btn"
+                    style="visibility: hidden;"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-next-icon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="ant-picker-body"
+                >
+                  <table
+                    class="ant-picker-content"
+                  >
+                    <thead>
+                      <tr>
+                        <th>
+                          ඉ
+                        </th>
+                        <th>
+                          ස
+                        </th>
+                        <th>
+                          අ
+                        </th>
+                        <th>
+                          බ
+                        </th>
+                        <th>
+                          බ්‍ර
+                        </th>
+                        <th>
+                          සි
+                        </th>
+                        <th>
+                          සෙ
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-08-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-08-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-08-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-08-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end"
+                          title="2017-08-31"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            31
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                          title="2017-09-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-11"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            11
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-12"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            12
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-13"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            13
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-14"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            14
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-15"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            15
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-16"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            16
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-17"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            17
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                          title="2017-09-18"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            18
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-19"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            19
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-20"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            20
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-21"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            21
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-22"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            22
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-23"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            23
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-24"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            24
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-25"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            25
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-26"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            26
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-09-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                          title="2017-09-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start"
+                          title="2017-10-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-10-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-picker-panel ant-picker-panel-focused"
+              tabindex="-1"
+            >
+              <div
+                class="ant-picker-date-panel"
+              >
+                <div
+                  class="ant-picker-header"
+                >
+                  <button
+                    class="ant-picker-header-super-prev-btn"
+                    style="visibility: hidden;"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-prev-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-prev-btn"
+                    style="visibility: hidden;"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-prev-icon"
+                    />
+                  </button>
+                  <div
+                    class="ant-picker-header-view"
+                  >
+                    <button
+                      class="ant-picker-year-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2017
+                    </button>
+                    <button
+                      class="ant-picker-month-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      ඔක්
+                    </button>
+                  </div>
+                  <button
+                    class="ant-picker-header-next-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-next-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-super-next-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-next-icon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="ant-picker-body"
+                >
+                  <table
+                    class="ant-picker-content"
+                  >
+                    <thead>
+                      <tr>
+                        <th>
+                          ඉ
+                        </th>
+                        <th>
+                          ස
+                        </th>
+                        <th>
+                          අ
+                        </th>
+                        <th>
+                          බ
+                        </th>
+                        <th>
+                          බ්‍ර
+                        </th>
+                        <th>
+                          සි
+                        </th>
+                        <th>
+                          සෙ
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                          title="2017-10-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-11"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            11
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-12"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            12
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-13"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            13
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-14"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            14
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-15"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            15
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-16"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            16
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-17"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            17
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-18"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            18
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-19"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            19
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-20"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            20
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-21"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            21
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-22"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            22
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-23"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            23
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-24"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            24
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-25"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            25
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-26"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            26
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2017-10-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                          title="2017-10-31"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            31
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start"
+                          title="2017-11-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-11-11"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            11
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <a
+    class="ant-popover-open"
+  >
+    Click to confirm
+  </a>
+  <div>
+    <div
+      class="ant-popover ant-popconfirm ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
+      style="opacity: 0;"
+    >
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-arrow"
+        >
+          <span
+            class="ant-popover-arrow-content"
+          />
+        </div>
+        <div
+          class="ant-popover-inner"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <div
+              class="ant-popover-message"
+            >
+              <span
+                aria-label="exclamation-circle"
+                class="anticon anticon-exclamation-circle"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="exclamation-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                  />
+                </svg>
+              </span>
+              <div
+                class="ant-popover-message-title"
+              >
+                Question?
+              </div>
+            </div>
+            <div
+              class="ant-popover-buttons"
+            >
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  අවලංගු කරන්න
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  හරි
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          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
+          class="ant-transfer-list-header-selected"
+        >
+          0 අථකය
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="මෙතැන සොයන්න"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
+              >
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                class="ant-empty-img-simple"
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    class="ant-empty-img-simple-ellipse"
+                    cx="32"
+                    cy="33"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    class="ant-empty-img-simple-g"
+                    fill-rule="nonzero"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      class="ant-empty-img-simple-path"
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <div
+              class="ant-empty-description"
+            >
+              දත්ත නැත
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          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
+          class="ant-transfer-list-header-selected"
+        >
+          0 අථකය
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="මෙතැන සොයන්න"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
+              >
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                class="ant-empty-img-simple"
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    class="ant-empty-img-simple-ellipse"
+                    cx="32"
+                    cy="33"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    class="ant-empty-img-simple-g"
+                    fill-rule="nonzero"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      class="ant-empty-img-simple-path"
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <div
+              class="ant-empty-description"
+            >
+              දත්ත නැත
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-picker-calendar ant-picker-calendar-mini"
+  >
+    <div
+      class="ant-picker-calendar-header"
+    >
+      <div
+        class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2017"
+          >
+            2017
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="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
+        class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="සැප්"
+          >
+            සැප්
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="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
+        class="ant-radio-group ant-radio-group-outline ant-radio-group-small ant-picker-calendar-mode-switch"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              type="radio"
+              value="month"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            මාසය
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              type="radio"
+              value="year"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            අවුරුද්ද
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-picker-panel"
+      tabindex="0"
+    >
+      <div
+        class="ant-picker-date-panel"
+      >
+        <div
+          class="ant-picker-body"
+        >
+          <table
+            class="ant-picker-content"
+          >
+            <thead>
+              <tr>
+                <th>
+                  ඉ
+                </th>
+                <th>
+                  ස
+                </th>
+                <th>
+                  අ
+                </th>
+                <th>
+                  බ
+                </th>
+                <th>
+                  බ්‍ර
+                </th>
+                <th>
+                  සි
+                </th>
+                <th>
+                  සෙ
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-08-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-08-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-08-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-08-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-end"
+                  title="2017-08-31"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      31
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                  title="2017-09-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-11"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      11
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-12"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      12
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-13"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      13
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-14"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      14
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-15"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      15
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-16"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      16
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-17"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      17
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today ant-picker-cell-selected"
+                  title="2017-09-18"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      18
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-19"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      19
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-20"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      20
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-21"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      21
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-22"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      22
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-23"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      23
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-24"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      24
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-25"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      25
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-26"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      26
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2017-09-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                  title="2017-09-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-start"
+                  title="2017-10-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2017-10-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-table-wrapper"
+  >
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
+        <div
+          class="ant-table ant-table-empty"
+        >
+          <div
+            class="ant-table-container"
+          >
+            <div
+              class="ant-table-content"
+            >
+              <table
+                style="table-layout: auto;"
+              >
+                <colgroup />
+                <thead
+                  class="ant-table-thead"
+                >
+                  <tr>
+                    <th
+                      class="ant-table-cell"
+                    >
+                      <div
+                        class="ant-table-filter-column"
+                      >
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
+                          role="button"
+                          tabindex="-1"
+                        >
+                          <span
+                            aria-label="filter"
+                            class="anticon anticon-filter"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="filter"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </div>
+                    </th>
+                    <th
+                      class="ant-table-cell"
+                    >
+                      Age
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="ant-table-tbody"
+                >
+                  <tr
+                    class="ant-table-placeholder"
+                  >
+                    <td
+                      class="ant-table-cell"
+                      colspan="2"
+                    >
+                      <div
+                        class="ant-empty ant-empty-normal"
+                      >
+                        <div
+                          class="ant-empty-image"
+                        >
+                          <svg
+                            class="ant-empty-img-simple"
+                            height="41"
+                            viewBox="0 0 64 41"
+                            width="64"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              fill="none"
+                              fill-rule="evenodd"
+                              transform="translate(0 1)"
+                            >
+                              <ellipse
+                                class="ant-empty-img-simple-ellipse"
+                                cx="32"
+                                cy="33"
+                                rx="32"
+                                ry="7"
+                              />
+                              <g
+                                class="ant-empty-img-simple-g"
+                                fill-rule="nonzero"
+                              >
+                                <path
+                                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                />
+                                <path
+                                  class="ant-empty-img-simple-path"
+                                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </div>
+                        <div
+                          class="ant-empty-description"
+                        >
+                          දත්ත නැත
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-modal-root"
+  >
+    <div
+      class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
+    />
+    <div
+      class="ant-modal-wrap"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby="test-id"
+        aria-modal="true"
+        class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
+        role="dialog"
+        style="width: 520px;"
+      >
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+        <div
+          class="ant-modal-content"
+        >
+          <button
+            aria-label="Close"
+            class="ant-modal-close"
+            type="button"
+          >
+            <span
+              class="ant-modal-close-x"
+            >
+              <span
+                aria-label="close"
+                class="anticon anticon-close ant-modal-close-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="close"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+          <div
+            class="ant-modal-header"
+          >
+            <div
+              class="ant-modal-title"
+              id="test-id"
+            >
+              Locale Modal
+            </div>
+          </div>
+          <div
+            class="ant-modal-body"
+          >
+            <p>
+              Locale Modal
+            </p>
+          </div>
+          <div
+            class="ant-modal-footer"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                අවලංගු කරන්න
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                හරි
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Locale Provider should display the text as sk 1`] = `
 <div>
   <ul

From 02a0e6f16000cd496c1f901adef0b2d0ddaea608 Mon Sep 17 00:00:00 2001
From: Alan Deng <alanhaledc@gmail.com>
Date: Fri, 24 Jun 2022 12:30:47 +0800
Subject: [PATCH 05/13] style: Skeleton.Button square shape style (#36123)

* refactor: Skeleton.Button square shape style

the Button's square shape style is same as Avator's that its width is equal to height,
and the old square shape become the default shape that its width is double size to height.

* fix: `ButtonShapeType` type annotation
---
 components/skeleton/Element.tsx               |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 23 +++++++++++++++++--
 .../__tests__/__snapshots__/demo.test.js.snap | 23 +++++++++++++++++--
 components/skeleton/demo/element.md           |  5 ++--
 components/skeleton/index.en-US.md            |  2 +-
 components/skeleton/index.zh-CN.md            | 12 +++++-----
 components/skeleton/style/index.less          |  5 ++++
 7 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/components/skeleton/Element.tsx b/components/skeleton/Element.tsx
index ad943f8068..f6eb18fa46 100644
--- a/components/skeleton/Element.tsx
+++ b/components/skeleton/Element.tsx
@@ -6,7 +6,7 @@ export interface SkeletonElementProps {
   className?: string;
   style?: React.CSSProperties;
   size?: 'large' | 'small' | 'default' | number;
-  shape?: 'circle' | 'square' | 'round';
+  shape?: 'circle' | 'square' | 'round' | 'default';
   active?: boolean;
 }
 
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index b7e147f75e..c1297afda8 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -114,7 +114,7 @@ Array [
         class="ant-skeleton ant-skeleton-element"
       >
         <span
-          class="ant-skeleton-button ant-skeleton-button-square"
+          class="ant-skeleton-button"
         />
       </div>
     </div>
@@ -148,7 +148,7 @@ Array [
     class="ant-skeleton ant-skeleton-element"
   >
     <span
-      class="ant-skeleton-button ant-skeleton-button-square"
+      class="ant-skeleton-button"
     />
   </div>,
   <br />,
@@ -387,6 +387,25 @@ Array [
                 >
                   <input
                     checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="default"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Default
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
                     class="ant-radio-button-input"
                     type="radio"
                     value="square"
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index bcfa4dd593..ff9b4916ce 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -114,7 +114,7 @@ Array [
         class="ant-skeleton ant-skeleton-element"
       >
         <span
-          class="ant-skeleton-button ant-skeleton-button-square"
+          class="ant-skeleton-button"
         />
       </div>
     </div>
@@ -148,7 +148,7 @@ Array [
     class="ant-skeleton ant-skeleton-element"
   >
     <span
-      class="ant-skeleton-button ant-skeleton-button-square"
+      class="ant-skeleton-button"
     />
   </div>,
   <br />,
@@ -387,6 +387,25 @@ Array [
                 >
                   <input
                     checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="default"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Default
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
                     class="ant-radio-button-input"
                     type="radio"
                     value="square"
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
index 61e72afc0a..417a29ca95 100644
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@@ -19,14 +19,14 @@ import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
 import React, { useState } from 'react';
 
 type SizeType = 'default' | 'small' | 'large';
-type ButtonShapeType = 'circle' | 'square' | 'round';
+type ButtonShapeType = 'circle' | 'square' | 'round' | 'default';
 type AvatarShapeType = 'circle' | 'square';
 
 const App: React.FC = () => {
   const [active, setActive] = useState(false);
   const [block, setBlock] = useState(false);
   const [size, setSize] = useState<SizeType>('default');
-  const [buttonShape, setButtonShape] = useState<ButtonShapeType>('square');
+  const [buttonShape, setButtonShape] = useState<ButtonShapeType>('default');
   const [avatarShape, setAvatarShape] = useState<AvatarShapeType>('circle');
 
   const handleActiveChange = (checked: boolean) => {
@@ -82,6 +82,7 @@ const App: React.FC = () => {
         </Form.Item>
         <Form.Item label="Button Shape">
           <Radio.Group value={buttonShape} onChange={handleShapeButton}>
+            <Radio.Button value="default">Default</Radio.Button>
             <Radio.Button value="square">Square</Radio.Button>
             <Radio.Button value="round">Round</Radio.Button>
             <Radio.Button value="circle">Circle</Radio.Button>
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index 3579190cfb..ded6541a0e 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -55,7 +55,7 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 | --- | --- | --- | --- | --- |
 | active | Show animation effect | boolean | false |  |
 | block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
-| shape | Set the shape of button | `circle` \| `round` \| `default` | - |  |
+| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - |  |
 | size | Set the size of button | `large` \| `small` \| `default` | - |  |
 
 ### SkeletonInputProps
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index 844b30e9e0..c67546b428 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -52,12 +52,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
 
 ### SkeletonButtonProps
 
-| 属性   | 说明                           | 类型                             | 默认值 | 版本   |
-| ------ | ------------------------------ | -------------------------------- | ------ | ------ |
-| active | 是否展示动画效果               | boolean                          | false  |        |
-| block  | 将按钮宽度调整为其父宽度的选项 | boolean                          | false  | 4.17.0 |
-| shape  | 指定按钮的形状                 | `circle` \| `round` \| `default` | -      |        |
-| size   | 设置按钮的大小                 | `large` \| `small` \| `default`  | -      |        |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |  |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
+| shape | 指定按钮的形状 | `circle` \| `round` \| `square` \| `default` | - |  |
+| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |  |
 
 ### SkeletonInputProps
 
diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less
index ef8c5575eb..4c8d8e485e 100644
--- a/components/skeleton/style/index.less
+++ b/components/skeleton/style/index.less
@@ -229,6 +229,11 @@
   min-width: @size * 2;
   .skeleton-element-common-size(@size);
 
+  &.@{skeleton-button-prefix-cls}-square {
+    width: @size;
+    min-width: @size;
+  }
+
   &.@{skeleton-button-prefix-cls}-circle {
     width: @size;
     min-width: @size;

From bfa8aaec5e5ce48373acc9db886b579507199096 Mon Sep 17 00:00:00 2001
From: Chang Wei <changwei1006@gmail.com>
Date: Tue, 5 Jul 2022 01:37:50 -0700
Subject: [PATCH 06/13] feat: Space support align stretch (#36310)

* feat/Space-component-support-align-stretch: support align to stretch

Signed-off-by: Chang Wei <changwei1006@gmail.com>

* feat/Space-component-support-align-stretch: update document of zh-CN and en-US

Signed-off-by: Chang Wei <changwei1006@gmail.com>

* feat/Space-component-support-align-stretch: update demo

Signed-off-by: Chang Wei <changwei1006@gmail.com>

* feat/Space-component-support-align-stretch: update snapshot by command `npm test -- components/space -u`

Signed-off-by: Chang Wei <changwei1006@gmail.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    | 36 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 36 +++++++++++++++++++
 components/space/demo/align.md                |  7 ++++
 components/space/index.en-US.md               |  2 +-
 components/space/index.tsx                    |  2 +-
 components/space/index.zh-CN.md               |  2 +-
 components/space/style/index.less             |  4 +++
 7 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index be1acfb350..d5722d89ff 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -148,6 +148,42 @@ exports[`renders ./components/space/demo/align.md extend context correctly 1`] =
       </div>
     </div>
   </div>
+  <div
+    class="space-align-block"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-stretch"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        stretch
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="mock-block"
+        >
+          Block
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
index 9634bca1a5..6a4d651814 100644
--- a/components/space/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -148,6 +148,42 @@ exports[`renders ./components/space/demo/align.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="space-align-block"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-stretch"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        stretch
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="mock-block"
+        >
+          Block
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/components/space/demo/align.md b/components/space/demo/align.md
index e9c421cc0b..6c7b7e87f4 100644
--- a/components/space/demo/align.md
+++ b/components/space/demo/align.md
@@ -47,6 +47,13 @@ const App: React.FC = () => (
         <span className="mock-block">Block</span>
       </Space>
     </div>
+    <div className="space-align-block">
+      <Space align="stretch">
+        stretch
+        <Button type="primary">Primary</Button>
+        <span className="mock-block">Block</span>
+      </Space>
+    </div>
   </div>
 );
 
diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md
index 2a2e6f1264..3126a44b44 100644
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@@ -16,7 +16,7 @@ Avoid components clinging together and set a unified space.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| align | Align items | `start` \| `end` \|`center` \|`baseline` \|`stretch` | - | 4.2.0 |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | The space size | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | Set split | ReactNode | - | 4.7.0 |
diff --git a/components/space/index.tsx b/components/space/index.tsx
index 249a5ba4e4..a6e6a278c6 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -22,7 +22,7 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: SpaceSize | [SpaceSize, SpaceSize];
   direction?: 'horizontal' | 'vertical';
   // No `stretch` since many components do not support that.
-  align?: 'start' | 'end' | 'center' | 'baseline';
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
   split?: React.ReactNode;
   wrap?: boolean;
 }
diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
index 0dc81f9690..1795afb660 100644
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` \|`stretch` | - | 4.2.0 |
 | direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | 间距大小 | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | 设置拆分 | ReactNode | - | 4.7.0 |
diff --git a/components/space/style/index.less b/components/space/style/index.less
index 842554ca27..f9301a7990 100644
--- a/components/space/style/index.less
+++ b/components/space/style/index.less
@@ -27,6 +27,10 @@
     &-baseline {
       align-items: baseline;
     }
+
+    &-stretch {
+      align-items: stretch;
+    }
   }
 }
 

From aca2c3d4e71ed0bc3830978220ce61c16260bd2b Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 14 Jul 2022 11:01:39 +0800
Subject: [PATCH 07/13] feat: add Form.Item.useStatus (#36486)

* feat: add useFormItemStatus

* chore: code clean

* docs: update example

* refactor: api change

* docs: fix typo

* docs: update docs

* docs: udpate

* chore: add warning

* test: add test case

* chore: update warning

* chore: code clean

* test: fix test case
---
 components/form/FormItem.tsx               | 12 ++++-
 components/form/__tests__/index.test.js    | 55 ++++++++++++++++++++++
 components/form/hooks/useFormItemStatus.ts | 22 +++++++++
 components/form/index.en-US.md             | 21 +++++++++
 components/form/index.zh-CN.md             | 21 +++++++++
 5 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 components/form/hooks/useFormItemStatus.ts

diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 1422a946ed..65e5f94d3d 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -13,6 +13,7 @@ import { supportRef } from 'rc-util/lib/ref';
 import type { ReactNode } from 'react';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
+import useFormItemStatus from './hooks/useFormItemStatus';
 import { ConfigContext } from '../config-provider';
 import Row from '../grid/row';
 import { cloneElement, isValidElement } from '../_util/reactNode';
@@ -99,7 +100,7 @@ const iconMap = {
   validating: LoadingOutlined,
 };
 
-function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
+function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
   const {
     name,
     noStyle,
@@ -463,4 +464,13 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
   );
 }
 
+type InternalFormItemType = typeof InternalFormItem;
+
+interface FormItemInterface extends InternalFormItemType {
+  useStatus: typeof useFormItemStatus;
+}
+
+const FormItem = InternalFormItem as FormItemInterface;
+FormItem.useStatus = useFormItemStatus;
+
 export default FormItem;
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 3f7f0f836c..209cc0dfa1 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 import React, { Component, useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import classNames from 'classnames';
 import Form from '..';
 import * as Util from '../util';
 
@@ -1245,4 +1246,58 @@ describe('Form', () => {
     expect(container.querySelector('.drawer-select')?.className).not.toContain('in-form-item');
     expect(container.querySelector('.drawer-select')?.className).not.toContain('status-error');
   });
+
+  it('Form.Item.useStatus should work', async () => {
+    const {
+      Item: { useStatus },
+    } = Form;
+
+    const CustomInput = ({ className, value }) => {
+      const { status } = useStatus();
+      return <div className={classNames(className, `custom-input-status-${status}`)}>{value}</div>;
+    };
+
+    const Demo = () => {
+      const [form] = Form.useForm();
+
+      return (
+        <Form form={form} name="my-form">
+          <Form.Item name="required" rules={[{ required: true }]}>
+            <CustomInput className="custom-input-required" value="" />
+          </Form.Item>
+          <Form.Item name="warning" validateStatus="warning">
+            <CustomInput className="custom-input-warning" />
+          </Form.Item>
+          <Form.Item name="normal">
+            <CustomInput className="custom-input" />
+          </Form.Item>
+          <CustomInput className="custom-input-wrong" />
+          <Button onClick={() => form.submit()} className="submit-button">
+            Submit
+          </Button>
+        </Form>
+      );
+    };
+
+    const { container } = render(<Demo />);
+
+    expect(container.querySelector('.custom-input-required')?.classList).toContain(
+      'custom-input-status-',
+    );
+    expect(container.querySelector('.custom-input-warning')?.classList).toContain(
+      'custom-input-status-warning',
+    );
+    expect(container.querySelector('.custom-input')?.classList).toContain('custom-input-status-');
+    expect(container.querySelector('.custom-input-wrong')?.classList).toContain(
+      'custom-input-status-undefined',
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Form.Item.useStatus should be used under Form.Item component.'),
+    );
+    fireEvent.click(container.querySelector('.submit-button'));
+    await sleep(0);
+    expect(container.querySelector('.custom-input-required')?.classList).toContain(
+      'custom-input-status-error',
+    );
+  });
 });
diff --git a/components/form/hooks/useFormItemStatus.ts b/components/form/hooks/useFormItemStatus.ts
new file mode 100644
index 0000000000..e05dc3270e
--- /dev/null
+++ b/components/form/hooks/useFormItemStatus.ts
@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import type { ValidateStatus } from 'antd/es/form/FormItem';
+import { FormItemInputContext } from '../context';
+import warning from '../../_util/warning';
+
+type UseFormItemStatus = () => {
+  status?: ValidateStatus;
+};
+
+const useFormItemStatus: UseFormItemStatus = () => {
+  const { status } = useContext(FormItemInputContext);
+
+  warning(
+    status !== undefined,
+    'Form.Item',
+    `Form.Item.useStatus should be used under Form.Item component. For more information: ${window.location.protocol}//${window.location.host}/components/form-cn/#Form.Item.useStatus`,
+  );
+
+  return { status };
+};
+
+export default useFormItemStatus;
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 8273330ec7..3bac9f41bd 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -336,6 +336,27 @@ const Demo = () => {
 };
 ```
 
+### Form.Item.useStatus
+
+`type Form.useFormItemStatus = (): { status: ValidateStatus | undefined }`
+
+Added in `4.22.0`. Could be used to get validate status of Form.Item. If this hook is not used under Form.Item, `status` would be `undefined`:
+
+```tsx
+const CustomInput = ({ value }) => {
+  const { status } = Form.Item.useStatus();
+  return <input value={value} className={`custom-input-${status}`} />;
+};
+
+export default () => (
+  <Form>
+    <Form.Item name="username">
+      <CustomInput />
+    </Form.Item>
+  </Form>
+);
+```
+
 #### Difference between other data fetching method
 
 Form only update the Field which changed to avoid full refresh perf issue. Thus you can not get real time value with `getFieldsValue` in render. And `useWatch` will rerender current component to sync with latest value. You can also use Field renderProps to get better performance if only want to do conditional render. If component no need care field value change, you can use `onValuesChange` to give to parent component to avoid current one rerender.
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 3e25044ce4..925a72471d 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -335,6 +335,27 @@ const Demo = () => {
 };
 ```
 
+### Form.Item.useStatus
+
+`type Form.Item.useStatus = (): { status: ValidateStatus | undefined }`
+
+`4.22.0` 新增，可用于获取当前 Form.Item 的校验状态，如果上层没有 Form.Item，`status` 将会返回 `undefined`：
+
+```tsx
+const CustomInput = ({ value }) => {
+  const { status } = Form.Item.useStatus();
+  return <input value={value} className={`custom-input-${status}`} />;
+};
+
+export default () => (
+  <Form>
+    <Form.Item name="username">
+      <CustomInput />
+    </Form.Item>
+  </Form>
+);
+```
+
 #### 与其他获取数据的方式的区别
 
 Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。

From 5cd007a2edaf1c329dd243f9f7c05a4203f47a44 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 15 Jul 2022 14:28:02 +0800
Subject: [PATCH 08/13] chore: update .gitignore (#36534)

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 5be4d3cb0b..16ffbbdab3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -60,6 +60,7 @@ site/theme/template/Resources/**/*.jsx
 site/theme/template/NotFound.jsx
 scripts/previewEditor/index.html
 components/version/version.tsx
+components/version/token.tsx
 
 # Image snapshot diff
 __diff_output__/

From 9989a2d7515b8f276d030b40e1947e37a7fae15f Mon Sep 17 00:00:00 2001
From: Neil <100huming@gmail.com>
Date: Fri, 15 Jul 2022 14:50:07 +0800
Subject: [PATCH 09/13] add Modal @modal-border-radius less variable (#36527)

* add Modal @modal-border-radius less variable

* fix:  add less variable
---
 components/modal/style/modal.less     | 6 +++---
 components/style/themes/default.less  | 1 +
 components/style/themes/variable.less | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
index 6fb60849ca..4854cad2bf 100644
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@@ -29,7 +29,7 @@
     background-color: @modal-content-bg;
     background-clip: padding-box;
     border: 0;
-    border-radius: @border-radius-base;
+    border-radius: @modal-border-radius;
     box-shadow: @shadow-2;
     pointer-events: auto;
   }
@@ -75,7 +75,7 @@
     background: @modal-header-bg;
     border-bottom: @modal-header-border-width @modal-header-border-style
       @modal-header-border-color-split;
-    border-radius: @border-radius-base @border-radius-base 0 0;
+    border-radius: @modal-border-radius @modal-border-radius 0 0;
   }
 
   &-body {
@@ -91,7 +91,7 @@
     background: @modal-footer-bg;
     border-top: @modal-footer-border-width @modal-footer-border-style
       @modal-footer-border-color-split;
-    border-radius: 0 0 @border-radius-base @border-radius-base;
+    border-radius: 0 0 @modal-border-radius @modal-border-radius;
 
     .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
       margin-bottom: 0;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 3752a77b24..299595ce1f 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -574,6 +574,7 @@
 @modal-mask-bg: fade(@black, 45%);
 @modal-confirm-body-padding: 32px 32px 24px;
 @modal-confirm-title-font-size: @font-size-lg;
+@modal-border-radius: @border-radius-base;
 
 // Progress
 // --
diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
index 0ec856d927..cc86343c3c 100644
--- a/components/style/themes/variable.less
+++ b/components/style/themes/variable.less
@@ -629,6 +629,7 @@
 @modal-mask-bg: fade(@black, 45%);
 @modal-confirm-body-padding: 32px 32px 24px;
 @modal-confirm-title-font-size: @font-size-lg;
+@modal-border-radius: @border-radius-base;
 
 // Progress
 // --

From 912d274b0ad15537bbfe9122c91b327c4bc93bbe Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 17 Jul 2022 18:57:36 +0800
Subject: [PATCH 10/13] chore(deps): update dependency eslint-plugin-markdown
 to v3 (#36560)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b9c171125c..c4146c1cd7 100644
--- a/package.json
+++ b/package.json
@@ -217,7 +217,7 @@
     "eslint-plugin-import": "^2.21.1",
     "eslint-plugin-jest": "^26.4.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-unicorn": "^43.0.0",

From 8c9ad9b1b6435503c954ef2f4483f449194a8641 Mon Sep 17 00:00:00 2001
From: fairyland <cwjTerrace@163.com>
Date: Mon, 18 Jul 2022 14:21:52 +0800
Subject: [PATCH 11/13] fix: form disabeld support Upload (#36573)

Co-authored-by: ranrui.cwj <ranrui.cwj@alibaba-inc.com>
---
 .../__snapshots__/components.test.js.snap     | 35 +--------
 .../__snapshots__/demo-extend.test.ts.snap    | 78 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 78 +++++++++++++++++++
 .../__snapshots__/index.test.js.snap          | 48 ++++++++++++
 components/form/__tests__/index.test.js       |  5 +-
 components/form/demo/disabled.md              | 10 +++
 components/upload/Upload.tsx                  | 16 ++--
 components/upload/style/index.less            |  1 +
 8 files changed, 233 insertions(+), 38 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 804a912f24..568958ea6a 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -42354,12 +42354,11 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] =
   class=""
 >
   <div
-    class="config-upload config-upload-select config-upload-select-text"
+    class="config-upload config-upload-select config-upload-select-text config-upload-disabled"
   >
     <span
-      class="config-upload"
+      class="config-upload config-upload-disabled"
       role="button"
-      tabindex="0"
     >
       <input
         accept=""
@@ -42415,35 +42414,7 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] =
             </span>
             <span
               class="config-upload-list-item-card-actions"
-            >
-              <button
-                class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
-                disabled=""
-                title="Remove file"
-                type="button"
-              >
-                <span
-                  aria-label="delete"
-                  class="anticon anticon-delete"
-                  role="img"
-                  tabindex="-1"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="delete"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </span>
+            />
           </span>
         </div>
       </div>
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 603d7bac0b..79c6fc19db 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4885,6 +4885,84 @@ exports[`renders ./components/form/demo/disabled.md extend context correctly 1`]
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Upload"
+      >
+        Upload
+      </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"
+        >
+          <span
+            class="ant-upload-picture-card-wrapper"
+          >
+            <div
+              class="ant-upload-list ant-upload-list-picture-card"
+            >
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
+              >
+                <span
+                  class="ant-upload ant-upload-disabled"
+                  role="button"
+                >
+                  <input
+                    accept=""
+                    style="display:none"
+                    type="file"
+                  />
+                  <div>
+                    <span
+                      aria-label="plus"
+                      class="anticon anticon-plus"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="plus"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <defs />
+                        <path
+                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                        />
+                        <path
+                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <div
+                      style="margin-top:8px"
+                    >
+                      Upload
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 8ef3cafc6c..fd4b9174fc 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2368,6 +2368,84 @@ exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Upload"
+      >
+        Upload
+      </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"
+        >
+          <span
+            class="ant-upload-picture-card-wrapper"
+          >
+            <div
+              class="ant-upload-list ant-upload-list-picture-card"
+            >
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
+              >
+                <span
+                  class="ant-upload ant-upload-disabled"
+                  role="button"
+                >
+                  <input
+                    accept=""
+                    style="display:none"
+                    type="file"
+                  />
+                  <div>
+                    <span
+                      aria-label="plus"
+                      class="anticon anticon-plus"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="plus"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <defs />
+                        <path
+                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                        />
+                        <path
+                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <div
+                      style="margin-top:8px"
+                    >
+                      Upload
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form/__tests__/__snapshots__/index.test.js.snap
index 2bb21c62fb..d5098a6f47 100644
--- a/components/form/__tests__/__snapshots__/index.test.js.snap
+++ b/components/form/__tests__/__snapshots__/index.test.js.snap
@@ -838,6 +838,54 @@ exports[`Form form should support disabled 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        title="Upload"
+      >
+        Upload
+      </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"
+        >
+          <span
+            class=""
+          >
+            <div
+              class="ant-upload ant-upload-select ant-upload-select-text ant-upload-disabled"
+              style="display: none;"
+            >
+              <span
+                class="ant-upload ant-upload-disabled"
+                role="button"
+              >
+                <input
+                  accept=""
+                  style="display: none;"
+                  type="file"
+                />
+              </span>
+            </div>
+            <div
+              class="ant-upload-list ant-upload-list-text"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 3f7f0f836c..e3f1156761 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -8,7 +8,7 @@ import * as Util from '../util';
 import Button from '../../button';
 import Input from '../../input';
 import Select from '../../select';
-
+import Upload from '../../upload';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
 import DatePicker from '../../date-picker';
@@ -947,6 +947,9 @@ describe('Form', () => {
         <Form.Item label="Switch" valuePropName="checked">
           <Switch />
         </Form.Item>
+        <Form.Item label="Upload" valuePropName="fileList">
+          <Upload />
+        </Form.Item>
         <Form.Item label="Button">
           <Button>Button</Button>
         </Form.Item>
diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md
index 71535d3f98..6662e270f8 100644
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@@ -15,6 +15,7 @@ Set component disabled, only works for antd components.
 
 ```tsx
 import React, { useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
 import {
   Form,
   Input,
@@ -27,6 +28,7 @@ import {
   TreeSelect,
   Switch,
   Checkbox,
+  Upload,
 } from 'antd';
 
 const { RangePicker } = DatePicker;
@@ -102,6 +104,14 @@ const FormDisabledDemo = () => {
       <Form.Item label="Switch" valuePropName="checked">
         <Switch />
       </Form.Item>
+      <Form.Item label="Upload" valuePropName="fileList">
+        <Upload action="/upload.do" listType="picture-card">
+          <div>
+            <PlusOutlined />
+            <div style={{ marginTop: 8 }}>Upload</div>
+          </div>
+        </Upload>
+      </Form.Item>
       <Form.Item label="Button">
         <Button>Button</Button>
       </Form.Item>
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index f77b161d58..426139c849 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -4,6 +4,7 @@ import RcUpload from 'rc-upload';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
+import DisabledContext from '../config-provider/DisabledContext';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import warning from '../_util/warning';
@@ -36,7 +37,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     onChange,
     onDrop,
     previewFile,
-    disabled,
+    disabled: customDisabled,
     locale: propLocale,
     iconRender,
     isImageUrl,
@@ -50,6 +51,10 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     maxCount,
   } = props;
 
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], {
     value: fileList,
     postState: list => list ?? [],
@@ -298,6 +303,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     onSuccess,
     ...(props as RcUploadProps),
     prefixCls,
+    disabled: mergedDisabled,
     beforeUpload: mergedBeforeUpload,
     onChange: undefined,
   };
@@ -309,7 +315,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   // !children: https://github.com/ant-design/ant-design/issues/14298
   // disabled: https://github.com/ant-design/ant-design/issues/16478
   //           https://github.com/ant-design/ant-design/issues/24197
-  if (!children || disabled) {
+  if (!children || mergedDisabled) {
     delete rcUploadProps.id;
   }
 
@@ -335,7 +341,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
               onPreview={onPreview}
               onDownload={onDownload}
               onRemove={handleRemove}
-              showRemoveIcon={!disabled && showRemoveIcon}
+              showRemoveIcon={!mergedDisabled && showRemoveIcon}
               showPreviewIcon={showPreviewIcon}
               showDownloadIcon={showDownloadIcon}
               removeIcon={removeIcon}
@@ -363,7 +369,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
         [`${prefixCls}-drag`]: true,
         [`${prefixCls}-drag-uploading`]: mergedFileList.some(file => file.status === 'uploading'),
         [`${prefixCls}-drag-hover`]: dragState === 'dragover',
-        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-disabled`]: mergedDisabled,
         [`${prefixCls}-rtl`]: direction === 'rtl',
       },
       className,
@@ -389,7 +395,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   const uploadButtonCls = classNames(prefixCls, {
     [`${prefixCls}-select`]: true,
     [`${prefixCls}-select-${listType}`]: true,
-    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-disabled`]: mergedDisabled,
     [`${prefixCls}-rtl`]: direction === 'rtl',
   });
 
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index e09ed579c5..571cef7da8 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -30,6 +30,7 @@
   }
 
   &&-disabled {
+    color: @disabled-color;
     cursor: not-allowed;
   }
 

From 10b153f65de6eb5a18107a3c88db18c8aaeade07 Mon Sep 17 00:00:00 2001
From: Peach <scdzwyxst@gmail.com>
Date: Mon, 18 Jul 2022 15:02:57 +0800
Subject: [PATCH 12/13] docs: changelog for 4.21.7 (#36572)

* docs: changelog for 4.21.7

* chore: bump version to 4.21.7

* docs: update changelog

* docs: append a new changelog
---
 CHANGELOG.en-US.md | 14 ++++++++++++++
 CHANGELOG.zh-CN.md | 14 ++++++++++++++
 package.json       |  2 +-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ebca6386a4..6a30a20866 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,20 @@ timeline: true
 
 ---
 
+## 4.21.7
+
+`2022-07-18`
+
+- 🆕 Add Skeleton.Node sub-component, allow user customize content of Skeleton. [#36441](https://github.com/ant-design/ant-design/pull/36441) [@DawnLck](https://github.com/DawnLck)
+- Form
+  - 🐞 Fix Form with percentage width Select may leaves unexpected height. [#36484](https://github.com/ant-design/ant-design/pull/36484)
+  - 🐞 Fix Form disabled but Upload component still uploadable in it. [#36573](https://github.com/ant-design/ant-design/pull/36573) [@cwjTerrace](https://github.com/cwjTerrace)
+- 🐞 Fix Tree non-draggable element still render the draggable icon. [#36511](https://github.com/ant-design/ant-design/pull/36511) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Upload preview error on SVG with `<foreignObject>` and cross-origin links. [#36402](https://github.com/ant-design/ant-design/pull/36402) [@jonioni](https://github.com/jonioni)
+- 🐞 Fix that Tooltip cannot close automaticly on disabled Radio. [#36483](https://github.com/ant-design/ant-design/pull/36483)
+- 💄 Add Modal Less variable `@modal-border-radius`. [#36527](https://github.com/ant-design/ant-design/pull/36527) [@kkkisme](https://github.com/kkkisme)
+- 💄 Fix Table expand icon wrap style when column is fixed and ellipsis. [#36496](https://github.com/ant-design/ant-design/pull/36496)
+
 ## 4.21.6
 
 `2022-07-11`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 61ab3e3c59..fb0529f60d 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,20 @@ timeline: true
 
 ---
 
+## 4.21.7
+
+`2022-07-18`
+
+- 🆕 新增 Skeleton.Node 子组件，允许用户自定义 Skeleton 的内容。[#36441](https://github.com/ant-design/ant-design/pull/36441) [@DawnLck](https://github.com/DawnLck)
+- Form
+  - 🐞 修复 Form 下设置 Select 百分比宽度时会有未预期空行问题。[#36484](https://github.com/ant-design/ant-design/pull/36484)
+  - 🐞 修复 Form 设为禁用时、内部的 Upload 组件仍能上传文件的问题。[#36573](https://github.com/ant-design/ant-design/pull/36573) [@cwjTerrace](https://github.com/cwjTerrace)
+- 🐞 修复 Tree 非 `draggable` 依然展示可拖拽图标的问题。[#36511](https://github.com/ant-design/ant-design/pull/36511) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Upload 在预览包含 `<foreignObject>` 及跨域链接的 SVG 文件时发生错误的问题。[#36402](https://github.com/ant-design/ant-design/pull/36402) [@jonioni](https://github.com/jonioni)
+- 🐞 修复 Tooltip 在被禁用的 Radio 上时无法自动关闭的问题。[#36483](https://github.com/ant-design/ant-design/pull/36483)
+- 💄 添加 Modal Less 变量 `@modal-border-radius`。[#36527](https://github.com/ant-design/ant-design/pull/36527) [@kkkisme](https://github.com/kkkisme)
+- 💄 修复 Table 开启固定和省略功能的列内的展开按钮换行样式。[#36496](https://github.com/ant-design/ant-design/pull/36496)
+
 ## 4.21.6
 
 `2022-07-11`
diff --git a/package.json b/package.json
index c4146c1cd7..6ac09f5a10 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.21.6",
+  "version": "4.21.7",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From 03ea767cade800baa1b7034feb1f54e508932b3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 19 Jul 2022 16:01:31 +0800
Subject: [PATCH 13/13] fix: Form validate message shaking (#36575)

* refactor: move component out

* refactor: clean up code

* chore: stable it

* chore: back of container

* chore: adjust leave motion

* test: update snapshot

* chore: update motion logic

* fix: list start motion

* test: update snapshot

* test: update snapshot

* test: test for marginBottom
---
 .../__snapshots__/demo-extend.test.ts.snap    |  1800 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  1330 +-
 .../__snapshots__/demo-extend.test.ts.snap    |    46 +-
 .../__tests__/__snapshots__/demo.test.js.snap |    46 +-
 .../__snapshots__/components.test.js.snap     |   226 +-
 .../__tests__/__snapshots__/form.test.js.snap |    54 +-
 components/form/ErrorList.tsx                 |    12 +-
 components/form/FormItem/ItemHolder.tsx       |   209 +
 .../form/{FormItem.tsx => FormItem/index.tsx} |   170 +-
 components/form/FormItemInput.tsx             |    33 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 45594 ++++++++--------
 .../__tests__/__snapshots__/demo.test.js.snap | 19930 +++----
 .../__snapshots__/index.test.js.snap          |  1444 +-
 components/form/__tests__/index.test.js       |    27 +
 components/form/style/index.less              |    33 +-
 .../__snapshots__/index.test.tsx.snap         |    22 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   138 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   138 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   586 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   586 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  1672 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  1672 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   120 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   120 +-
 package.json                                  |     2 +-
 25 files changed, 38734 insertions(+), 37276 deletions(-)
 create mode 100644 components/form/FormItem/ItemHolder.tsx
 rename components/form/{FormItem.tsx => FormItem/index.tsx} (67%)

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 325a0faabf..b1390210be 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -521,356 +521,32 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   style="margin:0 auto"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="单独 AutoComplete"
-      >
-        单独 AutoComplete
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="单独 AutoComplete"
+        >
+          单独 AutoComplete
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
+            class="ant-form-item-control-input-content"
           >
             <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-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  role="combobox"
-                  type="search"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    class="ant-select-item-empty"
-                    id="undefined_list"
-                    role="listbox"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="单独 TreeSelect"
-      >
-        单独 TreeSelect
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    class="ant-select-empty"
-                    role="listbox"
-                  >
-                    <div
-                      class="ant-empty ant-empty-normal ant-empty-small"
-                    >
-                      <div
-                        class="ant-empty-image"
-                      >
-                        <svg
-                          class="ant-empty-img-simple"
-                          height="41"
-                          viewBox="0 0 64 41"
-                          width="64"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <g
-                            fill="none"
-                            fill-rule="evenodd"
-                            transform="translate(0 1)"
-                          >
-                            <ellipse
-                              class="ant-empty-img-simple-ellipse"
-                              cx="32"
-                              cy="33"
-                              rx="32"
-                              ry="7"
-                            />
-                            <g
-                              class="ant-empty-img-simple-g"
-                              fill-rule="nonzero"
-                            >
-                              <path
-                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                              />
-                              <path
-                                class="ant-empty-img-simple-path"
-                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </div>
-                      <div
-                        class="ant-empty-description"
-                      >
-                        No Data
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="添加 Input.Group 正常"
-      >
-        添加 Input.Group 正常
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group ant-input-group-compact"
-          >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      class="ant-select-empty"
-                      role="listbox"
-                    >
-                      <div
-                        class="ant-empty ant-empty-normal ant-empty-small"
-                      >
-                        <div
-                          class="ant-empty-image"
-                        >
-                          <svg
-                            class="ant-empty-img-simple"
-                            height="41"
-                            viewBox="0 0 64 41"
-                            width="64"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <g
-                              fill="none"
-                              fill-rule="evenodd"
-                              transform="translate(0 1)"
-                            >
-                              <ellipse
-                                class="ant-empty-img-simple-ellipse"
-                                cx="32"
-                                cy="33"
-                                rx="32"
-                                ry="7"
-                              />
-                              <g
-                                class="ant-empty-img-simple-g"
-                                fill-rule="nonzero"
-                              >
-                                <path
-                                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                                />
-                                <path
-                                  class="ant-empty-img-simple-path"
-                                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                                />
-                              </g>
-                            </g>
-                          </svg>
-                        </div>
-                        <div
-                          class="ant-empty-description"
-                        >
-                          No Data
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </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
-              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"
@@ -910,133 +586,38 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
                 </div>
               </div>
             </div>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="包含 search 图标正常"
-      >
-        包含 search 图标正常
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <span
-                  class="ant-input-affix-wrapper ant-select-selection-search-input"
-                >
-                  <input
-                    aria-activedescendant="undefined_list_0"
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-input"
-                    role="combobox"
-                    type="search"
-                    value=""
-                  />
-                  <span
-                    class="ant-input-suffix"
-                  >
-                    <span
-                      aria-label="search"
-                      class="anticon anticon-search"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="search"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    class="ant-select-item-empty"
-                    id="undefined_list"
-                    role="listbox"
-                  />
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="同时有 Input.Group 和图标发生移位"
-      >
-        同时有 Input.Group 和图标发生移位
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="单独 TreeSelect"
+        >
+          单独 TreeSelect
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
                 class="ant-select-selector"
@@ -1150,8 +731,229 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
                 </span>
               </span>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="添加 Input.Group 正常"
+        >
+          添加 Input.Group 正常
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-empty"
+                        role="listbox"
+                      >
+                        <div
+                          class="ant-empty ant-empty-normal ant-empty-small"
+                        >
+                          <div
+                            class="ant-empty-image"
+                          >
+                            <svg
+                              class="ant-empty-img-simple"
+                              height="41"
+                              viewBox="0 0 64 41"
+                              width="64"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                fill="none"
+                                fill-rule="evenodd"
+                                transform="translate(0 1)"
+                              >
+                                <ellipse
+                                  class="ant-empty-img-simple-ellipse"
+                                  cx="32"
+                                  cy="33"
+                                  rx="32"
+                                  ry="7"
+                                />
+                                <g
+                                  class="ant-empty-img-simple-g"
+                                  fill-rule="nonzero"
+                                >
+                                  <path
+                                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                  />
+                                  <path
+                                    class="ant-empty-img-simple-path"
+                                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </div>
+                          <div
+                            class="ant-empty-description"
+                          >
+                            No Data
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+              >
+                <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-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      role="combobox"
+                      type="search"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-item-empty"
+                        id="undefined_list"
+                        role="listbox"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="包含 search 图标正常"
+        >
+          包含 search 图标正常
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            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"
@@ -1218,480 +1020,706 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
                 </div>
               </div>
             </div>
-          </span>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="同时有 Input.Group 和 Search 组件发生移位"
-      >
-        同时有 Input.Group 和 Search 组件发生移位
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="同时有 Input.Group 和图标发生移位"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
-          >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      class="ant-select-empty"
-                      role="listbox"
-                    >
-                      <div
-                        class="ant-empty ant-empty-normal ant-empty-small"
-                      >
-                        <div
-                          class="ant-empty-image"
-                        >
-                          <svg
-                            class="ant-empty-img-simple"
-                            height="41"
-                            viewBox="0 0 64 41"
-                            width="64"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <g
-                              fill="none"
-                              fill-rule="evenodd"
-                              transform="translate(0 1)"
-                            >
-                              <ellipse
-                                class="ant-empty-img-simple-ellipse"
-                                cx="32"
-                                cy="33"
-                                rx="32"
-                                ry="7"
-                              />
-                              <g
-                                class="ant-empty-img-simple-g"
-                                fill-rule="nonzero"
-                              >
-                                <path
-                                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                                />
-                                <path
-                                  class="ant-empty-img-simple-path"
-                                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                                />
-                              </g>
-                            </g>
-                          </svg>
-                        </div>
-                        <div
-                          class="ant-empty-description"
-                        >
-                          No Data
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </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
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <span
-                    class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
-                  >
-                    <span
-                      class="ant-input-wrapper ant-input-group"
-                    >
-                      <input
-                        aria-activedescendant="undefined_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="undefined_list"
-                        aria-haspopup="listbox"
-                        aria-owns="undefined_list"
-                        autocomplete="off"
-                        class="ant-input"
-                        role="combobox"
-                        type="search"
-                        value=""
-                      />
-                      <span
-                        class="ant-input-group-addon"
-                      >
-                        <button
-                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
-                          type="button"
-                        >
-                          <span
-                            aria-label="search"
-                            class="anticon anticon-search"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="search"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </span>
-                    </span>
-                  </span>
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown ant-select-dropdown-empty"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      class="ant-select-item-empty"
-                      id="undefined_list"
-                      role="listbox"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </span>
-        </div>
+          同时有 Input.Group 和图标发生移位
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="Input Group 和 Button 结合"
-      >
-        Input Group 和 Button 结合
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:20%"
+            <span
+              class="ant-input-group ant-input-group-compact"
             >
               <div
-                class="ant-select-selector"
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
               >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-              <div>
                 <div
-                  class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-                  style="opacity:0"
+                  class="ant-select-selector"
                 >
-                  <div>
-                    <div
-                      class="ant-select-empty"
-                      role="listbox"
-                    >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
                       <div
-                        class="ant-empty ant-empty-normal ant-empty-small"
+                        class="ant-select-empty"
+                        role="listbox"
                       >
                         <div
-                          class="ant-empty-image"
+                          class="ant-empty ant-empty-normal ant-empty-small"
                         >
-                          <svg
-                            class="ant-empty-img-simple"
-                            height="41"
-                            viewBox="0 0 64 41"
-                            width="64"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="ant-empty-image"
                           >
-                            <g
-                              fill="none"
-                              fill-rule="evenodd"
-                              transform="translate(0 1)"
+                            <svg
+                              class="ant-empty-img-simple"
+                              height="41"
+                              viewBox="0 0 64 41"
+                              width="64"
+                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <ellipse
-                                class="ant-empty-img-simple-ellipse"
-                                cx="32"
-                                cy="33"
-                                rx="32"
-                                ry="7"
-                              />
                               <g
-                                class="ant-empty-img-simple-g"
-                                fill-rule="nonzero"
+                                fill="none"
+                                fill-rule="evenodd"
+                                transform="translate(0 1)"
                               >
-                                <path
-                                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                                />
-                                <path
-                                  class="ant-empty-img-simple-path"
-                                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                <ellipse
+                                  class="ant-empty-img-simple-ellipse"
+                                  cx="32"
+                                  cy="33"
+                                  rx="32"
+                                  ry="7"
                                 />
+                                <g
+                                  class="ant-empty-img-simple-g"
+                                  fill-rule="nonzero"
+                                >
+                                  <path
+                                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                  />
+                                  <path
+                                    class="ant-empty-img-simple-path"
+                                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                  />
+                                </g>
                               </g>
-                            </g>
-                          </svg>
-                        </div>
-                        <div
-                          class="ant-empty-description"
-                        >
-                          No Data
+                            </svg>
+                          </div>
+                          <div
+                            class="ant-empty-description"
+                          >
+                            No Data
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </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
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <span
-                    class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
-                  >
-                    <span
-                      class="ant-input-wrapper ant-input-group"
-                    >
-                      <input
-                        aria-activedescendant="undefined_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="undefined_list"
-                        aria-haspopup="listbox"
-                        aria-owns="undefined_list"
-                        autocomplete="off"
-                        class="ant-input"
-                        role="combobox"
-                        type="search"
-                        value=""
-                      />
-                      <span
-                        class="ant-input-group-addon"
-                      >
-                        <button
-                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
-                          type="button"
-                        >
-                          <span
-                            aria-label="search"
-                            class="anticon anticon-search"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="search"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </span>
-                    </span>
-                  </span>
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown ant-select-dropdown-empty"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      class="ant-select-item-empty"
-                      id="undefined_list"
-                      role="listbox"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button
-              class="ant-btn ant-btn-primary"
-              type="button"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
                   aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
                 >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  <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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-affix-wrapper ant-select-selection-search-input"
+                    >
+                      <input
+                        aria-activedescendant="undefined_list_0"
+                        aria-autocomplete="list"
+                        aria-controls="undefined_list"
+                        aria-haspopup="listbox"
+                        aria-owns="undefined_list"
+                        autocomplete="off"
+                        class="ant-input"
+                        role="combobox"
+                        type="search"
+                        value=""
+                      />
+                      <span
+                        class="ant-input-suffix"
+                      >
+                        <span
+                          aria-label="search"
+                          class="anticon anticon-search"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="search"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
                   />
-                </svg>
-              </span>
-              <span>
-                Search
-              </span>
-            </button>
-          </span>
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-item-empty"
+                        id="undefined_list"
+                        role="listbox"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="同时有 Input.Group 和 Search 组件发生移位"
+        >
+          同时有 Input.Group 和 Search 组件发生移位
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-empty"
+                        role="listbox"
+                      >
+                        <div
+                          class="ant-empty ant-empty-normal ant-empty-small"
+                        >
+                          <div
+                            class="ant-empty-image"
+                          >
+                            <svg
+                              class="ant-empty-img-simple"
+                              height="41"
+                              viewBox="0 0 64 41"
+                              width="64"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                fill="none"
+                                fill-rule="evenodd"
+                                transform="translate(0 1)"
+                              >
+                                <ellipse
+                                  class="ant-empty-img-simple-ellipse"
+                                  cx="32"
+                                  cy="33"
+                                  rx="32"
+                                  ry="7"
+                                />
+                                <g
+                                  class="ant-empty-img-simple-g"
+                                  fill-rule="nonzero"
+                                >
+                                  <path
+                                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                  />
+                                  <path
+                                    class="ant-empty-img-simple-path"
+                                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </div>
+                          <div
+                            class="ant-empty-description"
+                          >
+                            No Data
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
+                    >
+                      <span
+                        class="ant-input-wrapper ant-input-group"
+                      >
+                        <input
+                          aria-activedescendant="undefined_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="undefined_list"
+                          aria-haspopup="listbox"
+                          aria-owns="undefined_list"
+                          autocomplete="off"
+                          class="ant-input"
+                          role="combobox"
+                          type="search"
+                          value=""
+                        />
+                        <span
+                          class="ant-input-group-addon"
+                        >
+                          <button
+                            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
+                            type="button"
+                          >
+                            <span
+                              aria-label="search"
+                              class="anticon anticon-search"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="search"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-item-empty"
+                        id="undefined_list"
+                        role="listbox"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="Input Group 和 Button 结合"
+        >
+          Input Group 和 Button 结合
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:20%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-empty"
+                        role="listbox"
+                      >
+                        <div
+                          class="ant-empty ant-empty-normal ant-empty-small"
+                        >
+                          <div
+                            class="ant-empty-image"
+                          >
+                            <svg
+                              class="ant-empty-img-simple"
+                              height="41"
+                              viewBox="0 0 64 41"
+                              width="64"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                fill="none"
+                                fill-rule="evenodd"
+                                transform="translate(0 1)"
+                              >
+                                <ellipse
+                                  class="ant-empty-img-simple-ellipse"
+                                  cx="32"
+                                  cy="33"
+                                  rx="32"
+                                  ry="7"
+                                />
+                                <g
+                                  class="ant-empty-img-simple-g"
+                                  fill-rule="nonzero"
+                                >
+                                  <path
+                                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                  />
+                                  <path
+                                    class="ant-empty-img-simple-path"
+                                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </div>
+                          <div
+                            class="ant-empty-description"
+                          >
+                            No Data
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
+                    >
+                      <span
+                        class="ant-input-wrapper ant-input-group"
+                      >
+                        <input
+                          aria-activedescendant="undefined_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="undefined_list"
+                          aria-haspopup="listbox"
+                          aria-owns="undefined_list"
+                          autocomplete="off"
+                          class="ant-input"
+                          role="combobox"
+                          type="search"
+                          value=""
+                        />
+                        <span
+                          class="ant-input-group-addon"
+                        >
+                          <button
+                            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
+                            type="button"
+                          >
+                            <span
+                              aria-label="search"
+                              class="anticon anticon-search"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="search"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown ant-select-dropdown-empty"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        class="ant-select-item-empty"
+                        id="undefined_list"
+                        role="listbox"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-primary"
+                type="button"
+              >
+                <span
+                  aria-label="search"
+                  class="anticon anticon-search"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="search"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                    />
+                  </svg>
+                </span>
+                <span>
+                  Search
+                </span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index b5774b17fd..76aa9dba06 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -173,52 +173,56 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   style="margin:0 auto"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="单独 AutoComplete"
-      >
-        单独 AutoComplete
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="单独 AutoComplete"
+        >
+          单独 AutoComplete
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
             >
-              <span
-                class="ant-select-selection-search"
+              <div
+                class="ant-select-selector"
               >
-                <input
-                  aria-activedescendant="undefined_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  role="combobox"
-                  type="search"
-                  value=""
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="undefined_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    role="combobox"
+                    type="search"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
                 />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
+              </div>
             </div>
           </div>
         </div>
@@ -226,80 +230,201 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="单独 TreeSelect"
-      >
-        单独 TreeSelect
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="单独 TreeSelect"
+        >
+          单独 TreeSelect
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
-              <span
-                class="ant-select-selection-search"
+              <div
+                class="ant-select-selector"
               >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  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"
+                <span
+                  class="ant-select-selection-search"
                 >
-                  <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"
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
                   />
-                </svg>
+                </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="添加 Input.Group 正常"
+        >
+          添加 Input.Group 正常
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+              >
+                <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-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      role="combobox"
+                      type="search"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
             </span>
           </div>
         </div>
@@ -307,281 +432,32 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="添加 Input.Group 正常"
-      >
-        添加 Input.Group 正常
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="包含 search 图标正常"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
-          >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    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
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-            >
-              <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-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    role="combobox"
-                    type="search"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-            </div>
-          </span>
-        </div>
+          包含 search 图标正常
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="包含 search 图标正常"
-      >
-        包含 search 图标正常
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <span
-                  class="ant-input-affix-wrapper ant-select-selection-search-input"
-                >
-                  <input
-                    aria-activedescendant="undefined_list_0"
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-input"
-                    role="combobox"
-                    type="search"
-                    value=""
-                  />
-                  <span
-                    class="ant-input-suffix"
-                  >
-                    <span
-                      aria-label="search"
-                      class="anticon anticon-search"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="search"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="同时有 Input.Group 和图标发生移位"
-      >
-        同时有 Input.Group 和图标发生移位
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group ant-input-group-compact"
-          >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    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
-              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"
@@ -634,332 +510,484 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 />
               </div>
             </div>
-          </span>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="同时有 Input.Group 和 Search 组件发生移位"
-      >
-        同时有 Input.Group 和 Search 组件发生移位
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="同时有 Input.Group 和图标发生移位"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
-          >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:30%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    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
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <span
-                    class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
-                  >
-                    <span
-                      class="ant-input-wrapper ant-input-group"
-                    >
-                      <input
-                        aria-activedescendant="undefined_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="undefined_list"
-                        aria-haspopup="listbox"
-                        aria-owns="undefined_list"
-                        autocomplete="off"
-                        class="ant-input"
-                        role="combobox"
-                        type="search"
-                        value=""
-                      />
-                      <span
-                        class="ant-input-group-addon"
-                      >
-                        <button
-                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
-                          type="button"
-                        >
-                          <span
-                            aria-label="search"
-                            class="anticon anticon-search"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="search"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </span>
-                    </span>
-                  </span>
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-            </div>
-          </span>
-        </div>
+          同时有 Input.Group 和图标发生移位
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="Input Group 和 Button 结合"
-      >
-        Input Group 和 Button 结合
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-input-group ant-input-group-compact"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-              style="width:20%"
+            <span
+              class="ant-input-group ant-input-group-compact"
             >
               <div
-                class="ant-select-selector"
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
               >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
-                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    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
-              class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
+                <div
+                  class="ant-select-selector"
                 >
                   <span
-                    class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
+                    class="ant-select-selection-search"
                   >
-                    <span
-                      class="ant-input-wrapper ant-input-group"
-                    >
-                      <input
-                        aria-activedescendant="undefined_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="undefined_list"
-                        aria-haspopup="listbox"
-                        aria-owns="undefined_list"
-                        autocomplete="off"
-                        class="ant-input"
-                        role="combobox"
-                        type="search"
-                        value=""
-                      />
-                      <span
-                        class="ant-input-group-addon"
-                      >
-                        <button
-                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
-                          type="button"
-                        >
-                          <span
-                            aria-label="search"
-                            class="anticon anticon-search"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="search"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </span>
-                    </span>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
                 <span
-                  class="ant-select-selection-placeholder"
-                />
-              </div>
-            </div>
-            <button
-              class="ant-btn ant-btn-primary"
-              type="button"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
                   aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
                 >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  <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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-affix-wrapper ant-select-selection-search-input"
+                    >
+                      <input
+                        aria-activedescendant="undefined_list_0"
+                        aria-autocomplete="list"
+                        aria-controls="undefined_list"
+                        aria-haspopup="listbox"
+                        aria-owns="undefined_list"
+                        autocomplete="off"
+                        class="ant-input"
+                        role="combobox"
+                        type="search"
+                        value=""
+                      />
+                      <span
+                        class="ant-input-suffix"
+                      >
+                        <span
+                          aria-label="search"
+                          class="anticon anticon-search"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="search"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
                   />
-                </svg>
-              </span>
-              <span>
-                Search
-              </span>
-            </button>
-          </span>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="同时有 Input.Group 和 Search 组件发生移位"
+        >
+          同时有 Input.Group 和 Search 组件发生移位
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:30%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
+                    >
+                      <span
+                        class="ant-input-wrapper ant-input-group"
+                      >
+                        <input
+                          aria-activedescendant="undefined_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="undefined_list"
+                          aria-haspopup="listbox"
+                          aria-owns="undefined_list"
+                          autocomplete="off"
+                          class="ant-input"
+                          role="combobox"
+                          type="search"
+                          value=""
+                        />
+                        <span
+                          class="ant-input-group-addon"
+                        >
+                          <button
+                            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
+                            type="button"
+                          >
+                            <span
+                              aria-label="search"
+                              class="anticon anticon-search"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="search"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class=""
+          title="Input Group 和 Button 结合"
+        >
+          Input Group 和 Button 结合
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group ant-input-group-compact"
+            >
+              <div
+                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+                style="width:20%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="undefined_list"
+                      aria-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      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
+                class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <span
+                      class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
+                    >
+                      <span
+                        class="ant-input-wrapper ant-input-group"
+                      >
+                        <input
+                          aria-activedescendant="undefined_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="undefined_list"
+                          aria-haspopup="listbox"
+                          aria-owns="undefined_list"
+                          autocomplete="off"
+                          class="ant-input"
+                          role="combobox"
+                          type="search"
+                          value=""
+                        />
+                        <span
+                          class="ant-input-group-addon"
+                        >
+                          <button
+                            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
+                            type="button"
+                          >
+                            <span
+                              aria-label="search"
+                              class="anticon anticon-search"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="search"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-primary"
+                type="button"
+              >
+                <span
+                  aria-label="search"
+                  class="anticon anticon-search"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="search"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                    />
+                  </svg>
+                </span>
+                <span>
+                  Search
+                </span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap
index 524768aef5..68d6911f90 100644
--- a/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -215,45 +215,53 @@ exports[`renders ./components/comment/demo/editor.md extend context correctly 1`
         class="ant-comment-content-detail"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <textarea
-                  class="ant-input"
-                  rows="4"
-                />
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <textarea
+                    class="ant-input"
+                    rows="4"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <button
-                  class="ant-btn ant-btn-primary"
-                  type="submit"
+                <div
+                  class="ant-form-item-control-input-content"
                 >
-                  <span>
-                    Add Comment
-                  </span>
-                </button>
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="submit"
+                  >
+                    <span>
+                      Add Comment
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index 72e2762a9c..f42433f68e 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -143,45 +143,53 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
         class="ant-comment-content-detail"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <textarea
-                  class="ant-input"
-                  rows="4"
-                />
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <textarea
+                    class="ant-input"
+                    rows="4"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <button
-                  class="ant-btn ant-btn-primary"
-                  type="submit"
+                <div
+                  class="ant-form-item-control-input-content"
                 >
-                  <span>
-                    Add Comment
-                  </span>
-                </button>
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="submit"
+                  >
+                    <span>
+                      Add Comment
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 568958ea6a..daf501b3f9 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -15668,32 +15668,26 @@ exports[`ConfigProvider components Form configProvider 1`] = `
   class="config-form config-form-horizontal"
 >
   <div
-    class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    class="config-form-item config-form-item-with-help config-form-item-has-error"
   >
     <div
-      class="config-col config-form-item-control"
+      class="config-row config-form-item-row"
     >
       <div
-        class="config-form-item-control-input"
+        class="config-col config-form-item-control"
       >
         <div
-          class="config-form-item-control-input-content"
+          class="config-form-item-control-input"
         >
-          <input
-            class="config-input config-input-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="config-form-item-explain config-form-item-explain-connected"
-      >
-        <div
-          class="config-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="config-form-item-control-input-content"
+          >
+            <input
+              class="config-input config-input-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15706,33 +15700,27 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
   class="config-form config-form-horizontal"
 >
   <div
-    class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    class="config-form-item config-form-item-with-help config-form-item-has-error"
   >
     <div
-      class="config-col config-form-item-control"
+      class="config-row config-form-item-row"
     >
       <div
-        class="config-form-item-control-input"
+        class="config-col config-form-item-control"
       >
         <div
-          class="config-form-item-control-input-content"
+          class="config-form-item-control-input"
         >
-          <input
-            class="config-input config-input-disabled config-input-status-error"
-            disabled=""
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="config-form-item-explain config-form-item-explain-connected"
-      >
-        <div
-          class="config-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="config-form-item-control-input-content"
+          >
+            <input
+              class="config-input config-input-disabled config-input-status-error"
+              disabled=""
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15745,32 +15733,26 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
   class="config-form config-form-horizontal config-form-large"
 >
   <div
-    class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    class="config-form-item config-form-item-with-help config-form-item-has-error"
   >
     <div
-      class="config-col config-form-item-control"
+      class="config-row config-form-item-row"
     >
       <div
-        class="config-form-item-control-input"
+        class="config-col config-form-item-control"
       >
         <div
-          class="config-form-item-control-input-content"
+          class="config-form-item-control-input"
         >
-          <input
-            class="config-input config-input-lg config-input-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="config-form-item-explain config-form-item-explain-connected"
-      >
-        <div
-          class="config-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="config-form-item-control-input-content"
+          >
+            <input
+              class="config-input config-input-lg config-input-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15783,32 +15765,26 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
   class="config-form config-form-horizontal config-form-middle"
 >
   <div
-    class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    class="config-form-item config-form-item-with-help config-form-item-has-error"
   >
     <div
-      class="config-col config-form-item-control"
+      class="config-row config-form-item-row"
     >
       <div
-        class="config-form-item-control-input"
+        class="config-col config-form-item-control"
       >
         <div
-          class="config-form-item-control-input-content"
+          class="config-form-item-control-input"
         >
-          <input
-            class="config-input config-input-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="config-form-item-explain config-form-item-explain-connected"
-      >
-        <div
-          class="config-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="config-form-item-control-input-content"
+          >
+            <input
+              class="config-input config-input-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15821,32 +15797,26 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            class="ant-input ant-input-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15859,32 +15829,26 @@ exports[`ConfigProvider components Form normal 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            class="ant-input ant-input-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -15897,32 +15861,26 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
   class="prefix-Form prefix-Form-horizontal"
 >
   <div
-    class="ant-row prefix-Form-item prefix-Form-item-with-help prefix-Form-item-has-error"
+    class="prefix-Form-item prefix-Form-item-with-help prefix-Form-item-has-error"
   >
     <div
-      class="ant-col prefix-Form-item-control"
+      class="ant-row prefix-Form-item-row"
     >
       <div
-        class="prefix-Form-item-control-input"
+        class="ant-col prefix-Form-item-control"
       >
         <div
-          class="prefix-Form-item-control-input-content"
+          class="prefix-Form-item-control-input"
         >
-          <input
-            class="prefix-Form prefix-Form-status-error"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="prefix-Form-item-explain prefix-Form-item-explain-connected"
-      >
-        <div
-          class="prefix-Form-item-explain-error"
-          role="alert"
-        >
-          Bamboo is Light
+          <div
+            class="prefix-Form-item-control-input-content"
+          >
+            <input
+              class="prefix-Form prefix-Form-status-error"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/config-provider/__tests__/__snapshots__/form.test.js.snap b/components/config-provider/__tests__/__snapshots__/form.test.js.snap
index d04898ef93..b5daa79f97 100644
--- a/components/config-provider/__tests__/__snapshots__/form.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/form.test.js.snap
@@ -5,38 +5,42 @@ exports[`ConfigProvider.Form form requiredMark set requiredMark optional 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required-mark-optional"
-        for="age"
-        title="年龄"
-      >
-        年龄
-        <span
-          class="ant-form-item-optional"
-          title=""
-        >
-          (optional)
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required-mark-optional"
+          for="age"
+          title="年龄"
+        >
+          年龄
+          <span
+            class="ant-form-item-optional"
+            title=""
+          >
+            (optional)
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            id="age"
-            value="18"
-          />
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              id="age"
+              value="18"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 4202be5b43..2bbc59b793 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -34,6 +34,7 @@ export interface ErrorListProps {
   errors?: React.ReactNode[];
   warnings?: React.ReactNode[];
   className?: string;
+  onVisibleChanged?: (visible: boolean) => void;
 }
 
 export default function ErrorList({
@@ -42,6 +43,7 @@ export default function ErrorList({
   errors = EMPTY_LIST,
   warnings = EMPTY_LIST,
   className: rootClassName,
+  onVisibleChanged,
 }: ErrorListProps) {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -69,16 +71,10 @@ export default function ErrorList({
 
   return (
     <CSSMotion
-      {...collapseMotion}
+      motionDeadline={collapseMotion.motionDeadline}
       motionName={`${rootPrefixCls}-show-help`}
-      motionAppear={false}
-      motionEnter={false}
       visible={!!fullKeyList.length}
-      onLeaveStart={node => {
-        // Force disable css override style in index.less configured
-        node.style.height = 'auto';
-        return { height: node.offsetHeight };
-      }}
+      onVisibleChanged={onVisibleChanged}
     >
       {holderProps => {
         const { className: holderClassName, style: holderStyle } = holderProps;
diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx
new file mode 100644
index 0000000000..bd53e73c01
--- /dev/null
+++ b/components/form/FormItem/ItemHolder.tsx
@@ -0,0 +1,209 @@
+import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import classNames from 'classnames';
+import * as React from 'react';
+import omit from 'rc-util/lib/omit';
+import type { Meta } from 'rc-field-form/lib/interface';
+import { Row } from '../../grid';
+import FormItemLabel from '../FormItemLabel';
+import FormItemInput from '../FormItemInput';
+import type { FormItemStatusContextProps, ReportMetaChange } from '../context';
+import { FormContext, FormItemInputContext, NoStyleItemContext } from '../context';
+import type { FormItemProps, ValidateStatus } from '.';
+import useDebounce from '../hooks/useDebounce';
+
+const iconMap = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined,
+};
+
+export interface ItemHolderProps extends FormItemProps {
+  prefixCls: string;
+  className?: string;
+  style?: React.CSSProperties;
+  errors: React.ReactNode[];
+  warnings: React.ReactNode[];
+  meta: Meta;
+  children?: React.ReactNode;
+  fieldId?: string;
+  isRequired?: boolean;
+  onSubItemMetaChange: ReportMetaChange;
+}
+
+export default function ItemHolder(props: ItemHolderProps) {
+  const {
+    prefixCls,
+    className,
+    style,
+    help,
+    errors,
+    warnings,
+    validateStatus,
+    meta,
+    hasFeedback,
+    hidden,
+    children,
+    fieldId,
+    isRequired,
+    onSubItemMetaChange,
+    ...restProps
+  } = props;
+
+  const itemPrefixCls = `${prefixCls}-item`;
+  const { requiredMark } = React.useContext(FormContext);
+
+  // ======================== Margin ========================
+  const itemRef = React.useRef<HTMLDivElement>(null);
+  const debounceErrors = useDebounce(errors);
+  const debounceWarnings = useDebounce(warnings);
+  const hasHelp = help !== undefined && help !== null;
+  const hasError = !!(hasHelp || errors.length || warnings.length);
+  const [marginBottom, setMarginBottom] = React.useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (hasError && itemRef.current) {
+      const itemStyle = getComputedStyle(itemRef.current);
+      setMarginBottom(parseInt(itemStyle.marginBottom, 10));
+    }
+  }, [hasError]);
+
+  const onErrorVisibleChanged = (nextVisible: boolean) => {
+    if (!nextVisible) {
+      setMarginBottom(null);
+    }
+  };
+
+  // ======================== Status ========================
+  let mergedValidateStatus: ValidateStatus = '';
+  if (validateStatus !== undefined) {
+    mergedValidateStatus = validateStatus;
+  } else if (meta.validating) {
+    mergedValidateStatus = 'validating';
+  } else if (debounceErrors.length) {
+    mergedValidateStatus = 'error';
+  } else if (debounceWarnings.length) {
+    mergedValidateStatus = 'warning';
+  } else if (meta.touched) {
+    mergedValidateStatus = 'success';
+  }
+
+  const formItemStatusContext = React.useMemo<FormItemStatusContextProps>(() => {
+    let feedbackIcon: React.ReactNode;
+    if (hasFeedback) {
+      const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
+      feedbackIcon = IconNode ? (
+        <span
+          className={classNames(
+            `${itemPrefixCls}-feedback-icon`,
+            `${itemPrefixCls}-feedback-icon-${mergedValidateStatus}`,
+          )}
+        >
+          <IconNode />
+        </span>
+      ) : null;
+    }
+
+    return {
+      status: mergedValidateStatus,
+      hasFeedback,
+      feedbackIcon,
+      isFormItemInput: true,
+    };
+  }, [mergedValidateStatus, hasFeedback]);
+
+  // ======================== Render ========================
+  const itemClassName = {
+    [itemPrefixCls]: true,
+    [`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length,
+    [`${className}`]: !!className,
+
+    // Status
+    [`${itemPrefixCls}-has-feedback`]: mergedValidateStatus && hasFeedback,
+    [`${itemPrefixCls}-has-success`]: mergedValidateStatus === 'success',
+    [`${itemPrefixCls}-has-warning`]: mergedValidateStatus === 'warning',
+    [`${itemPrefixCls}-has-error`]: mergedValidateStatus === 'error',
+    [`${itemPrefixCls}-is-validating`]: mergedValidateStatus === 'validating',
+    [`${itemPrefixCls}-hidden`]: hidden,
+  };
+
+  return (
+    <div className={classNames(itemClassName)} style={style} ref={itemRef}>
+      <Row
+        className={`${itemPrefixCls}-row`}
+        {...omit(restProps, [
+          '_internalItemRender' as any,
+          'colon',
+          'dependencies',
+          'extra',
+          'fieldKey',
+          'getValueFromEvent',
+          'getValueProps',
+          'htmlFor',
+          'id', // It is deprecated because `htmlFor` is its replacement.
+          'initialValue',
+          'isListField',
+          'label',
+          'labelAlign',
+          'labelCol',
+          'labelWrap',
+          'messageVariables',
+          'name',
+          'normalize',
+          'noStyle',
+          'preserve',
+          'required',
+          'requiredMark',
+          'rules',
+          'shouldUpdate',
+          'trigger',
+          'tooltip',
+          'validateFirst',
+          'validateTrigger',
+          'valuePropName',
+          'wrapperCol',
+        ])}
+      >
+        {/* Label */}
+        <FormItemLabel
+          htmlFor={fieldId}
+          required={isRequired}
+          requiredMark={requiredMark}
+          {...props}
+          prefixCls={prefixCls}
+        />
+        {/* Input Group */}
+        <FormItemInput
+          {...props}
+          {...meta}
+          errors={debounceErrors}
+          warnings={debounceWarnings}
+          prefixCls={prefixCls}
+          status={mergedValidateStatus}
+          help={help}
+          marginBottom={marginBottom}
+          onErrorVisibleChanged={onErrorVisibleChanged}
+        >
+          <NoStyleItemContext.Provider value={onSubItemMetaChange}>
+            <FormItemInputContext.Provider value={formItemStatusContext}>
+              {children}
+            </FormItemInputContext.Provider>
+          </NoStyleItemContext.Provider>
+        </FormItemInput>
+      </Row>
+
+      {!!marginBottom && (
+        <div
+          className={`${itemPrefixCls}-margin-offset`}
+          style={{
+            marginBottom: -marginBottom,
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/components/form/FormItem.tsx b/components/form/FormItem/index.tsx
similarity index 67%
rename from components/form/FormItem.tsx
rename to components/form/FormItem/index.tsx
index 65e5f94d3d..faf73d70de 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem/index.tsx
@@ -1,34 +1,23 @@
-import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
-import classNames from 'classnames';
 import type { FormInstance } from 'rc-field-form';
 import { Field, FieldContext, ListContext } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
 import type { Meta, NamePath } from 'rc-field-form/lib/interface';
 import useState from 'rc-util/lib/hooks/useState';
-import omit from 'rc-util/lib/omit';
 import { supportRef } from 'rc-util/lib/ref';
-import type { ReactNode } from 'react';
 import * as React from 'react';
-import { useContext, useMemo } from 'react';
-import useFormItemStatus from './hooks/useFormItemStatus';
-import { ConfigContext } from '../config-provider';
-import Row from '../grid/row';
-import { cloneElement, isValidElement } from '../_util/reactNode';
-import { tuple } from '../_util/type';
-import warning from '../_util/warning';
-import type { FormItemStatusContextProps } from './context';
-import { FormContext, FormItemInputContext, NoStyleItemContext } from './context';
-import type { FormItemInputProps } from './FormItemInput';
-import FormItemInput from './FormItemInput';
-import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
-import FormItemLabel from './FormItemLabel';
-import useDebounce from './hooks/useDebounce';
-import useFrameState from './hooks/useFrameState';
-import useItemRef from './hooks/useItemRef';
-import { getFieldId, toArray } from './util';
+import { useContext } from 'react';
+import useFormItemStatus from '../hooks/useFormItemStatus';
+import { ConfigContext } from '../../config-provider';
+import { cloneElement, isValidElement } from '../../_util/reactNode';
+import { tuple } from '../../_util/type';
+import warning from '../../_util/warning';
+import { FormContext, NoStyleItemContext } from '../context';
+import type { FormItemInputProps } from '../FormItemInput';
+import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel';
+import useFrameState from '../hooks/useFrameState';
+import useItemRef from '../hooks/useItemRef';
+import { getFieldId, toArray } from '../util';
+import ItemHolder from './ItemHolder';
 
 const NAME_SPLIT = '__SPLIT__';
 
@@ -93,26 +82,14 @@ function genEmptyMeta(): Meta {
   };
 }
 
-const iconMap = {
-  success: CheckCircleFilled,
-  warning: ExclamationCircleFilled,
-  error: CloseCircleFilled,
-  validating: LoadingOutlined,
-};
-
 function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
   const {
     name,
     noStyle,
     dependencies,
     prefixCls: customizePrefixCls,
-    style,
-    className,
     shouldUpdate,
-    hasFeedback,
-    help,
     rules,
-    validateStatus,
     children,
     required,
     label,
@@ -120,10 +97,9 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     trigger = 'onChange',
     validateTrigger,
     hidden,
-    ...restProps
   } = props;
   const { getPrefixCls } = useContext(ConfigContext);
-  const { name: formName, requiredMark } = useContext(FormContext);
+  const { name: formName } = useContext(FormContext);
   const isRenderProps = typeof children === 'function';
   const notifyParentMetaChange = useContext(NoStyleItemContext);
 
@@ -211,50 +187,9 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     return [errorList, warningList];
   }, [subFieldErrors, meta.errors, meta.warnings]);
 
-  const debounceErrors = useDebounce(mergedErrors);
-  const debounceWarnings = useDebounce(mergedWarnings);
-
   // ===================== Children Ref =====================
   const getItemRef = useItemRef();
 
-  // ======================== Status ========================
-  let mergedValidateStatus: ValidateStatus = '';
-  if (validateStatus !== undefined) {
-    mergedValidateStatus = validateStatus;
-  } else if (meta?.validating) {
-    mergedValidateStatus = 'validating';
-  } else if (debounceErrors.length) {
-    mergedValidateStatus = 'error';
-  } else if (debounceWarnings.length) {
-    mergedValidateStatus = 'warning';
-  } else if (meta?.touched) {
-    mergedValidateStatus = 'success';
-  }
-
-  const formItemStatusContext = useMemo<FormItemStatusContextProps>(() => {
-    let feedbackIcon: ReactNode;
-    if (hasFeedback) {
-      const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
-      feedbackIcon = IconNode ? (
-        <span
-          className={classNames(
-            `${prefixCls}-item-feedback-icon`,
-            `${prefixCls}-item-feedback-icon-${mergedValidateStatus}`,
-          )}
-        >
-          <IconNode />
-        </span>
-      ) : null;
-    }
-
-    return {
-      status: mergedValidateStatus,
-      hasFeedback,
-      feedbackIcon,
-      isFormItemInput: true,
-    };
-  }, [mergedValidateStatus, hasFeedback]);
-
   // ======================== Render ========================
   function renderLayout(
     baseChildren: React.ReactNode,
@@ -265,75 +200,20 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
       return baseChildren;
     }
 
-    const itemClassName = {
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-with-help`]:
-        (help !== undefined && help !== null) || debounceErrors.length || debounceWarnings.length,
-      [`${className}`]: !!className,
-
-      // Status
-      [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback,
-      [`${prefixCls}-item-has-success`]: mergedValidateStatus === 'success',
-      [`${prefixCls}-item-has-warning`]: mergedValidateStatus === 'warning',
-      [`${prefixCls}-item-has-error`]: mergedValidateStatus === 'error',
-      [`${prefixCls}-item-is-validating`]: mergedValidateStatus === 'validating',
-      [`${prefixCls}-item-hidden`]: hidden,
-    };
-
-    // ======================= Children =======================
     return (
-      <Row
-        className={classNames(itemClassName)}
-        style={style}
+      <ItemHolder
         key="row"
-        {...omit(restProps, [
-          'colon',
-          'extra',
-          'fieldKey',
-          'requiredMark',
-          'getValueFromEvent',
-          'getValueProps',
-          'htmlFor',
-          'id', // It is deprecated because `htmlFor` is its replacement.
-          'initialValue',
-          'isListField',
-          'labelAlign',
-          'labelWrap',
-          'labelCol',
-          'normalize',
-          'preserve',
-          'tooltip',
-          'validateFirst',
-          'valuePropName',
-          'wrapperCol',
-          '_internalItemRender' as any,
-        ])}
+        {...props}
+        prefixCls={prefixCls}
+        fieldId={fieldId}
+        isRequired={isRequired}
+        errors={mergedErrors}
+        warnings={mergedWarnings}
+        meta={meta}
+        onSubItemMetaChange={onSubItemMetaChange}
       >
-        {/* Label */}
-        <FormItemLabel
-          htmlFor={fieldId}
-          required={isRequired}
-          requiredMark={requiredMark}
-          {...props}
-          prefixCls={prefixCls}
-        />
-        {/* Input Group */}
-        <FormItemInput
-          {...props}
-          {...meta}
-          errors={debounceErrors}
-          warnings={debounceWarnings}
-          prefixCls={prefixCls}
-          status={mergedValidateStatus}
-          help={help}
-        >
-          <NoStyleItemContext.Provider value={onSubItemMetaChange}>
-            <FormItemInputContext.Provider value={formItemStatusContext}>
-              {baseChildren}
-            </FormItemInputContext.Provider>
-          </NoStyleItemContext.Provider>
-        </FormItemInput>
-      </Row>
+        {baseChildren}
+      </ItemHolder>
     );
   }
 
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index be5f9dc3da..58f602798a 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -11,6 +11,8 @@ interface FormItemInputMiscProps {
   children: React.ReactNode;
   errors: React.ReactNode[];
   warnings: React.ReactNode[];
+  marginBottom?: number | null;
+  onErrorVisibleChanged?: (visible: boolean) => void;
   /** @private Internal Usage, do not use in any of your production. */
   _internalItemRender?: {
     mark: string;
@@ -18,7 +20,7 @@ interface FormItemInputMiscProps {
       props: FormItemInputProps & FormItemInputMiscProps,
       domList: {
         input: JSX.Element;
-        errorList: JSX.Element;
+        errorList: JSX.Element | null;
         extra: JSX.Element | null;
       },
     ) => React.ReactNode;
@@ -43,6 +45,8 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
     _internalItemRender: formItemRender,
     extra,
     help,
+    marginBottom,
+    onErrorVisibleChanged,
   } = props;
   const baseClassName = `${prefixCls}-item`;
 
@@ -63,17 +67,22 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
     </div>
   );
   const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
-  const errorListDom = (
-    <FormItemPrefixContext.Provider value={formItemContext}>
-      <ErrorList
-        errors={errors}
-        warnings={warnings}
-        help={help}
-        helpStatus={status}
-        className={`${baseClassName}-explain-connected`}
-      />
-    </FormItemPrefixContext.Provider>
-  );
+  const errorListDom =
+    marginBottom !== null || errors.length || warnings.length ? (
+      <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
+        <FormItemPrefixContext.Provider value={formItemContext}>
+          <ErrorList
+            errors={errors}
+            warnings={warnings}
+            help={help}
+            helpStatus={status}
+            className={`${baseClassName}-explain-connected`}
+            onVisibleChanged={onErrorVisibleChanged}
+          />
+        </FormItemPrefixContext.Provider>
+        {!!marginBottom && <div style={{ width: 0, height: marginBottom }} />}
+      </div>
+    ) : null;
 
   // If extra = 0, && will goes wrong
   // 0&&error -> 0
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 79c6fc19db..2acde55333 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -15,208 +15,38 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-0"
-              title="Field 0"
-            >
-              Field 0
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
             >
-              <div
-                class="ant-form-item-control-input-content"
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-0"
+                title="Field 0"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-0"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
+                Field 0
+              </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-1"
-              title="Field 1"
-            >
-              Field 1
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
                 <div
-                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                  class="ant-form-item-control-input-content"
                 >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="advanced_search_field-1_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="advanced_search_field-1_list"
-                        aria-haspopup="listbox"
-                        aria-owns="advanced_search_field-1_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="advanced_search_field-1"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                    >
-                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-                    </span>
-                  </div>
-                  <div>
-                    <div
-                      class="ant-select-dropdown"
-                      style="opacity:0"
-                    >
-                      <div>
-                        <div
-                          id="advanced_search_field-1_list"
-                          role="listbox"
-                          style="height:0;width:0;overflow:hidden"
-                        >
-                          <div
-                            aria-label="1"
-                            aria-selected="false"
-                            id="advanced_search_field-1_list_0"
-                            role="option"
-                          >
-                            1
-                          </div>
-                          <div
-                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                            aria-selected="true"
-                            id="advanced_search_field-1_list_1"
-                            role="option"
-                          >
-                            2
-                          </div>
-                        </div>
-                        <div
-                          class="rc-virtual-list"
-                          style="position:relative"
-                        >
-                          <div
-                            class="rc-virtual-list-holder"
-                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                          >
-                            <div>
-                              <div
-                                class="rc-virtual-list-holder-inner"
-                                style="display:flex;flex-direction:column"
-                              >
-                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                  title="1"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    1
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                                <div
-                                  aria-selected="true"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </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>
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-0"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
             </div>
@@ -228,213 +58,139 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-2"
-              title="Field 2"
-            >
-              Field 2
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
             >
-              <div
-                class="ant-form-item-control-input-content"
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-1"
+                title="Field 1"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-2"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
+                Field 1
+              </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-3"
-              title="Field 3"
-            >
-              Field 3
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
-              >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-3"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-4"
-              title="Field 4"
-            >
-              Field 4
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
-            <div
-              class="ant-form-item-control-input"
-            >
-              <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
                 <div
-                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                  class="ant-form-item-control-input-content"
                 >
                   <div
-                    class="ant-select-selector"
+                    class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="advanced_search_field-4_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="advanced_search_field-4_list"
-                        aria-haspopup="listbox"
-                        aria-owns="advanced_search_field-4_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="advanced_search_field-4"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                    >
-                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-                    </span>
-                  </div>
-                  <div>
                     <div
-                      class="ant-select-dropdown"
-                      style="opacity:0"
+                      class="ant-select-selector"
                     >
-                      <div>
-                        <div
-                          id="advanced_search_field-4_list"
-                          role="listbox"
-                          style="height:0;width:0;overflow:hidden"
-                        >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="advanced_search_field-1_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="advanced_search_field-1_list"
+                          aria-haspopup="listbox"
+                          aria-owns="advanced_search_field-1_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="advanced_search_field-1"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                      >
+                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                      </span>
+                    </div>
+                    <div>
+                      <div
+                        class="ant-select-dropdown"
+                        style="opacity:0"
+                      >
+                        <div>
                           <div
-                            aria-label="1"
-                            aria-selected="false"
-                            id="advanced_search_field-4_list_0"
-                            role="option"
+                            id="advanced_search_field-1_list"
+                            role="listbox"
+                            style="height:0;width:0;overflow:hidden"
                           >
-                            1
+                            <div
+                              aria-label="1"
+                              aria-selected="false"
+                              id="advanced_search_field-1_list_0"
+                              role="option"
+                            >
+                              1
+                            </div>
+                            <div
+                              aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                              aria-selected="true"
+                              id="advanced_search_field-1_list_1"
+                              role="option"
+                            >
+                              2
+                            </div>
                           </div>
                           <div
-                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                            aria-selected="true"
-                            id="advanced_search_field-4_list_1"
-                            role="option"
+                            class="rc-virtual-list"
+                            style="position:relative"
                           >
-                            2
-                          </div>
-                        </div>
-                        <div
-                          class="rc-virtual-list"
-                          style="position:relative"
-                        >
-                          <div
-                            class="rc-virtual-list-holder"
-                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                          >
-                            <div>
-                              <div
-                                class="rc-virtual-list-holder-inner"
-                                style="display:flex;flex-direction:column"
-                              >
+                            <div
+                              class="rc-virtual-list-holder"
+                              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                            >
+                              <div>
                                 <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                  title="1"
+                                  class="rc-virtual-list-holder-inner"
+                                  style="display:flex;flex-direction:column"
                                 >
                                   <div
-                                    class="ant-select-item-option-content"
+                                    aria-selected="false"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                    title="1"
                                   >
-                                    1
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      1
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
                                   </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                                <div
-                                  aria-selected="true"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                                >
                                   <div
-                                    class="ant-select-item-option-content"
+                                    aria-selected="true"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                                    title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                                   >
-                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
                                   </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
                                 </div>
                               </div>
                             </div>
@@ -442,33 +198,33 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                         </div>
                       </div>
                     </div>
-                  </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"
+                      aria-hidden="true"
+                      class="ant-select-arrow"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
                     >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="down"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="down"
+                        class="anticon anticon-down ant-select-suffix"
+                        role="img"
                       >
-                        <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>
+                        <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>
-                  </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -480,35 +236,303 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-5"
-              title="Field 5"
-            >
-              Field 5
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-2"
+                title="Field 2"
+              >
+                Field 2
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-5"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-2"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-3"
+                title="Field 3"
+              >
+                Field 3
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-3"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-4"
+                title="Field 4"
+              >
+                Field 4
+              </label>
+            </div>
+            <div
+              class="ant-col 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"
+                  >
+                    <div
+                      class="ant-select-selector"
+                    >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="advanced_search_field-4_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="advanced_search_field-4_list"
+                          aria-haspopup="listbox"
+                          aria-owns="advanced_search_field-4_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="advanced_search_field-4"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                      >
+                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                      </span>
+                    </div>
+                    <div>
+                      <div
+                        class="ant-select-dropdown"
+                        style="opacity:0"
+                      >
+                        <div>
+                          <div
+                            id="advanced_search_field-4_list"
+                            role="listbox"
+                            style="height:0;width:0;overflow:hidden"
+                          >
+                            <div
+                              aria-label="1"
+                              aria-selected="false"
+                              id="advanced_search_field-4_list_0"
+                              role="option"
+                            >
+                              1
+                            </div>
+                            <div
+                              aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                              aria-selected="true"
+                              id="advanced_search_field-4_list_1"
+                              role="option"
+                            >
+                              2
+                            </div>
+                          </div>
+                          <div
+                            class="rc-virtual-list"
+                            style="position:relative"
+                          >
+                            <div
+                              class="rc-virtual-list-holder"
+                              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                            >
+                              <div>
+                                <div
+                                  class="rc-virtual-list-holder-inner"
+                                  style="display:flex;flex-direction:column"
+                                >
+                                  <div
+                                    aria-selected="false"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                    title="1"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      1
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                  <div
+                                    aria-selected="true"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                                    title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </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>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-5"
+                title="Field 5"
+              >
+                Field 5
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-5"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -581,178 +605,13 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
   id="basic"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_username"
-        title="Username"
-      >
-        Username
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="basic_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="basic_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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="basic_remember"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Remember me
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/col-24-debug.md extend context correctly 1`] = `
-Array [
-  <form
-    autocomplete="off"
-    class="ant-form ant-form-horizontal"
-    id="basic"
-  >
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-col-24 ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
@@ -763,7 +622,7 @@ Array [
         </label>
       </div>
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -781,11 +640,15 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
@@ -796,7 +659,7 @@ Array [
         </label>
       </div>
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -846,217 +709,406 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
-      style="box-shadow:0 0 3px red"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-label"
-      >
-        <label
-          class=""
-          for="basic_select"
-          title=""
-        >
-          <a
-            href="https://github.com/ant-design/ant-design/issues/36459"
-          >
-            #36459
-          </a>
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-col-offset-8 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="basic_remember"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
+                />
+              </span>
+              <span>
+                Remember me
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/col-24-debug.md extend context correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="basic"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="basic_username"
+            title="Username"
+          >
+            Username
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
-              style="width:70%"
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="basic_username"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="basic_password"
+            title="Password"
+          >
+            Password
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <span
+                class="ant-input-affix-wrapper ant-input-password"
+              >
+                <input
+                  action="click"
+                  class="ant-input"
+                  id="basic_password"
+                  type="password"
+                  value=""
+                />
+                <span
+                  class="ant-input-suffix"
+                >
+                  <span
+                    aria-label="eye-invisible"
+                    class="anticon anticon-eye-invisible ant-input-password-icon"
+                    role="img"
+                    tabindex="-1"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="eye-invisible"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                      />
+                      <path
+                        d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="box-shadow:0 0 3px red"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class=""
+            for="basic_select"
+            title=""
+          >
+            <a
+              href="https://github.com/ant-design/ant-design/issues/36459"
+            >
+              #36459
+            </a>
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select-selector"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                style="width:70%"
               >
                 <div
-                  class="ant-select-selection-overflow"
+                  class="ant-select-selector"
                 >
                   <div
-                    class="ant-select-selection-overflow-item"
-                    style="opacity:1"
-                  >
-                    <span
-                      class="ant-select-selection-item"
-                      title="Bamboo"
-                    >
-                      <span
-                        class="ant-select-selection-item-content"
-                      >
-                        Bamboo
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-item-remove"
-                        style="user-select:none;-webkit-user-select:none"
-                        unselectable="on"
-                      >
-                        <span
-                          aria-label="close"
-                          class="anticon anticon-close"
-                          role="img"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            data-icon="close"
-                            fill="currentColor"
-                            focusable="false"
-                            height="1em"
-                            viewBox="64 64 896 896"
-                            width="1em"
-                          >
-                            <path
-                              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                  <div
-                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                    style="opacity:1"
+                    class="ant-select-selection-overflow"
                   >
                     <div
-                      class="ant-select-selection-search"
-                      style="width:0"
+                      class="ant-select-selection-overflow-item"
+                      style="opacity:1"
                     >
-                      <input
-                        aria-activedescendant="basic_select_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="basic_select_list"
-                        aria-haspopup="listbox"
-                        aria-owns="basic_select_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="basic_select"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
                       <span
-                        aria-hidden="true"
-                        class="ant-select-selection-search-mirror"
+                        class="ant-select-selection-item"
+                        title="Bamboo"
                       >
-                         
+                        <span
+                          class="ant-select-selection-item-content"
+                        >
+                          Bamboo
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-item-remove"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        >
+                          <span
+                            aria-label="close"
+                            class="anticon anticon-close"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="close"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
                       </span>
                     </div>
+                    <div
+                      class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                      style="opacity:1"
+                    >
+                      <div
+                        class="ant-select-selection-search"
+                        style="width:0"
+                      >
+                        <input
+                          aria-activedescendant="basic_select_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="basic_select_list"
+                          aria-haspopup="listbox"
+                          aria-owns="basic_select_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="basic_select"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-search-mirror"
+                        >
+                           
+                        </span>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      id="basic_select_list"
-                      role="listbox"
-                      style="height:0;width:0;overflow:hidden"
-                    >
+                <div>
+                  <div
+                    class="ant-select-dropdown"
+                    style="opacity:0"
+                  >
+                    <div>
                       <div
-                        aria-label="Bamboo"
-                        aria-selected="true"
-                        id="basic_select_list_0"
-                        role="option"
+                        id="basic_select_list"
+                        role="listbox"
+                        style="height:0;width:0;overflow:hidden"
                       >
-                        bamboo
+                        <div
+                          aria-label="Bamboo"
+                          aria-selected="true"
+                          id="basic_select_list_0"
+                          role="option"
+                        >
+                          bamboo
+                        </div>
+                        <div
+                          aria-label="Little"
+                          aria-selected="false"
+                          id="basic_select_list_1"
+                          role="option"
+                        >
+                          little
+                        </div>
                       </div>
                       <div
-                        aria-label="Little"
-                        aria-selected="false"
-                        id="basic_select_list_1"
-                        role="option"
+                        class="rc-virtual-list"
+                        style="position:relative"
                       >
-                        little
-                      </div>
-                    </div>
-                    <div
-                      class="rc-virtual-list"
-                      style="position:relative"
-                    >
-                      <div
-                        class="rc-virtual-list-holder"
-                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                      >
-                        <div>
-                          <div
-                            class="rc-virtual-list-holder-inner"
-                            style="display:flex;flex-direction:column"
-                          >
+                        <div
+                          class="rc-virtual-list-holder"
+                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                        >
+                          <div>
                             <div
-                              aria-selected="true"
-                              class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                              title="Bamboo"
+                              class="rc-virtual-list-holder-inner"
+                              style="display:flex;flex-direction:column"
                             >
                               <div
-                                class="ant-select-item-option-content"
+                                aria-selected="true"
+                                class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                title="Bamboo"
                               >
-                                Bamboo
-                              </div>
-                              <span
-                                aria-hidden="true"
-                                class="ant-select-item-option-state"
-                                style="user-select:none;-webkit-user-select:none"
-                                unselectable="on"
-                              >
-                                <span
-                                  aria-label="check"
-                                  class="anticon anticon-check"
-                                  role="img"
+                                <div
+                                  class="ant-select-item-option-content"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    data-icon="check"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="1em"
-                                    viewBox="64 64 896 896"
-                                    width="1em"
+                                  Bamboo
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select:none;-webkit-user-select:none"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="check"
+                                    class="anticon anticon-check"
+                                    role="img"
                                   >
-                                    <path
-                                      d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                                    />
-                                  </svg>
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="check"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                                      />
+                                    </svg>
+                                  </span>
                                 </span>
-                              </span>
-                            </div>
-                            <div
-                              aria-selected="false"
-                              class="ant-select-item ant-select-item-option"
-                              title="Little"
-                            >
-                              <div
-                                class="ant-select-item-option-content"
-                              >
-                                Little
                               </div>
-                            </div>
-                            <div
-                              aria-selected="false"
-                              class="ant-select-item ant-select-item-option"
-                              title="Light"
-                            >
                               <div
-                                class="ant-select-item-option-content"
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="Little"
                               >
-                                Light
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  Little
+                                </div>
+                              </div>
+                              <div
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="Light"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  Light
+                                </div>
                               </div>
                             </div>
                           </div>
@@ -1072,25 +1124,29 @@ Array [
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-col-24 ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <span>
-                Submit
-              </span>
-            </button>
+              <button
+                class="ant-btn ant-btn-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1102,123 +1158,135 @@ Array [
     id="responsive"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
-      >
-        <label
-          class="ant-form-item-required"
-          for="responsive_username"
-          title="Username"
-        >
-          Username
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <label
+            class="ant-form-item-required"
+            for="responsive_username"
+            title="Username"
           >
-            <input
-              class="ant-input"
-              id="responsive_username"
-              type="text"
-              value=""
-            />
-          </div>
+            Username
+          </label>
         </div>
-      </div>
-    </div>
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
-      >
-        <label
-          class="ant-form-item-required"
-          for="responsive_password"
-          title="Password"
-        >
-          Password
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <span
-              class="ant-input-affix-wrapper ant-input-password"
+            <div
+              class="ant-form-item-control-input-content"
             >
               <input
-                action="click"
                 class="ant-input"
-                id="responsive_password"
-                type="password"
+                id="responsive_username"
+                type="text"
                 value=""
               />
-              <span
-                class="ant-input-suffix"
-              >
-                <span
-                  aria-label="eye-invisible"
-                  class="anticon anticon-eye-invisible ant-input-password-icon"
-                  role="img"
-                  tabindex="-1"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="eye-invisible"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                    />
-                    <path
-                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+        >
+          <label
+            class="ant-form-item-required"
+            for="responsive_password"
+            title="Password"
+          >
+            Password
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <span>
-                Submit
+              <span
+                class="ant-input-affix-wrapper ant-input-password"
+              >
+                <input
+                  action="click"
+                  class="ant-input"
+                  id="responsive_password"
+                  type="password"
+                  value=""
+                />
+                <span
+                  class="ant-input-suffix"
+                >
+                  <span
+                    aria-label="eye-invisible"
+                    class="anticon anticon-eye-invisible ant-input-password-icon"
+                    role="img"
+                    tabindex="-1"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="eye-invisible"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                      />
+                      <path
+                        d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </span>
-            </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                class="ant-btn ant-btn-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1232,216 +1300,220 @@ Array [
     class="ant-form ant-form-vertical"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
       style="box-shadow:0 0 3px red"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          for="select"
-          title=""
-        >
-          <a
-            href="https://github.com/ant-design/ant-design/issues/36459"
-          >
-            #36459
-          </a>
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="select"
+            title=""
+          >
+            <a
+              href="https://github.com/ant-design/ant-design/issues/36459"
+            >
+              #36459
+            </a>
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
-              style="width:70%"
+              class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select-selector"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                style="width:70%"
               >
                 <div
-                  class="ant-select-selection-overflow"
+                  class="ant-select-selector"
                 >
                   <div
-                    class="ant-select-selection-overflow-item"
-                    style="opacity:1"
-                  >
-                    <span
-                      class="ant-select-selection-item"
-                      title="Bamboo"
-                    >
-                      <span
-                        class="ant-select-selection-item-content"
-                      >
-                        Bamboo
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-item-remove"
-                        style="user-select:none;-webkit-user-select:none"
-                        unselectable="on"
-                      >
-                        <span
-                          aria-label="close"
-                          class="anticon anticon-close"
-                          role="img"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            data-icon="close"
-                            fill="currentColor"
-                            focusable="false"
-                            height="1em"
-                            viewBox="64 64 896 896"
-                            width="1em"
-                          >
-                            <path
-                              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                  <div
-                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                    style="opacity:1"
+                    class="ant-select-selection-overflow"
                   >
                     <div
-                      class="ant-select-selection-search"
-                      style="width:0"
+                      class="ant-select-selection-overflow-item"
+                      style="opacity:1"
                     >
-                      <input
-                        aria-activedescendant="select_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="select_list"
-                        aria-haspopup="listbox"
-                        aria-owns="select_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="select"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
                       <span
-                        aria-hidden="true"
-                        class="ant-select-selection-search-mirror"
+                        class="ant-select-selection-item"
+                        title="Bamboo"
                       >
-                         
+                        <span
+                          class="ant-select-selection-item-content"
+                        >
+                          Bamboo
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-item-remove"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        >
+                          <span
+                            aria-label="close"
+                            class="anticon anticon-close"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="close"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
                       </span>
                     </div>
+                    <div
+                      class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                      style="opacity:1"
+                    >
+                      <div
+                        class="ant-select-selection-search"
+                        style="width:0"
+                      >
+                        <input
+                          aria-activedescendant="select_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="select_list"
+                          aria-haspopup="listbox"
+                          aria-owns="select_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="select"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-search-mirror"
+                        >
+                           
+                        </span>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div>
-                <div
-                  class="ant-select-dropdown"
-                  style="opacity:0"
-                >
-                  <div>
-                    <div
-                      id="select_list"
-                      role="listbox"
-                      style="height:0;width:0;overflow:hidden"
-                    >
+                <div>
+                  <div
+                    class="ant-select-dropdown"
+                    style="opacity:0"
+                  >
+                    <div>
                       <div
-                        aria-label="Bamboo"
-                        aria-selected="true"
-                        id="select_list_0"
-                        role="option"
+                        id="select_list"
+                        role="listbox"
+                        style="height:0;width:0;overflow:hidden"
                       >
-                        bamboo
+                        <div
+                          aria-label="Bamboo"
+                          aria-selected="true"
+                          id="select_list_0"
+                          role="option"
+                        >
+                          bamboo
+                        </div>
+                        <div
+                          aria-label="Little"
+                          aria-selected="false"
+                          id="select_list_1"
+                          role="option"
+                        >
+                          little
+                        </div>
                       </div>
                       <div
-                        aria-label="Little"
-                        aria-selected="false"
-                        id="select_list_1"
-                        role="option"
+                        class="rc-virtual-list"
+                        style="position:relative"
                       >
-                        little
-                      </div>
-                    </div>
-                    <div
-                      class="rc-virtual-list"
-                      style="position:relative"
-                    >
-                      <div
-                        class="rc-virtual-list-holder"
-                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                      >
-                        <div>
-                          <div
-                            class="rc-virtual-list-holder-inner"
-                            style="display:flex;flex-direction:column"
-                          >
+                        <div
+                          class="rc-virtual-list-holder"
+                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                        >
+                          <div>
                             <div
-                              aria-selected="true"
-                              class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                              title="Bamboo"
+                              class="rc-virtual-list-holder-inner"
+                              style="display:flex;flex-direction:column"
                             >
                               <div
-                                class="ant-select-item-option-content"
+                                aria-selected="true"
+                                class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                title="Bamboo"
                               >
-                                Bamboo
-                              </div>
-                              <span
-                                aria-hidden="true"
-                                class="ant-select-item-option-state"
-                                style="user-select:none;-webkit-user-select:none"
-                                unselectable="on"
-                              >
-                                <span
-                                  aria-label="check"
-                                  class="anticon anticon-check"
-                                  role="img"
+                                <div
+                                  class="ant-select-item-option-content"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    data-icon="check"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="1em"
-                                    viewBox="64 64 896 896"
-                                    width="1em"
+                                  Bamboo
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select:none;-webkit-user-select:none"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="check"
+                                    class="anticon anticon-check"
+                                    role="img"
                                   >
-                                    <path
-                                      d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                                    />
-                                  </svg>
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="check"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                                      />
+                                    </svg>
+                                  </span>
                                 </span>
-                              </span>
-                            </div>
-                            <div
-                              aria-selected="false"
-                              class="ant-select-item ant-select-item-option"
-                              title="Little"
-                            >
-                              <div
-                                class="ant-select-item-option-content"
-                              >
-                                Little
                               </div>
-                            </div>
-                            <div
-                              aria-selected="false"
-                              class="ant-select-item ant-select-item-option"
-                              title="Light"
-                            >
                               <div
-                                class="ant-select-item-option-content"
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="Little"
                               >
-                                Light
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  Little
+                                </div>
+                              </div>
+                              <div
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="Light"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  Light
+                                </div>
                               </div>
                             </div>
                           </div>
@@ -1466,570 +1538,70 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
   id="control-hooks"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-hooks_note"
-        title="Note"
-      >
-        Note
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required"
+          for="control-hooks_note"
+          title="Note"
         >
-          <input
-            class="ant-input"
-            id="control-hooks_note"
-            type="text"
-            value=""
-          />
-        </div>
+          Note
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-hooks_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="control-hooks_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="control-hooks_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="control-hooks_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="control-hooks_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Select a option and change input text above
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="control-hooks_gender_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="male"
-                      aria-selected="false"
-                      id="control-hooks_gender_list_0"
-                      role="option"
-                    >
-                      male
-                    </div>
-                    <div
-                      aria-label="female"
-                      aria-selected="false"
-                      id="control-hooks_gender_list_1"
-                      role="option"
-                    >
-                      female
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="male"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              male
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="female"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              female
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="other"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              other
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-link"
-            type="button"
-          >
-            <span>
-              Fill form
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/control-ref.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="control-ref"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-ref_note"
-        title="Note"
-      >
-        Note
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="control-ref_note"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-ref_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="control-ref_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="control-ref_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="control-ref_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="control-ref_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Select a option and change input text above
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="control-ref_gender_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="male"
-                      aria-selected="false"
-                      id="control-ref_gender_list_0"
-                      role="option"
-                    >
-                      male
-                    </div>
-                    <div
-                      aria-label="female"
-                      aria-selected="false"
-                      id="control-ref_gender_list_1"
-                      role="option"
-                    >
-                      female
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="male"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              male
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="female"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              female
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="other"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              other
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-link"
-            type="button"
-          >
-            <span>
-              Fill form
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/customized-form-controls.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-inline"
-  id="customized_form_controls"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="customized_form_controls_price"
-        title="Price"
-      >
-        Price
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span>
             <input
               class="ant-input"
-              style="width:100px"
+              id="control-hooks_note"
               type="text"
-              value="0"
+              value=""
             />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="control-hooks_gender"
+          title="Gender"
+        >
+          Gender
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 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"
-              style="width:80px;margin:0 8px"
+              class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
                 class="ant-select-selector"
@@ -2038,13 +1610,14 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                   class="ant-select-selection-search"
                 >
                   <input
-                    aria-activedescendant="undefined_list_0"
+                    aria-activedescendant="control-hooks_gender_list_0"
                     aria-autocomplete="list"
-                    aria-controls="undefined_list"
+                    aria-controls="control-hooks_gender_list"
                     aria-haspopup="listbox"
-                    aria-owns="undefined_list"
+                    aria-owns="control-hooks_gender_list"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
+                    id="control-hooks_gender"
                     readonly=""
                     role="combobox"
                     style="opacity:0"
@@ -2054,10 +1627,9 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                   />
                 </span>
                 <span
-                  class="ant-select-selection-item"
-                  title="RMB"
+                  class="ant-select-selection-placeholder"
                 >
-                  RMB
+                  Select a option and change input text above
                 </span>
               </div>
               <div>
@@ -2067,25 +1639,25 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                 >
                   <div>
                     <div
-                      id="undefined_list"
+                      id="control-hooks_gender_list"
                       role="listbox"
                       style="height:0;width:0;overflow:hidden"
                     >
                       <div
-                        aria-label="RMB"
-                        aria-selected="true"
-                        id="undefined_list_0"
+                        aria-label="male"
+                        aria-selected="false"
+                        id="control-hooks_gender_list_0"
                         role="option"
                       >
-                        rmb
+                        male
                       </div>
                       <div
-                        aria-label="Dollar"
+                        aria-label="female"
                         aria-selected="false"
-                        id="undefined_list_1"
+                        id="control-hooks_gender_list_1"
                         role="option"
                       >
-                        dollar
+                        female
                       </div>
                     </div>
                     <div
@@ -2102,14 +1674,14 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                             style="display:flex;flex-direction:column"
                           >
                             <div
-                              aria-selected="true"
-                              class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                              title="RMB"
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="male"
                             >
                               <div
                                 class="ant-select-item-option-content"
                               >
-                                RMB
+                                male
                               </div>
                               <span
                                 aria-hidden="true"
@@ -2121,12 +1693,29 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                             <div
                               aria-selected="false"
                               class="ant-select-item ant-select-item-option"
-                              title="Dollar"
+                              title="female"
                             >
                               <div
                                 class="ant-select-item-option-content"
                               >
-                                Dollar
+                                female
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="other"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                other
                               </div>
                               <span
                                 aria-hidden="true"
@@ -2169,31 +1758,546 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
                 </span>
               </span>
             </div>
-          </span>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-link"
+              type="button"
+            >
+              <span>
+                Fill form
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/control-ref.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="control-ref"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="control-ref_note"
+          title="Note"
+        >
+          Note
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="control-ref_note"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="control-ref_gender"
+          title="Gender"
+        >
+          Gender
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="control-ref_gender_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="control-ref_gender_list"
+                    aria-haspopup="listbox"
+                    aria-owns="control-ref_gender_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="control-ref_gender"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Select a option and change input text above
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="control-ref_gender_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="male"
+                        aria-selected="false"
+                        id="control-ref_gender_list_0"
+                        role="option"
+                      >
+                        male
+                      </div>
+                      <div
+                        aria-label="female"
+                        aria-selected="false"
+                        id="control-ref_gender_list_1"
+                        role="option"
+                      >
+                        female
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="male"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                male
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="female"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                female
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="other"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                other
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-link"
+              type="button"
+            >
+              <span>
+                Fill form
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/customized-form-controls.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-inline"
+  id="customized_form_controls"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="customized_form_controls_price"
+          title="Price"
+        >
+          Price
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <span>
-              Submit
+              <input
+                class="ant-input"
+                style="width:100px"
+                type="text"
+                value="0"
+              />
+              <div
+                class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                style="width:80px;margin:0 8px"
+              >
+                <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-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-item"
+                    title="RMB"
+                  >
+                    RMB
+                  </span>
+                </div>
+                <div>
+                  <div
+                    class="ant-select-dropdown"
+                    style="opacity:0"
+                  >
+                    <div>
+                      <div
+                        id="undefined_list"
+                        role="listbox"
+                        style="height:0;width:0;overflow:hidden"
+                      >
+                        <div
+                          aria-label="RMB"
+                          aria-selected="true"
+                          id="undefined_list_0"
+                          role="option"
+                        >
+                          rmb
+                        </div>
+                        <div
+                          aria-label="Dollar"
+                          aria-selected="false"
+                          id="undefined_list_1"
+                          role="option"
+                        >
+                          dollar
+                        </div>
+                      </div>
+                      <div
+                        class="rc-virtual-list"
+                        style="position:relative"
+                      >
+                        <div
+                          class="rc-virtual-list-holder"
+                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                        >
+                          <div>
+                            <div
+                              class="rc-virtual-list-holder-inner"
+                              style="display:flex;flex-direction:column"
+                            >
+                              <div
+                                aria-selected="true"
+                                class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                title="RMB"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  RMB
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select:none;-webkit-user-select:none"
+                                  unselectable="on"
+                                />
+                              </div>
+                              <div
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="Dollar"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  Dollar
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select:none;-webkit-user-select:none"
+                                  unselectable="on"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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>
             </span>
-          </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -2208,4174 +2312,20 @@ exports[`renders ./components/form/demo/dep-debug.md extend context correctly 1`
 >
   0
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="debug_debug1"
-        title="debug1"
-      >
-        debug1
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="debug_debug1"
-            type="text"
-            value="debug1"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="debug_debug2"
-        title="debug2"
-      >
-        debug2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="debug_debug2"
-            type="text"
-            value="debug2"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/disabled.md extend context 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-disabled ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
-            >
-              <input
-                checked=""
-                class="ant-checkbox-input"
-                disabled=""
-                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>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="undefined_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="Demo"
-                      aria-selected="false"
-                      id="undefined_list_0"
-                      role="option"
-                    >
-                      demo
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Demo"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Demo
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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>
-            <div>
-              <div
-                class="ant-select-dropdown ant-tree-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div>
-                    <div
-                      class="ant-select-tree"
-                      role="tree"
-                    >
-                      <div>
-                        <input
-                          aria-label="for screen reader"
-                          disabled=""
-                          style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
-                          value=""
-                        />
-                      </div>
-                      <div
-                        aria-hidden="true"
-                        class="ant-select-tree-treenode"
-                        style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
-                      >
-                        <div
-                          class="ant-select-tree-indent"
-                        >
-                          <div
-                            class="ant-select-tree-indent-unit"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="ant-select-tree-list"
-                        style="position:relative"
-                      >
-                        <div
-                          class="ant-select-tree-list-holder"
-                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                        >
-                          <div>
-                            <div
-                              class="ant-select-tree-list-holder-inner"
-                              style="display:flex;flex-direction:column"
-                            >
-                              <div
-                                aria-grabbed="false"
-                                class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
-                                draggable="false"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-tree-indent"
-                                />
-                                <span
-                                  class="ant-select-tree-switcher ant-select-tree-switcher_close"
-                                >
-                                  <span
-                                    aria-label="caret-down"
-                                    class="anticon anticon-caret-down ant-select-tree-switcher-icon"
-                                    role="img"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      data-icon="caret-down"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height="1em"
-                                      viewBox="0 0 1024 1024"
-                                      width="1em"
-                                    >
-                                      <path
-                                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
-                                  title="Light"
-                                >
-                                  <span
-                                    class="ant-select-tree-title"
-                                  >
-                                    Light
-                                  </span>
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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>
-            <div>
-              <div
-                class="ant-select-dropdown ant-cascader-dropdown"
-                style="opacity:0;min-width:auto"
-              >
-                <div>
-                  <div
-                    class="ant-cascader-menus"
-                  >
-                    <ul
-                      class="ant-cascader-menu"
-                      role="menu"
-                    >
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                        data-path-key="zhejiang"
-                        role="menuitemcheckbox"
-                        title="Zhejiang"
-                      >
-                        <div
-                          class="ant-cascader-menu-item-content"
-                        >
-                          Zhejiang
-                        </div>
-                        <div
-                          class="ant-cascader-menu-item-expand-icon"
-                        >
-                          <span
-                            aria-label="right"
-                            class="anticon anticon-right"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="right"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                              />
-                            </svg>
-                          </span>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </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
-              class="ant-picker-dropdown"
-              style="opacity:0"
-            >
-              <div
-                class="ant-picker-panel-container"
-              >
-                <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
-                >
-                  <div
-                    class="ant-picker-date-panel"
-                  >
-                    <div
-                      class="ant-picker-header"
-                    >
-                      <button
-                        class="ant-picker-header-super-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-prev-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-prev-icon"
-                        />
-                      </button>
-                      <div
-                        class="ant-picker-header-view"
-                      >
-                        <button
-                          class="ant-picker-month-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          Nov
-                        </button>
-                        <button
-                          class="ant-picker-year-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          2016
-                        </button>
-                      </div>
-                      <button
-                        class="ant-picker-header-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-next-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-super-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-next-icon"
-                        />
-                      </button>
-                    </div>
-                    <div
-                      class="ant-picker-body"
-                    >
-                      <table
-                        class="ant-picker-content"
-                      >
-                        <thead>
-                          <tr>
-                            <th>
-                              Su
-                            </th>
-                            <th>
-                              Mo
-                            </th>
-                            <th>
-                              Tu
-                            </th>
-                            <th>
-                              We
-                            </th>
-                            <th>
-                              Th
-                            </th>
-                            <th>
-                              Fr
-                            </th>
-                            <th>
-                              Sa
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-10-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end"
-                              title="2016-10-31"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                31
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                              title="2016-11-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-11"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                11
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-12"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                12
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-13"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                13
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-14"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                14
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-15"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                15
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-16"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                16
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-17"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                17
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-18"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                18
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-19"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                19
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-20"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                20
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-21"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                21
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                              title="2016-11-22"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                22
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-23"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                23
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-24"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                24
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-25"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                25
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-26"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                26
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-27"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                27
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-28"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                28
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-29"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                29
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                              title="2016-11-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start"
-                              title="2016-12-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <a
-                      class="ant-picker-today-btn"
-                    >
-                      Today
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </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
-              class="ant-picker-dropdown ant-picker-dropdown-range"
-              style="opacity:0"
-            >
-              <div
-                class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-                style="min-width:0"
-              >
-                <div
-                  class="ant-picker-range-arrow"
-                  style="left:0"
-                />
-                <div
-                  class="ant-picker-panel-container"
-                  style="margin-left:0"
-                >
-                  <div
-                    class="ant-picker-panels"
-                  >
-                    <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="ant-picker-date-panel"
-                      >
-                        <div
-                          class="ant-picker-header"
-                        >
-                          <button
-                            class="ant-picker-header-super-prev-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-prev-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-prev-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-prev-icon"
-                            />
-                          </button>
-                          <div
-                            class="ant-picker-header-view"
-                          >
-                            <button
-                              class="ant-picker-month-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              Nov
-                            </button>
-                            <button
-                              class="ant-picker-year-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2016
-                            </button>
-                          </div>
-                          <button
-                            class="ant-picker-header-next-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-next-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-super-next-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-next-icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="ant-picker-body"
-                        >
-                          <table
-                            class="ant-picker-content"
-                          >
-                            <thead>
-                              <tr>
-                                <th>
-                                  Su
-                                </th>
-                                <th>
-                                  Mo
-                                </th>
-                                <th>
-                                  Tu
-                                </th>
-                                <th>
-                                  We
-                                </th>
-                                <th>
-                                  Th
-                                </th>
-                                <th>
-                                  Fr
-                                </th>
-                                <th>
-                                  Sa
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-10-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end"
-                                  title="2016-10-31"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    31
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                  title="2016-11-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-11"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    11
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-12"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    12
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-13"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    13
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-14"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    14
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-15"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    15
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-16"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    16
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-17"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    17
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-18"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    18
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-19"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    19
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-20"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    20
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-21"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    21
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                                  title="2016-11-22"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    22
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-23"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    23
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-24"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    24
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-25"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    25
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-26"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    26
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                  title="2016-11-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start"
-                                  title="2016-12-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="ant-picker-date-panel"
-                      >
-                        <div
-                          class="ant-picker-header"
-                        >
-                          <button
-                            class="ant-picker-header-super-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-prev-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-prev-icon"
-                            />
-                          </button>
-                          <div
-                            class="ant-picker-header-view"
-                          >
-                            <button
-                              class="ant-picker-month-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              Dec
-                            </button>
-                            <button
-                              class="ant-picker-year-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2016
-                            </button>
-                          </div>
-                          <button
-                            class="ant-picker-header-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-next-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-super-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-next-icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="ant-picker-body"
-                        >
-                          <table
-                            class="ant-picker-content"
-                          >
-                            <thead>
-                              <tr>
-                                <th>
-                                  Su
-                                </th>
-                                <th>
-                                  Mo
-                                </th>
-                                <th>
-                                  Tu
-                                </th>
-                                <th>
-                                  We
-                                </th>
-                                <th>
-                                  Th
-                                </th>
-                                <th>
-                                  Fr
-                                </th>
-                                <th>
-                                  Sa
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end"
-                                  title="2016-11-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                  title="2016-12-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-11"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    11
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-12"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    12
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-13"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    13
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-14"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    14
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-15"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    15
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-16"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    16
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-17"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    17
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-18"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    18
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-19"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    19
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-20"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    20
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-21"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    21
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-22"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    22
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-23"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    23
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-24"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    24
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-25"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    25
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-26"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    26
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                  title="2016-12-31"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    31
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start"
-                                  title="2017-01-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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="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="Upload"
-      >
-        Upload
-      </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"
-        >
-          <span
-            class="ant-upload-picture-card-wrapper"
-          >
-            <div
-              class="ant-upload-list ant-upload-list-picture-card"
-            >
-              <div
-                class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
-              >
-                <span
-                  class="ant-upload ant-upload-disabled"
-                  role="button"
-                >
-                  <input
-                    accept=""
-                    style="display:none"
-                    type="file"
-                  />
-                  <div>
-                    <span
-                      aria-label="plus"
-                      class="anticon anticon-plus"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="plus"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <defs />
-                        <path
-                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                        />
-                        <path
-                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                    <div
-                      style="margin-top:8px"
-                    >
-                      Upload
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-          </span>
-        </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 extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal0"
-      >
-        Normal0
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail0"
-      >
-        Fail0
-      </label>
-    </div>
-    <div
-      class="ant-col 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-status-error"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled0"
-      >
-        FailDisabled0
-      </label>
-    </div>
-    <div
-      class="ant-col 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 ant-input-status-error"
-            disabled=""
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal1"
-      >
-        Normal1
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail1"
-      >
-        Fail1
-      </label>
-    </div>
-    <div
-      class="ant-col 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-status-error"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled1"
-      >
-        FailDisabled1
-      </label>
-    </div>
-    <div
-      class="ant-col 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 ant-input-status-error"
-            disabled=""
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal2"
-      >
-        Normal2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input"
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail2"
-      >
-        Fail2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input ant-input-status-error"
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled2"
-      >
-        FailDisabled2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input ant-input-disabled ant-input-status-error"
-                disabled=""
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal3"
-      >
-        Normal3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input"
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail3"
-      >
-        Fail3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input"
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled3"
-      >
-        FailDisabled3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-disabled ant-input-affix-wrapper-status-error"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input ant-input-disabled"
-              disabled=""
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-item.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-dashed"
-            style="width:60%"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-dashed"
-            style="width:60%;margin-top:20px"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field at head
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items.md extend context correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-dashed ant-btn-block"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend context correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="dynamic_form_nest_item_area"
-        title="Area"
-      >
-        Area
-      </label>
-    </div>
-    <div
-      class="ant-col 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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="dynamic_form_nest_item_area_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="dynamic_form_nest_item_area_list"
-                  aria-haspopup="listbox"
-                  aria-owns="dynamic_form_nest_item_area_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="dynamic_form_nest_item_area"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="dynamic_form_nest_item_area_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="Beijing"
-                      aria-selected="false"
-                      id="dynamic_form_nest_item_area_list_0"
-                      role="option"
-                    >
-                      Beijing
-                    </div>
-                    <div
-                      aria-label="Shanghai"
-                      aria-selected="false"
-                      id="dynamic_form_nest_item_area_list_1"
-                      role="option"
-                    >
-                      Shanghai
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Beijing"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Beijing
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Shanghai"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Shanghai
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-dashed ant-btn-block"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add sights
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items-no-style.md extend context correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Users"
-      >
-        Users
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-row ant-form-item"
-          >
-            <div
-              class="ant-col 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-dashed ant-btn-block"
-                    type="button"
-                  >
-                    <span
-                      aria-label="plus"
-                      class="anticon anticon-plus"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="plus"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <defs />
-                        <path
-                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                        />
-                        <path
-                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                    <span>
-                      Add field
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="dynamic_rule"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="dynamic_rule_username"
-        title="Name"
-      >
-        Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-8 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="dynamic_rule_username"
-            placeholder="Please input your name"
-            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=""
-        for="dynamic_rule_nickname"
-        title="Nickname"
-      >
-        Nickname
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-8 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="dynamic_rule_nickname"
-            placeholder="Please input your nickname"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-col-offset-4 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-in-form-item"
-          >
-            <span
-              class="ant-checkbox"
-            >
-              <input
-                class="ant-checkbox-input"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Nickname is required
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-col-offset-4 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-primary"
-            type="button"
-          >
-            <span>
-              Check
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/form-context.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="basicForm"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basicForm_group"
-        title="Group Name"
-      >
-        Group Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="basicForm_group"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="User List"
-      >
-        User List
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-typography ant-typography-secondary ant-form-text"
-          >
-            ( 
-            <span
-              aria-label="smile"
-              class="anticon anticon-smile"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="smile"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-                />
-              </svg>
-            </span>
-             No user yet. )
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            style="margin:0 8px"
-            type="button"
-          >
-            <span>
-              Add User
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/form-in-modal.md extend context correctly 1`] = `
-<div>
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      New Collection
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/form/demo/global-state.md extend context correctly 1`] = `
-Array [
-  <form
-    class="ant-form ant-form-inline"
-    id="global_state"
-  >
-    <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
         class="ant-col ant-form-item-label"
       >
         <label
-          class="ant-form-item-required"
-          for="global_state_username"
-          title="Username"
+          class=""
+          for="debug_debug1"
+          title="debug1"
         >
-          Username
+          debug1
         </label>
       </div>
       <div
@@ -6389,397 +2339,104 @@ Array [
           >
             <input
               class="ant-input"
-              id="global_state_username"
+              id="debug_debug1"
               type="text"
-              value=""
+              value="debug1"
             />
           </div>
         </div>
       </div>
     </div>
-  </form>,
-  <pre
-    class="language-bash"
-  >
-    [
-  {
-    "name": [
-      "username"
-    ],
-    "value": "Ant Design"
-  }
-]
-  </pre>,
-]
-`;
-
-exports[`renders ./components/form/demo/inline-login.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-inline"
-  id="horizontal_login"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="user"
-                class="anticon anticon-user site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="horizontal_login_username"
-              placeholder="Username"
-              type="text"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          for="debug_debug2"
+          title="debug2"
         >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="lock"
-                class="anticon anticon-lock site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="lock"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="horizontal_login_password"
-              placeholder="Password"
-              type="password"
-              value=""
-            />
-          </span>
-        </div>
+          debug2
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Log in
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/label-debug.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="label-ellipsis"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="label-ellipsis_username"
-        title=""
-      >
-        <span
-          aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
-          class="ant-typography ant-typography-ellipsis ant-typography-single-line"
-        >
-          longtextlongtextlongtextlongtextlongtextlongtextlongtext
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
-          >
-            lg
-          </span>
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ...
-            </span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="label-ellipsis_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="label-ellipsis_password"
-        title=""
-      >
-        <span
-          aria-label="longtext longtext longtext longtext longtext longtext longtext"
-          class="ant-typography ant-typography-ellipsis ant-typography-single-line"
-        >
-          longtext longtext longtext longtext longtext longtext longtext
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
-          >
-            lg
-          </span>
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ...
-            </span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="label-ellipsis_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/layout.md extend context 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="layout"
-        title="Form Layout"
-      >
-        Form Layout
-      </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"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-radio-group ant-radio-group-outline"
-            id="layout"
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="debug_debug2"
+              type="text"
+              value="debug2"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/disabled.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
             >
               <span
-                class="ant-radio-button ant-radio-button-checked"
+                class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
               >
                 <input
                   checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="horizontal"
+                  class="ant-checkbox-input"
+                  disabled=""
+                  id="disabled"
+                  type="checkbox"
                 />
                 <span
-                  class="ant-radio-button-inner"
+                  class="ant-checkbox-inner"
                 />
               </span>
               <span>
-                Horizontal
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="vertical"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Vertical
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="inline"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Inline
+                disabled
               </span>
             </label>
           </div>
@@ -6788,3595 +2445,237 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Field A"
-      >
-        Field A
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="Radio"
         >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
+          Radio
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Field B"
-      >
-        Field B
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-14 ant-col-offset-4 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-primary"
-            type="button"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/layout-can-wrap.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="wrap"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-no-colon"
-        for="wrap_username"
-        title="正常标签文案"
-      >
-        正常标签文案
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="wrap_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-no-colon"
-        for="wrap_password"
-        title="超长标签文案超长标签文案"
-      >
-        超长标签文案超长标签文案
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="wrap_password"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-no-colon"
-        title=" "
-      >
-         
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/nest-messages.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="nest-messages"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="nest-messages_user_name"
-        title="Name"
-      >
-        Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_name"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_email"
-        title="Email"
-      >
-        Email
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_email"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_age"
-        title="Age"
-      >
-        Age
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-input-number-handler-wrap"
+              class="ant-radio-group ant-radio-group-outline"
             >
-              <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
               >
                 <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"
-                id="nest-messages_user_age"
-                role="spinbutton"
-                step="1"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_website"
-        title="Website"
-      >
-        Website
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_website"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_introduction"
-        title="Introduction"
-      >
-        Introduction
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <textarea
-            class="ant-input"
-            id="nest-messages_user_introduction"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/normal-login.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal login-form"
-  id="normal_login"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="user"
-                class="anticon anticon-user site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="normal_login_username"
-              placeholder="Username"
-              type="text"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="lock"
-                class="anticon anticon-lock site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="lock"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="normal_login_password"
-              placeholder="Password"
-              type="password"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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="normal_login_remember"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Remember me
-            </span>
-          </label>
-          <a
-            class="login-form-forgot"
-            href=""
-          >
-            Forgot password
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary login-form-button"
-            type="submit"
-          >
-            <span>
-              Log in
-            </span>
-          </button>
-          Or 
-          <a
-            href=""
-          >
-            register now!
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="test"
-        title="test"
-      >
-        test
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="test"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="list_0"
-            type="text"
-            value="light"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Focus Form.Item
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Focus Form.List
-    </span>
-  </button>
-</form>
-`;
-
-exports[`renders ./components/form/demo/register.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="register"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_email"
-        title="E-mail"
-      >
-        E-mail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="register_email"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="register_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_confirm"
-        title="Confirm Password"
-      >
-        Confirm Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="register_confirm"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_nickname"
-        title="Nickname"
-      >
-        Nickname
-        <span
-          aria-label="question-circle"
-          class="anticon anticon-question-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="question-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-            />
-          </svg>
-        </span>
-        <div>
-          <div
-            class="ant-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                What do you want others to call you?
-              </div>
-            </div>
-          </div>
-        </div>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="register_nickname"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_residence"
-        title="Habitual Residence"
-      >
-        Habitual Residence
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="register_residence_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_residence_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="register_residence"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="Zhejiang / Hangzhou / West Lake"
-              >
-                Zhejiang / Hangzhou / West Lake
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-cascader-dropdown"
-                style="opacity:0;min-width:auto"
-              >
-                <div>
-                  <div
-                    class="ant-cascader-menus"
-                  >
-                    <ul
-                      class="ant-cascader-menu"
-                      role="menu"
-                    >
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                        data-path-key="zhejiang"
-                        role="menuitemcheckbox"
-                        title="Zhejiang"
-                      >
-                        <div
-                          class="ant-cascader-menu-item-content"
-                        >
-                          Zhejiang
-                        </div>
-                        <div
-                          class="ant-cascader-menu-item-expand-icon"
-                        >
-                          <span
-                            aria-label="right"
-                            class="anticon anticon-right"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="right"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                              />
-                            </svg>
-                          </span>
-                        </div>
-                      </li>
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                        data-path-key="jiangsu"
-                        role="menuitemcheckbox"
-                        title="Jiangsu"
-                      >
-                        <div
-                          class="ant-cascader-menu-item-content"
-                        >
-                          Jiangsu
-                        </div>
-                        <div
-                          class="ant-cascader-menu-item-expand-icon"
-                        >
-                          <span
-                            aria-label="right"
-                            class="anticon anticon-right"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="right"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                              />
-                            </svg>
-                          </span>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </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>
-            <span
-              aria-hidden="true"
-              class="ant-select-clear"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
-            >
-              <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_phone"
-        title="Phone Number"
-      >
-        Phone Number
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper"
-            style="width:100%"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
-                  style="width:70px"
-                >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="register_prefix_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="register_prefix_list"
-                        aria-haspopup="listbox"
-                        aria-owns="register_prefix_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="register_prefix"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="+86"
-                    >
-                      +86
-                    </span>
-                  </div>
-                  <div>
-                    <div
-                      class="ant-select-dropdown"
-                      style="opacity:0"
-                    >
-                      <div>
-                        <div
-                          id="register_prefix_list"
-                          role="listbox"
-                          style="height:0;width:0;overflow:hidden"
-                        >
-                          <div
-                            aria-label="+86"
-                            aria-selected="true"
-                            id="register_prefix_list_0"
-                            role="option"
-                          >
-                            86
-                          </div>
-                          <div
-                            aria-label="+87"
-                            aria-selected="false"
-                            id="register_prefix_list_1"
-                            role="option"
-                          >
-                            87
-                          </div>
-                        </div>
-                        <div
-                          class="rc-virtual-list"
-                          style="position:relative"
-                        >
-                          <div
-                            class="rc-virtual-list-holder"
-                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                          >
-                            <div>
-                              <div
-                                class="rc-virtual-list-holder-inner"
-                                style="display:flex;flex-direction:column"
-                              >
-                                <div
-                                  aria-selected="true"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                                  title="+86"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    +86
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option"
-                                  title="+87"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    +87
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </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>
-              </span>
-              <input
-                class="ant-input"
-                id="register_phone"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_donation"
-        title="Donation"
-      >
-        Donation
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-number-group-wrapper"
-            style="width:100%"
-          >
-            <div
-              class="ant-input-number-wrapper ant-input-number-group"
-            >
-              <div
-                class="ant-input-number ant-input-number-in-form-item"
-              >
-                <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"
+                  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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-input-number-input"
-                    id="register_donation"
-                    role="spinbutton"
-                    step="1"
+                    class="ant-select-selection-search-input"
+                    disabled=""
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
                     value=""
                   />
-                </div>
-              </div>
-              <div
-                class="ant-input-number-group-addon"
-              >
-                <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
-                  style="width:70px"
-                >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="register_suffix_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="register_suffix_list"
-                        aria-haspopup="listbox"
-                        aria-owns="register_suffix_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="register_suffix"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-placeholder"
-                    />
-                  </div>
-                  <div>
-                    <div
-                      class="ant-select-dropdown"
-                      style="opacity:0"
-                    >
-                      <div>
-                        <div
-                          id="register_suffix_list"
-                          role="listbox"
-                          style="height:0;width:0;overflow:hidden"
-                        >
-                          <div
-                            aria-label="$"
-                            aria-selected="false"
-                            id="register_suffix_list_0"
-                            role="option"
-                          >
-                            USD
-                          </div>
-                          <div
-                            aria-label="¥"
-                            aria-selected="false"
-                            id="register_suffix_list_1"
-                            role="option"
-                          >
-                            CNY
-                          </div>
-                        </div>
-                        <div
-                          class="rc-virtual-list"
-                          style="position:relative"
-                        >
-                          <div
-                            class="rc-virtual-list-holder"
-                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                          >
-                            <div>
-                              <div
-                                class="rc-virtual-list-holder-inner"
-                                style="display:flex;flex-direction:column"
-                              >
-                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                  title="$"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    $
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option"
-                                  title="¥"
-                                >
-                                  <div
-                                    class="ant-select-item-option-content"
-                                  >
-                                    ¥
-                                  </div>
-                                  <span
-                                    aria-hidden="true"
-                                    class="ant-select-item-option-state"
-                                    style="user-select:none;-webkit-user-select:none"
-                                    unselectable="on"
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </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>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_website"
-        title="Website"
-      >
-        Website
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="register_website_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="register_website_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_website_list"
-                  autocomplete="off"
-                  class="ant-input ant-select-selection-search-input"
-                  id="register_website"
-                  role="combobox"
-                  type="search"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                website
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    class="ant-select-item-empty"
-                    id="register_website_list"
-                    role="listbox"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_intro"
-        title="Intro"
-      >
-        Intro
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
-            data-count="0 / 100"
-          >
-            <textarea
-              class="ant-input"
-              id="register_intro"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="register_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="register_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="register_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                select your gender
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="register_gender_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="Male"
-                      aria-selected="false"
-                      id="register_gender_list_0"
-                      role="option"
-                    >
-                      male
-                    </div>
-                    <div
-                      aria-label="Female"
-                      aria-selected="false"
-                      id="register_gender_list_1"
-                      role="option"
-                    >
-                      female
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Male"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Male
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Female"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Female
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Other"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Other
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="Captcha"
-      >
-        Captcha
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-row"
-            style="margin-left:-4px;margin-right:-4px"
-          >
-            <div
-              class="ant-col ant-col-12"
-              style="padding-left:4px;padding-right:4px"
-            >
-              <input
-                class="ant-input"
-                id="register_captcha"
-                type="text"
-                value=""
-              />
-            </div>
-            <div
-              class="ant-col ant-col-12"
-              style="padding-left:4px;padding-right:4px"
-            >
-              <button
-                class="ant-btn ant-btn-default"
-                type="button"
-              >
-                <span>
-                  Get captcha
                 </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-extra"
-      >
-        We must make sure that your are a human.
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox"
-            >
-              <input
-                class="ant-checkbox-input"
-                id="register_agreement"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              I have read the 
-              <a
-                href=""
-              >
-                agreement
-              </a>
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Register
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/required-mark.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-vertical"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required-mark-optional"
-        for="requiredMarkValue"
-        title="Required Mark"
-      >
-        Required Mark
-        <span
-          class="ant-form-item-optional"
-          title=""
-        >
-          (optional)
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col 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"
-            id="requiredMarkValue"
-          >
-            <label
-              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"
-              >
-                <input
-                  checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="optional"
-                />
                 <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Optional
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="true"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Required
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="false"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Hidden
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-required-mark-optional"
-        title="Field A"
-      >
-        Field A
-        <span
-          aria-label="question-circle"
-          class="anticon anticon-question-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="question-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-            />
-          </svg>
-        </span>
-        <div>
-          <div
-            class="ant-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
+                  class="ant-select-selection-placeholder"
                 />
               </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                This is a required field
-              </div>
-            </div>
-          </div>
-        </div>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required-mark-optional"
-        title="Field B"
-      >
-        Field B
-        <span
-          aria-label="info-circle"
-          class="anticon anticon-info-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="info-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-            />
-          </svg>
-        </span>
-        <div>
-          <div
-            class="ant-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                Tooltip with customize icon
-              </div>
-            </div>
-          </div>
-        </div>
-        <span
-          class="ant-form-item-optional"
-          title=""
-        >
-          (optional)
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="button"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal ant-form-default"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="size"
-        title="Form Size"
-      >
-        Form Size
-      </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 ant-radio-group-default"
-            id="size"
-          >
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="small"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Small
-              </span>
-            </label>
-            <label
-              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"
-              >
-                <input
-                  checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="default"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Default
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="large"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Large
-              </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"
-            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"
-          >
-            <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-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
+              <div>
+                <div
+                  class="ant-select-dropdown"
                   style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="undefined_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="Demo"
-                      aria-selected="false"
-                      id="undefined_list_0"
-                      role="option"
-                    >
-                      demo
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Demo"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Demo
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-tree-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
                   <div>
                     <div
-                      class="ant-select-tree"
-                      role="tree"
+                      id="undefined_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
                     >
-                      <div>
-                        <input
-                          aria-label="for screen reader"
-                          disabled=""
-                          style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
-                          value=""
-                        />
-                      </div>
                       <div
-                        aria-hidden="true"
-                        class="ant-select-tree-treenode"
-                        style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                        aria-label="Demo"
+                        aria-selected="false"
+                        id="undefined_list_0"
+                        role="option"
                       >
-                        <div
-                          class="ant-select-tree-indent"
-                        >
-                          <div
-                            class="ant-select-tree-indent-unit"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="ant-select-tree-list"
-                        style="position:relative"
-                      >
-                        <div
-                          class="ant-select-tree-list-holder"
-                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                        >
-                          <div>
-                            <div
-                              class="ant-select-tree-list-holder-inner"
-                              style="display:flex;flex-direction:column"
-                            >
-                              <div
-                                aria-grabbed="false"
-                                class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
-                                draggable="false"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-tree-indent"
-                                />
-                                <span
-                                  class="ant-select-tree-switcher ant-select-tree-switcher_close"
-                                >
-                                  <span
-                                    aria-label="caret-down"
-                                    class="anticon anticon-caret-down ant-select-tree-switcher-icon"
-                                    role="img"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      data-icon="caret-down"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height="1em"
-                                      viewBox="0 0 1024 1024"
-                                      width="1em"
-                                    >
-                                      <path
-                                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
-                                  title="Light"
-                                >
-                                  <span
-                                    class="ant-select-tree-title"
-                                  >
-                                    Light
-                                  </span>
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
+                        demo
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              />
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-cascader-dropdown"
-                style="opacity:0;min-width:auto"
-              >
-                <div>
-                  <div
-                    class="ant-cascader-menus"
-                  >
-                    <ul
-                      class="ant-cascader-menu"
-                      role="menu"
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
                     >
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                        data-path-key="zhejiang"
-                        role="menuitemcheckbox"
-                        title="Zhejiang"
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
                       >
-                        <div
-                          class="ant-cascader-menu-item-content"
-                        >
-                          Zhejiang
-                        </div>
-                        <div
-                          class="ant-cascader-menu-item-expand-icon"
-                        >
-                          <span
-                            aria-label="right"
-                            class="anticon anticon-right"
-                            role="img"
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
                           >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="right"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Demo"
                             >
-                              <path
-                                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Demo
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
                               />
-                            </svg>
-                          </span>
+                            </div>
+                          </div>
                         </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </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-default"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                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
-              class="ant-picker-dropdown"
-              style="opacity:0"
-            >
-              <div
-                class="ant-picker-panel-container"
-              >
-                <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
-                >
-                  <div
-                    class="ant-picker-date-panel"
-                  >
-                    <div
-                      class="ant-picker-header"
-                    >
-                      <button
-                        class="ant-picker-header-super-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-prev-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-prev-icon"
-                        />
-                      </button>
-                      <div
-                        class="ant-picker-header-view"
-                      >
-                        <button
-                          class="ant-picker-month-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          Nov
-                        </button>
-                        <button
-                          class="ant-picker-year-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          2016
-                        </button>
                       </div>
-                      <button
-                        class="ant-picker-header-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-next-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-super-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-next-icon"
-                        />
-                      </button>
                     </div>
-                    <div
-                      class="ant-picker-body"
-                    >
-                      <table
-                        class="ant-picker-content"
-                      >
-                        <thead>
-                          <tr>
-                            <th>
-                              Su
-                            </th>
-                            <th>
-                              Mo
-                            </th>
-                            <th>
-                              Tu
-                            </th>
-                            <th>
-                              We
-                            </th>
-                            <th>
-                              Th
-                            </th>
-                            <th>
-                              Fr
-                            </th>
-                            <th>
-                              Sa
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-10-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end"
-                              title="2016-10-31"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                31
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                              title="2016-11-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-11"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                11
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-12"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                12
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-13"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                13
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-14"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                14
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-15"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                15
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-16"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                16
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-17"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                17
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-18"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                18
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-19"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                19
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-20"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                20
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-21"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                21
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                              title="2016-11-22"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                22
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-23"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                23
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-24"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                24
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-25"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                25
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-26"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                26
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-27"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                27
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-28"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                28
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-29"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                29
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                              title="2016-11-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start"
-                              title="2016-12-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <a
-                      class="ant-picker-today-btn"
-                    >
-                      Today
-                    </a>
                   </div>
                 </div>
               </div>
-            </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="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"
-          >
-            <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"
+                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-input-number-handler-down-inner"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
@@ -10395,773 +2694,177 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
                 </span>
               </span>
             </div>
-            <div
-              class="ant-input-number-input-wrap"
-            >
-              <input
-                autocomplete="off"
-                class="ant-input-number-input"
-                role="spinbutton"
-                step="1"
-                value=""
-              />
-            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="TreeSelect"
         >
-          <button
-            aria-checked="false"
-            class="ant-switch"
-            role="switch"
-            type="button"
-          >
-            <div
-              class="ant-switch-handle"
-            />
-            <span
-              class="ant-switch-inner"
-            />
-          </button>
-        </div>
+          TreeSelect
+        </label>
       </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"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Button
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/time-related-controls.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="time_related_controls"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_date-picker"
-        title="DatePicker"
-      >
-        DatePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_date-picker"
-                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
-              class="ant-picker-dropdown"
-              style="opacity:0"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
             >
               <div
-                class="ant-picker-panel-container"
+                class="ant-select-selector"
               >
-                <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                <span
+                  class="ant-select-selection-search"
                 >
-                  <div
-                    class="ant-picker-date-panel"
-                  >
-                    <div
-                      class="ant-picker-header"
-                    >
-                      <button
-                        class="ant-picker-header-super-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-prev-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-prev-icon"
-                        />
-                      </button>
+                  <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>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-tree-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div>
                       <div
-                        class="ant-picker-header-view"
+                        class="ant-select-tree"
+                        role="tree"
                       >
-                        <button
-                          class="ant-picker-month-btn"
-                          tabindex="-1"
-                          type="button"
+                        <div>
+                          <input
+                            aria-label="for screen reader"
+                            disabled=""
+                            style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          aria-hidden="true"
+                          class="ant-select-tree-treenode"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
                         >
-                          Nov
-                        </button>
-                        <button
-                          class="ant-picker-year-btn"
-                          tabindex="-1"
-                          type="button"
+                          <div
+                            class="ant-select-tree-indent"
+                          >
+                            <div
+                              class="ant-select-tree-indent-unit"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="ant-select-tree-list"
+                          style="position:relative"
                         >
-                          2016
-                        </button>
+                          <div
+                            class="ant-select-tree-list-holder"
+                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                          >
+                            <div>
+                              <div
+                                class="ant-select-tree-list-holder-inner"
+                                style="display:flex;flex-direction:column"
+                              >
+                                <div
+                                  aria-grabbed="false"
+                                  class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                                  draggable="false"
+                                >
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-tree-indent"
+                                  />
+                                  <span
+                                    class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                                  >
+                                    <span
+                                      aria-label="caret-down"
+                                      class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                                      role="img"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        data-icon="caret-down"
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height="1em"
+                                        viewBox="0 0 1024 1024"
+                                        width="1em"
+                                      >
+                                        <path
+                                          d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </span>
+                                  <span
+                                    class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                                    title="Light"
+                                  >
+                                    <span
+                                      class="ant-select-tree-title"
+                                    >
+                                      Light
+                                    </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
-                      <button
-                        class="ant-picker-header-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-next-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-super-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-next-icon"
-                        />
-                      </button>
                     </div>
-                    <div
-                      class="ant-picker-body"
-                    >
-                      <table
-                        class="ant-picker-content"
-                      >
-                        <thead>
-                          <tr>
-                            <th>
-                              Su
-                            </th>
-                            <th>
-                              Mo
-                            </th>
-                            <th>
-                              Tu
-                            </th>
-                            <th>
-                              We
-                            </th>
-                            <th>
-                              Th
-                            </th>
-                            <th>
-                              Fr
-                            </th>
-                            <th>
-                              Sa
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-10-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end"
-                              title="2016-10-31"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                31
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                              title="2016-11-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-11"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                11
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-12"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                12
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-13"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                13
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-14"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                14
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-15"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                15
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-16"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                16
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-17"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                17
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-18"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                18
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-19"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                19
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-20"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                20
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-21"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                21
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                              title="2016-11-22"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                22
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-23"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                23
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-24"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                24
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-25"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                25
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-26"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                26
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-27"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                27
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-28"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                28
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-29"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                29
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                              title="2016-11-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start"
-                              title="2016-12-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <a
-                      class="ant-picker-today-btn"
-                    >
-                      Today
-                    </a>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_date-time-picker"
-        title="DatePicker[showTime]"
-      >
-        DatePicker[showTime]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_date-time-picker"
-                placeholder="Select date"
-                readonly=""
-                size="21"
-                title=""
-                value=""
-              />
               <span
-                class="ant-picker-suffix"
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
               >
                 <span
-                  aria-label="calendar"
-                  class="anticon anticon-calendar"
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="calendar"
+                    data-icon="down"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -11169,27 +2872,234 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                     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"
+                      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>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-picker-dropdown"
-              style="opacity:0"
+              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-picker-panel-container"
+                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>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-cascader-dropdown"
+                  style="opacity:0;min-width:auto"
+                >
+                  <div>
+                    <div
+                      class="ant-cascader-menus"
+                    >
+                      <ul
+                        class="ant-cascader-menu"
+                        role="menu"
+                      >
+                        <li
+                          aria-checked="false"
+                          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                          data-path-key="zhejiang"
+                          role="menuitemcheckbox"
+                          title="Zhejiang"
+                        >
+                          <div
+                            class="ant-cascader-menu-item-content"
+                          >
+                            Zhejiang
+                          </div>
+                          <div
+                            class="ant-cascader-menu-item-expand-icon"
+                          >
+                            <span
+                              aria-label="right"
+                              class="anticon anticon-right"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="right"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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
+                class="ant-picker-dropdown"
+                style="opacity:0"
               >
                 <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                  class="ant-picker-panel-container"
                 >
                   <div
-                    class="ant-picker-datetime-panel"
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
                   >
                     <div
                       class="ant-picker-date-panel"
@@ -11721,1364 +3631,15 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                       </div>
                     </div>
                     <div
-                      class="ant-picker-time-panel"
+                      class="ant-picker-footer"
                     >
-                      <div
-                        class="ant-picker-header"
+                      <a
+                        class="ant-picker-today-btn"
                       >
-                        <div
-                          class="ant-picker-header-view"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div
-                        class="ant-picker-content"
-                      >
-                        <ul
-                          class="ant-picker-time-panel-column"
-                          style="position:relative"
-                        >
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              00
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              01
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              02
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              03
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              04
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              05
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              06
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              07
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              08
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              09
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              10
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              11
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              12
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              13
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              14
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              15
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              16
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              17
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              18
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              19
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              20
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              21
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              22
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              23
-                            </div>
-                          </li>
-                        </ul>
-                        <ul
-                          class="ant-picker-time-panel-column"
-                          style="position:relative"
-                        >
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              00
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              01
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              02
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              03
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              04
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              05
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              06
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              07
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              08
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              09
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              10
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              11
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              12
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              13
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              14
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              15
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              16
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              17
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              18
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              19
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              20
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              21
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              22
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              23
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              24
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              25
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              26
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              27
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              28
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              29
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              30
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              31
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              32
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              33
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              34
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              35
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              36
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              37
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              38
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              39
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              40
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              41
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              42
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              43
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              44
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              45
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              46
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              47
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              48
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              49
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              50
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              51
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              52
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              53
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              54
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              55
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              56
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              57
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              58
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              59
-                            </div>
-                          </li>
-                        </ul>
-                        <ul
-                          class="ant-picker-time-panel-column"
-                          style="position:relative"
-                        >
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              00
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              01
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              02
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              03
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              04
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              05
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              06
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              07
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              08
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              09
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              10
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              11
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              12
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              13
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              14
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              15
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              16
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              17
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              18
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              19
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              20
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              21
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              22
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              23
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              24
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              25
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              26
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              27
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              28
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              29
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              30
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              31
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              32
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              33
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              34
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              35
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              36
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              37
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              38
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              39
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              40
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              41
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              42
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              43
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              44
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              45
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              46
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              47
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              48
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              49
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              50
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              51
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              52
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              53
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              54
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              55
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              56
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              57
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              58
-                            </div>
-                          </li>
-                          <li
-                            class="ant-picker-time-panel-cell"
-                          >
-                            <div
-                              class="ant-picker-time-panel-cell-inner"
-                            >
-                              59
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
+                        Today
+                      </a>
                     </div>
                   </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <ul
-                      class="ant-picker-ranges"
-                    >
-                      <li
-                        class="ant-picker-now"
-                      >
-                        <a
-                          class="ant-picker-now-btn"
-                        >
-                          Now
-                        </a>
-                      </li>
-                      <li
-                        class="ant-picker-ok"
-                      >
-                        <button
-                          class="ant-btn ant-btn-primary ant-btn-sm"
-                          disabled=""
-                          type="button"
-                        >
-                          <span>
-                            OK
-                          </span>
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
                 </div>
               </div>
             </div>
@@ -13088,42 +3649,88 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_month-picker"
-        title="MonthPicker"
-      >
-        MonthPicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
+              class="ant-picker ant-picker-range ant-picker-disabled"
             >
-              <input
-                autocomplete="off"
-                id="time_related_controls_month-picker"
-                placeholder="Select month"
-                readonly=""
-                size="12"
-                title=""
-                value=""
+              <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"
@@ -13149,1538 +3756,29 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 </span>
               </span>
             </div>
-          </div>
-          <div>
-            <div
-              class="ant-picker-dropdown"
-              style="opacity:0"
-            >
+            <div>
               <div
-                class="ant-picker-panel-container"
+                class="ant-picker-dropdown ant-picker-dropdown-range"
+                style="opacity:0"
               >
                 <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                  class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+                  style="min-width:0"
                 >
                   <div
-                    class="ant-picker-month-panel"
-                  >
-                    <div
-                      class="ant-picker-header"
-                    >
-                      <button
-                        class="ant-picker-header-super-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-prev-icon"
-                        />
-                      </button>
-                      <div
-                        class="ant-picker-header-view"
-                      >
-                        <button
-                          class="ant-picker-year-btn"
-                          type="button"
-                        >
-                          2016
-                        </button>
-                      </div>
-                      <button
-                        class="ant-picker-header-super-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-next-icon"
-                        />
-                      </button>
-                    </div>
-                    <div
-                      class="ant-picker-body"
-                    >
-                      <table
-                        class="ant-picker-content"
-                      >
-                        <tbody>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Jan
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Feb
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Mar
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Apr
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                May
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Jun
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Jul
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Aug
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Sep
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Oct
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Nov
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-12"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                Dec
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_range-picker"
-        title="RangePicker"
-      >
-        RangePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_range-picker"
-                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"
-                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"
+                    class="ant-picker-range-arrow"
+                    style="left:0"
                   />
-                </svg>
-              </span>
-            </span>
-          </div>
-          <div>
-            <div
-              class="ant-picker-dropdown ant-picker-dropdown-range"
-              style="opacity:0"
-            >
-              <div
-                class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-                style="min-width:0"
-              >
-                <div
-                  class="ant-picker-range-arrow"
-                  style="left:0"
-                />
-                <div
-                  class="ant-picker-panel-container"
-                  style="margin-left:0"
-                >
                   <div
-                    class="ant-picker-panels"
+                    class="ant-picker-panel-container"
+                    style="margin-left:0"
                   >
                     <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
+                      class="ant-picker-panels"
                     >
                       <div
-                        class="ant-picker-date-panel"
-                      >
-                        <div
-                          class="ant-picker-header"
-                        >
-                          <button
-                            class="ant-picker-header-super-prev-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-prev-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-prev-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-prev-icon"
-                            />
-                          </button>
-                          <div
-                            class="ant-picker-header-view"
-                          >
-                            <button
-                              class="ant-picker-month-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              Nov
-                            </button>
-                            <button
-                              class="ant-picker-year-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2016
-                            </button>
-                          </div>
-                          <button
-                            class="ant-picker-header-next-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-next-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-super-next-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-next-icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="ant-picker-body"
-                        >
-                          <table
-                            class="ant-picker-content"
-                          >
-                            <thead>
-                              <tr>
-                                <th>
-                                  Su
-                                </th>
-                                <th>
-                                  Mo
-                                </th>
-                                <th>
-                                  Tu
-                                </th>
-                                <th>
-                                  We
-                                </th>
-                                <th>
-                                  Th
-                                </th>
-                                <th>
-                                  Fr
-                                </th>
-                                <th>
-                                  Sa
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-10-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end"
-                                  title="2016-10-31"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    31
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                  title="2016-11-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-11"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    11
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-12"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    12
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-13"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    13
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-14"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    14
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-15"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    15
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-16"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    16
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-17"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    17
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-18"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    18
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-19"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    19
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-20"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    20
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-21"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    21
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                                  title="2016-11-22"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    22
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-23"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    23
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-24"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    24
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-25"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    25
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-26"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    26
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-11-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                  title="2016-11-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start"
-                                  title="2016-12-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-12-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="ant-picker-date-panel"
-                      >
-                        <div
-                          class="ant-picker-header"
-                        >
-                          <button
-                            class="ant-picker-header-super-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-prev-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-prev-icon"
-                            />
-                          </button>
-                          <div
-                            class="ant-picker-header-view"
-                          >
-                            <button
-                              class="ant-picker-month-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              Dec
-                            </button>
-                            <button
-                              class="ant-picker-year-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2016
-                            </button>
-                          </div>
-                          <button
-                            class="ant-picker-header-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-next-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-super-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-next-icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="ant-picker-body"
-                        >
-                          <table
-                            class="ant-picker-content"
-                          >
-                            <thead>
-                              <tr>
-                                <th>
-                                  Su
-                                </th>
-                                <th>
-                                  Mo
-                                </th>
-                                <th>
-                                  Tu
-                                </th>
-                                <th>
-                                  We
-                                </th>
-                                <th>
-                                  Th
-                                </th>
-                                <th>
-                                  Fr
-                                </th>
-                                <th>
-                                  Sa
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end"
-                                  title="2016-11-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                  title="2016-12-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-10"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    10
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-11"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    11
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-12"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    12
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-13"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    13
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-14"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    14
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-15"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    15
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-16"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    16
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-17"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    17
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-18"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    18
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-19"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    19
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-20"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    20
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-21"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    21
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-22"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    22
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-23"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    23
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-24"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    24
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-25"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    25
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-26"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    26
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-27"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                  title="2016-12-31"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    31
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start"
-                                  title="2017-01-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    3
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
-                                  >
-                                    7
-                                  </div>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_range-time-picker"
-        title="RangePicker[showTime]"
-      >
-        RangePicker[showTime]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_range-time-picker"
-                placeholder="Start date"
-                readonly=""
-                size="21"
-                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"
-                placeholder="End date"
-                readonly=""
-                size="21"
-                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
-              class="ant-picker-dropdown ant-picker-dropdown-range"
-              style="opacity:0"
-            >
-              <div
-                class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-                style="min-width:0"
-              >
-                <div
-                  class="ant-picker-range-arrow"
-                  style="left:0"
-                />
-                <div
-                  class="ant-picker-panel-container"
-                  style="margin-left:0"
-                >
-                  <div
-                    class="ant-picker-panels"
-                  >
-                    <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="ant-picker-datetime-panel"
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
                       >
                         <div
                           class="ant-picker-date-panel"
@@ -14726,6 +3824,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                             </div>
                             <button
                               class="ant-picker-header-next-btn"
+                              style="visibility:hidden"
                               tabindex="-1"
                               type="button"
                             >
@@ -14735,6 +3834,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                             </button>
                             <button
                               class="ant-picker-header-super-next-btn"
+                              style="visibility:hidden"
                               tabindex="-1"
                               type="button"
                             >
@@ -15211,1358 +4311,545 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                             </table>
                           </div>
                         </div>
+                      </div>
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
                         <div
-                          class="ant-picker-time-panel"
+                          class="ant-picker-date-panel"
                         >
                           <div
                             class="ant-picker-header"
                           >
+                            <button
+                              class="ant-picker-header-super-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-prev-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-prev-icon"
+                              />
+                            </button>
                             <div
                               class="ant-picker-header-view"
                             >
-                               
+                              <button
+                                class="ant-picker-month-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                Dec
+                              </button>
+                              <button
+                                class="ant-picker-year-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                2016
+                              </button>
                             </div>
+                            <button
+                              class="ant-picker-header-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-next-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-super-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-next-icon"
+                              />
+                            </button>
                           </div>
                           <div
-                            class="ant-picker-content"
+                            class="ant-picker-body"
                           >
-                            <ul
-                              class="ant-picker-time-panel-column"
-                              style="position:relative"
+                            <table
+                              class="ant-picker-content"
                             >
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  00
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  01
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  02
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  03
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  04
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  05
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  06
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  07
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  08
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  09
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  10
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  11
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  12
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  13
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  14
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  15
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  16
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  17
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  18
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  19
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  20
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  21
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  22
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  23
-                                </div>
-                              </li>
-                            </ul>
-                            <ul
-                              class="ant-picker-time-panel-column"
-                              style="position:relative"
-                            >
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  00
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  01
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  02
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  03
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  04
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  05
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  06
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  07
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  08
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  09
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  10
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  11
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  12
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  13
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  14
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  15
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  16
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  17
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  18
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  19
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  20
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  21
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  22
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  23
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  24
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  25
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  26
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  27
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  28
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  29
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  30
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  31
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  32
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  33
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  34
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  35
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  36
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  37
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  38
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  39
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  40
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  41
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  42
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  43
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  44
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  45
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  46
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  47
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  48
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  49
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  50
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  51
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  52
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  53
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  54
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  55
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  56
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  57
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  58
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  59
-                                </div>
-                              </li>
-                            </ul>
-                            <ul
-                              class="ant-picker-time-panel-column"
-                              style="position:relative"
-                            >
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  00
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  01
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  02
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  03
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  04
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  05
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  06
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  07
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  08
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  09
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  10
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  11
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  12
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  13
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  14
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  15
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  16
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  17
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  18
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  19
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  20
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  21
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  22
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  23
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  24
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  25
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  26
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  27
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  28
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  29
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  30
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  31
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  32
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  33
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  34
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  35
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  36
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  37
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  38
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  39
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  40
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  41
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  42
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  43
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  44
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  45
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  46
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  47
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  48
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  49
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  50
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  51
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  52
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  53
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  54
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  55
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  56
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  57
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  58
-                                </div>
-                              </li>
-                              <li
-                                class="ant-picker-time-panel-cell"
-                              >
-                                <div
-                                  class="ant-picker-time-panel-cell-inner"
-                                >
-                                  59
-                                </div>
-                              </li>
-                            </ul>
+                              <thead>
+                                <tr>
+                                  <th>
+                                    Su
+                                  </th>
+                                  <th>
+                                    Mo
+                                  </th>
+                                  <th>
+                                    Tu
+                                  </th>
+                                  <th>
+                                    We
+                                  </th>
+                                  <th>
+                                    Th
+                                  </th>
+                                  <th>
+                                    Fr
+                                  </th>
+                                  <th>
+                                    Sa
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end"
+                                    title="2016-11-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                    title="2016-12-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-11"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      11
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-12"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      12
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-13"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      13
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-14"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      14
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-15"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      15
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-16"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      16
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-17"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      17
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-18"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      18
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-19"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      19
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-20"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      20
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-21"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      21
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-22"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      22
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-23"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      23
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-24"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      24
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-25"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      25
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-26"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      26
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                    title="2016-12-31"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      31
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start"
+                                    title="2017-01-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <ul
-                      class="ant-picker-ranges"
-                    >
-                      <li
-                        class="ant-picker-ok"
-                      >
-                        <button
-                          class="ant-btn ant-btn-primary ant-btn-sm"
-                          disabled=""
-                          type="button"
-                        >
-                          <span>
-                            OK
-                          </span>
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
                 </div>
               </div>
             </div>
@@ -16572,1433 +4859,102 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_time-picker"
-        title="TimePicker"
-      >
-        TimePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_time-picker"
-                placeholder="Select time"
-                readonly=""
-                size="10"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
-              >
-                <span
-                  aria-label="clock-circle"
-                  class="anticon anticon-clock-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clock-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    />
-                    <path
-                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-          </div>
-          <div>
-            <div
-              class="ant-picker-dropdown"
-              style="opacity:0"
+              class="ant-input-number ant-input-number-in-form-item ant-input-number-disabled"
             >
               <div
-                class="ant-picker-panel-container"
+                class="ant-input-number-handler-wrap"
               >
-                <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                <span
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="ant-input-number-handler ant-input-number-handler-up"
+                  role="button"
+                  unselectable="on"
                 >
-                  <div
-                    class="ant-picker-time-panel"
+                  <span
+                    aria-label="up"
+                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                    role="img"
                   >
-                    <div
-                      class="ant-picker-content"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="up"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                      </ul>
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            24
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            25
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            26
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            27
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            28
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            29
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            30
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            31
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            32
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            33
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            34
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            35
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            36
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            37
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            38
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            39
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            40
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            41
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            42
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            43
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            44
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            45
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            46
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            47
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            48
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            49
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            50
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            51
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            52
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            53
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            54
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            55
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            56
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            57
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            58
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            59
-                          </div>
-                        </li>
-                      </ul>
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            24
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            25
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            26
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            27
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            28
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            29
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            30
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            31
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            32
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            33
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            34
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            35
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            36
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            37
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            38
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            39
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            40
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            41
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            42
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            43
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            44
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            45
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            46
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            47
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            48
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            49
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            50
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            51
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            52
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            53
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            54
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            55
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            56
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            57
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            58
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            59
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
+                      <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"
                   >
-                    <ul
-                      class="ant-picker-ranges"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      <li
-                        class="ant-picker-now"
-                      >
-                        <a
-                          class="ant-picker-now-btn"
-                        >
-                          Now
-                        </a>
-                      </li>
-                      <li
-                        class="ant-picker-ok"
-                      >
-                        <button
-                          class="ant-btn ant-btn-primary ant-btn-sm"
-                          disabled=""
-                          type="button"
-                        >
-                          <span>
-                            OK
-                          </span>
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
+                      <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>
@@ -18007,25 +4963,201 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
+            <textarea
+              class="ant-input ant-input-disabled"
+              disabled=""
+              rows="4"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Upload"
+        >
+          Upload
+        </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"
+          >
+            <span
+              class="ant-upload-picture-card-wrapper"
+            >
+              <div
+                class="ant-upload-list ant-upload-list-picture-card"
+              >
+                <div
+                  class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
+                >
+                  <span
+                    class="ant-upload ant-upload-disabled"
+                    role="button"
+                  >
+                    <input
+                      accept=""
+                      style="display:none"
+                      type="file"
+                    />
+                    <div>
+                      <span
+                        aria-label="plus"
+                        class="anticon anticon-plus"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="plus"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <defs />
+                          <path
+                            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                          />
+                          <path
+                            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                      <div
+                        style="margin-top:8px"
+                      >
+                        Upload
+                      </div>
+                    </div>
+                  </span>
+                </div>
+              </div>
             </span>
-          </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
@@ -18033,24 +5165,24 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
 </form>
 `;
 
-exports[`renders ./components/form/demo/useWatch.md extend context correctly 1`] = `
-Array [
-  <form
-    autocomplete="off"
-    class="ant-form ant-form-vertical"
+exports[`renders ./components/form/demo/disabled-input-debug.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
         class="ant-col ant-form-item-label"
       >
         <label
           class=""
-          for="name"
-          title="Name (Watch to trigger rerender)"
+          title="Normal0"
         >
-          Name (Watch to trigger rerender)
+          Normal0
         </label>
       </div>
       <div
@@ -18064,7 +5196,1103 @@ Array [
           >
             <input
               class="ant-input"
-              id="name"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail0"
+        >
+          Fail0
+        </label>
+      </div>
+      <div
+        class="ant-col 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-status-error"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled0"
+        >
+          FailDisabled0
+        </label>
+      </div>
+      <div
+        class="ant-col 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 ant-input-status-error"
+              disabled=""
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal1"
+        >
+          Normal1
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail1"
+        >
+          Fail1
+        </label>
+      </div>
+      <div
+        class="ant-col 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-status-error"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled1"
+        >
+          FailDisabled1
+        </label>
+      </div>
+      <div
+        class="ant-col 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 ant-input-status-error"
+              disabled=""
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal2"
+        >
+          Normal2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input"
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail2"
+        >
+          Fail2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input ant-input-status-error"
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled2"
+        >
+          FailDisabled2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input ant-input-disabled ant-input-status-error"
+                  disabled=""
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal3"
+        >
+          Normal3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input"
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail3"
+        >
+          Fail3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input"
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled3"
+        >
+          FailDisabled3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-disabled ant-input-affix-wrapper-status-error"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input ant-input-disabled"
+                disabled=""
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-item.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-dashed"
+              style="width:60%"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-dashed"
+              style="width:60%;margin-top:20px"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field at head
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items.md extend context correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-dashed ant-btn-block"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend context correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dynamic_form_nest_item_area"
+          title="Area"
+        >
+          Area
+        </label>
+      </div>
+      <div
+        class="ant-col 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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="dynamic_form_nest_item_area_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="dynamic_form_nest_item_area_list"
+                    aria-haspopup="listbox"
+                    aria-owns="dynamic_form_nest_item_area_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="dynamic_form_nest_item_area"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="dynamic_form_nest_item_area_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="Beijing"
+                        aria-selected="false"
+                        id="dynamic_form_nest_item_area_list_0"
+                        role="option"
+                      >
+                        Beijing
+                      </div>
+                      <div
+                        aria-label="Shanghai"
+                        aria-selected="false"
+                        id="dynamic_form_nest_item_area_list_1"
+                        role="option"
+                      >
+                        Shanghai
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Beijing"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Beijing
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Shanghai"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Shanghai
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-dashed ant-btn-block"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add sights
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items-no-style.md extend context correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Users"
+        >
+          Users
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-form-item"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col 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-dashed ant-btn-block"
+                        type="button"
+                      >
+                        <span
+                          aria-label="plus"
+                          class="anticon anticon-plus"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="plus"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <defs />
+                            <path
+                              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                            />
+                            <path
+                              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                            />
+                          </svg>
+                        </span>
+                        <span>
+                          Add field
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="dynamic_rule"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dynamic_rule_username"
+          title="Name"
+        >
+          Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-8 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="dynamic_rule_username"
+              placeholder="Please input your name"
               type="text"
               value=""
             />
@@ -18072,22 +6300,1048 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-form-item-label"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
         <label
           class=""
-          for="age"
-          title="Age (Not Watch)"
+          for="dynamic_rule_nickname"
+          title="Nickname"
         >
-          Age (Not Watch)
+          Nickname
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-8 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="dynamic_rule_nickname"
+              placeholder="Please input your nickname"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-col-offset-4 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-in-form-item"
+            >
+              <span
+                class="ant-checkbox"
+              >
+                <input
+                  class="ant-checkbox-input"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
+                />
+              </span>
+              <span>
+                Nickname is required
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-col-offset-4 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-primary"
+              type="button"
+            >
+              <span>
+                Check
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/form-context.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="basicForm"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="basicForm_group"
+          title="Group Name"
+        >
+          Group Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="basicForm_group"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="User List"
+        >
+          User List
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-typography ant-typography-secondary ant-form-text"
+            >
+              ( 
+              <span
+                aria-label="smile"
+                class="anticon anticon-smile"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="smile"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                  />
+                </svg>
+              </span>
+               No user yet. )
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              style="margin:0 8px"
+              type="button"
+            >
+              <span>
+                Add User
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/form-in-modal.md extend context correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      New Collection
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/form/demo/global-state.md extend context correctly 1`] = `
+Array [
+  <form
+    class="ant-form ant-form-inline"
+    id="global_state"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="global_state_username"
+            title="Username"
+          >
+            Username
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="global_state_username"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <pre
+    class="language-bash"
+  >
+    [
+  {
+    "name": [
+      "username"
+    ],
+    "value": "Ant Design"
+  }
+]
+  </pre>,
+]
+`;
+
+exports[`renders ./components/form/demo/inline-login.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-inline"
+  id="horizontal_login"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="horizontal_login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="horizontal_login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/label-debug.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="label-ellipsis"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="label-ellipsis_username"
+          title=""
+        >
+          <span
+            aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+          >
+            longtextlongtextlongtextlongtextlongtextlongtextlongtext
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+            >
+              lg
+            </span>
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+            >
+              <span
+                aria-hidden="true"
+              >
+                ...
+              </span>
+            </span>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="label-ellipsis_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="label-ellipsis_password"
+          title=""
+        >
+          <span
+            aria-label="longtext longtext longtext longtext longtext longtext longtext"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+          >
+            longtext longtext longtext longtext longtext longtext longtext
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+            >
+              lg
+            </span>
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+            >
+              <span
+                aria-hidden="true"
+              >
+                ...
+              </span>
+            </span>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="label-ellipsis_password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/layout.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="layout"
+          title="Form Layout"
+        >
+          Form Layout
+        </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"
+              id="layout"
+            >
+              <label
+                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"
+                >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="horizontal"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Horizontal
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="vertical"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Vertical
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="inline"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Inline
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Field A"
+        >
+          Field A
+        </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"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Field B"
+        >
+          Field B
+        </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"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-14 ant-col-offset-4 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-primary"
+              type="button"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/layout-can-wrap.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="wrap"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-no-colon"
+          for="wrap_username"
+          title="正常标签文案"
+        >
+          正常标签文案
         </label>
       </div>
       <div
         class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="wrap_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-no-colon"
+          for="wrap_password"
+          title="超长标签文案超长标签文案"
+        >
+          超长标签文案超长标签文案
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="wrap_password"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-no-colon"
+          title=" "
+        >
+           
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/nest-messages.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="nest-messages"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="nest-messages_user_name"
+          title="Name"
+        >
+          Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="nest-messages_user_name"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_email"
+          title="Email"
+        >
+          Email
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="nest-messages_user_email"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_age"
+          title="Age"
+        >
+          Age
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -18162,7 +7416,7 @@ Array [
                 <input
                   autocomplete="off"
                   class="ant-input-number-input"
-                  id="age"
+                  id="nest-messages_user_age"
                   role="spinbutton"
                   step="1"
                   value=""
@@ -18173,214 +7427,496 @@ Array [
         </div>
       </div>
     </div>
-  </form>,
-  <article
-    class="ant-typography"
-  >
-    <pre>
-      Name Value: 
-    </pre>
-  </article>,
-]
-`;
-
-exports[`renders ./components/form/demo/validate-other.md extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="validate_other"
->
+  </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Plain Text"
-      >
-        Plain Text
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_website"
+          title="Website"
+        >
+          Website
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-form-text"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            China
-          </span>
+            <input
+              class="ant-input"
+              id="nest-messages_user_website"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_select"
-        title="Select"
-      >
-        Select
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_introduction"
+          title="Introduction"
+        >
+          Introduction
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select-selector"
+            <textarea
+              class="ant-input"
+              id="nest-messages_user_introduction"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/normal-login.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal login-form"
+  id="normal_login"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
             >
               <span
-                class="ant-select-selection-search"
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="normal_login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="normal_login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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
-                  aria-activedescendant="validate_other_select_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="validate_other_select_list"
-                  aria-haspopup="listbox"
-                  aria-owns="validate_other_select_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="validate_other_select"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
+                  checked=""
+                  class="ant-checkbox-input"
+                  id="normal_login_remember"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
                 />
               </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Please select a country
+              <span>
+                Remember me
               </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="validate_other_select_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="China"
-                      aria-selected="false"
-                      id="validate_other_select_list_0"
-                      role="option"
-                    >
-                      china
-                    </div>
-                    <div
-                      aria-label="U.S.A"
-                      aria-selected="false"
-                      id="validate_other_select_list_1"
-                      role="option"
-                    >
-                      usa
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="China"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              China
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="U.S.A"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              U.S.A
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <span
-              aria-hidden="true"
-              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
+            </label>
+            <a
+              class="login-form-forgot"
+              href=""
             >
+              Forgot password
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary login-form-button"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+            Or 
+            <a
+              href=""
+            >
+              register now!
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="test"
+          title="test"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="test"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="list_0"
+              type="text"
+              value="light"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Focus Form.Item
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Focus Form.List
+    </span>
+  </button>
+</form>
+`;
+
+exports[`renders ./components/form/demo/register.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="register"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_email"
+          title="E-mail"
+        >
+          E-mail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="register_email"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="register_password"
+                type="password"
+                value=""
+              />
               <span
-                aria-label="down"
-                class="anticon anticon-down ant-select-suffix"
-                role="img"
+                class="ant-input-suffix"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
                 >
-                  <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>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>
@@ -18389,153 +7925,806 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_select-multiple"
-        title="Select[multiple]"
-      >
-        Select[multiple]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_confirm"
+          title="Confirm Password"
+        >
+          Confirm Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+            class="ant-form-item-control-input-content"
           >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="register_confirm"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_nickname"
+          title="Nickname"
+        >
+          Nickname
+          <span
+            aria-label="question-circle"
+            class="anticon anticon-question-circle ant-form-item-tooltip"
+            role="img"
+            title=""
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="question-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+              />
+            </svg>
+          </span>
+          <div>
             <div
-              class="ant-select-selector"
+              class="ant-tooltip"
+              style="opacity:0"
             >
               <div
-                class="ant-select-selection-overflow"
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                  style="opacity:1"
+                  class="ant-tooltip-arrow"
                 >
-                  <div
-                    class="ant-select-selection-search"
-                    style="width:0"
-                  >
-                    <input
-                      aria-activedescendant="validate_other_select-multiple_list_0"
-                      aria-autocomplete="list"
-                      aria-controls="validate_other_select-multiple_list"
-                      aria-haspopup="listbox"
-                      aria-owns="validate_other_select-multiple_list"
-                      autocomplete="off"
-                      class="ant-select-selection-search-input"
-                      id="validate_other_select-multiple"
-                      readonly=""
-                      role="combobox"
-                      style="opacity:0"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-selection-search-mirror"
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  What do you want others to call you?
+                </div>
+              </div>
+            </div>
+          </div>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="register_nickname"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_residence"
+          title="Habitual Residence"
+        >
+          Habitual Residence
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="register_residence_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_residence_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="register_residence"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="Zhejiang / Hangzhou / West Lake"
+                >
+                  Zhejiang / Hangzhou / West Lake
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-cascader-dropdown"
+                  style="opacity:0;min-width:auto"
+                >
+                  <div>
+                    <div
+                      class="ant-cascader-menus"
                     >
-                       
-                    </span>
+                      <ul
+                        class="ant-cascader-menu"
+                        role="menu"
+                      >
+                        <li
+                          aria-checked="false"
+                          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                          data-path-key="zhejiang"
+                          role="menuitemcheckbox"
+                          title="Zhejiang"
+                        >
+                          <div
+                            class="ant-cascader-menu-item-content"
+                          >
+                            Zhejiang
+                          </div>
+                          <div
+                            class="ant-cascader-menu-item-expand-icon"
+                          >
+                            <span
+                              aria-label="right"
+                              class="anticon anticon-right"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="right"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </li>
+                        <li
+                          aria-checked="false"
+                          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                          data-path-key="jiangsu"
+                          role="menuitemcheckbox"
+                          title="Jiangsu"
+                        >
+                          <div
+                            class="ant-cascader-menu-item-content"
+                          >
+                            Jiangsu
+                          </div>
+                          <div
+                            class="ant-cascader-menu-item-expand-icon"
+                          >
+                            <span
+                              aria-label="right"
+                              class="anticon anticon-right"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="right"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>
               <span
-                class="ant-select-selection-placeholder"
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
               >
-                Please select favourite colors
+                <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>
+              <span
+                aria-hidden="true"
+                class="ant-select-clear"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_phone"
+          title="Phone Number"
+        >
+          Phone Number
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper"
+              style="width:100%"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
               >
-                <div>
+                <span
+                  class="ant-input-group-addon"
+                >
                   <div
-                    id="validate_other_select-multiple_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
+                    class="ant-select ant-select-single ant-select-show-arrow"
+                    style="width:70px"
                   >
                     <div
-                      aria-label="Red"
-                      aria-selected="false"
-                      id="validate_other_select-multiple_list_0"
-                      role="option"
+                      class="ant-select-selector"
                     >
-                      red
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="register_prefix_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="register_prefix_list"
+                          aria-haspopup="listbox"
+                          aria-owns="register_prefix_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="register_prefix"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="+86"
+                      >
+                        +86
+                      </span>
                     </div>
-                    <div
-                      aria-label="Green"
-                      aria-selected="false"
-                      id="validate_other_select-multiple_list_1"
-                      role="option"
-                    >
-                      green
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
+                    <div>
+                      <div
+                        class="ant-select-dropdown"
+                        style="opacity:0"
+                      >
+                        <div>
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Red"
+                            id="register_prefix_list"
+                            role="listbox"
+                            style="height:0;width:0;overflow:hidden"
                           >
                             <div
-                              class="ant-select-item-option-content"
+                              aria-label="+86"
+                              aria-selected="true"
+                              id="register_prefix_list_0"
+                              role="option"
                             >
-                              Red
+                              86
+                            </div>
+                            <div
+                              aria-label="+87"
+                              aria-selected="false"
+                              id="register_prefix_list_1"
+                              role="option"
+                            >
+                              87
                             </div>
                           </div>
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Green"
+                            class="rc-virtual-list"
+                            style="position:relative"
                           >
                             <div
-                              class="ant-select-item-option-content"
+                              class="rc-virtual-list-holder"
+                              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
                             >
-                              Green
-                            </div>
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Blue"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Blue
+                              <div>
+                                <div
+                                  class="rc-virtual-list-holder-inner"
+                                  style="display:flex;flex-direction:column"
+                                >
+                                  <div
+                                    aria-selected="true"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                    title="+86"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      +86
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                  <div
+                                    aria-selected="false"
+                                    class="ant-select-item ant-select-item-option"
+                                    title="+87"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      +87
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </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>
+                </span>
+                <input
+                  class="ant-input"
+                  id="register_phone"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_donation"
+          title="Donation"
+        >
+          Donation
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-number-group-wrapper"
+              style="width:100%"
+            >
+              <div
+                class="ant-input-number-wrapper ant-input-number-group"
+              >
+                <div
+                  class="ant-input-number ant-input-number-in-form-item"
+                >
+                  <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"
+                      id="register_donation"
+                      role="spinbutton"
+                      step="1"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="ant-input-number-group-addon"
+                >
+                  <div
+                    class="ant-select ant-select-single ant-select-show-arrow"
+                    style="width:70px"
+                  >
+                    <div
+                      class="ant-select-selector"
+                    >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="register_suffix_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="register_suffix_list"
+                          aria-haspopup="listbox"
+                          aria-owns="register_suffix_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="register_suffix"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-placeholder"
+                      />
+                    </div>
+                    <div>
+                      <div
+                        class="ant-select-dropdown"
+                        style="opacity:0"
+                      >
+                        <div>
+                          <div
+                            id="register_suffix_list"
+                            role="listbox"
+                            style="height:0;width:0;overflow:hidden"
+                          >
+                            <div
+                              aria-label="$"
+                              aria-selected="false"
+                              id="register_suffix_list_0"
+                              role="option"
+                            >
+                              USD
+                            </div>
+                            <div
+                              aria-label="¥"
+                              aria-selected="false"
+                              id="register_suffix_list_1"
+                              role="option"
+                            >
+                              CNY
+                            </div>
+                          </div>
+                          <div
+                            class="rc-virtual-list"
+                            style="position:relative"
+                          >
+                            <div
+                              class="rc-virtual-list-holder"
+                              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                            >
+                              <div>
+                                <div
+                                  class="rc-virtual-list-holder-inner"
+                                  style="display:flex;flex-direction:column"
+                                >
+                                  <div
+                                    aria-selected="false"
+                                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                    title="$"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      $
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                  <div
+                                    aria-selected="false"
+                                    class="ant-select-item ant-select-item-option"
+                                    title="¥"
+                                  >
+                                    <div
+                                      class="ant-select-item-option-content"
+                                    >
+                                      ¥
+                                    </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="ant-select-item-option-state"
+                                      style="user-select:none;-webkit-user-select:none"
+                                      unselectable="on"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </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>
@@ -18546,70 +8735,286 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="InputNumber"
-      >
-        InputNumber
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_website"
+          title="Website"
+        >
+          Website
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-input-number-handler-wrap"
+              class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
-              <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
+              <div
+                class="ant-select-selector"
               >
                 <span
-                  aria-label="up"
-                  class="anticon anticon-up ant-input-number-handler-up-inner"
-                  role="img"
+                  class="ant-select-selection-search"
                 >
-                  <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>
+                  <input
+                    aria-activedescendant="register_website_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="register_website_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_website_list"
+                    autocomplete="off"
+                    class="ant-input ant-select-selection-search-input"
+                    id="register_website"
+                    role="combobox"
+                    type="search"
+                    value=""
+                  />
                 </span>
-              </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  website
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-select-dropdown-empty"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      class="ant-select-item-empty"
+                      id="register_website_list"
+                      role="listbox"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_intro"
+          title="Intro"
+        >
+          Intro
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
+              data-count="0 / 100"
+            >
+              <textarea
+                class="ant-input"
+                id="register_intro"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_gender"
+          title="Gender"
+        >
+          Gender
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="register_gender_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="register_gender_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_gender_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="register_gender"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  select your gender
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="register_gender_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="Male"
+                        aria-selected="false"
+                        id="register_gender_list_0"
+                        role="option"
+                      >
+                        male
+                      </div>
+                      <div
+                        aria-label="Female"
+                        aria-selected="false"
+                        id="register_gender_list_1"
+                        role="option"
+                      >
+                        female
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Male"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Male
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Female"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Female
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Other"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Other
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <span
-                aria-disabled="false"
-                aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down"
-                role="button"
+                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-input-number-handler-down-inner"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
@@ -18628,1082 +9033,143 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 </span>
               </span>
             </div>
-            <div
-              class="ant-input-number-input-wrap"
-            >
-              <input
-                aria-valuemax="10"
-                aria-valuemin="1"
-                aria-valuenow="3"
-                autocomplete="off"
-                class="ant-input-number-input"
-                id="validate_other_input-number"
-                role="spinbutton"
-                step="1"
-                value="3"
-              />
-            </div>
-          </div>
-          <span
-            class="ant-form-text"
-          >
-             machines
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_switch"
-        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"
-            id="validate_other_switch"
-            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-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_slider"
-        title="Slider"
-      >
-        Slider
-      </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-slider ant-slider-horizontal ant-slider-with-marks"
-          >
-            <div
-              class="ant-slider-rail"
-            />
-            <div
-              class="ant-slider-track"
-              style="left:0%;width:0%"
-            />
-            <div
-              class="ant-slider-step"
-            >
-              <span
-                class="ant-slider-dot ant-slider-dot-active"
-                style="left:0%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:20%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:40%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:60%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:80%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:100%;transform:translateX(-50%)"
-              />
-            </div>
-            <div
-              aria-disabled="false"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              aria-valuenow="0"
-              class="ant-slider-handle"
-              role="slider"
-              style="left:0%;transform:translateX(-50%)"
-              tabindex="0"
-            />
-            <div>
-              <div
-                class="ant-tooltip ant-slider-tooltip"
-                style="opacity:0"
-              >
-                <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  >
-                    0
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ant-slider-mark"
-            >
-              <span
-                class="ant-slider-mark-text ant-slider-mark-text-active"
-                style="left:0%;transform:translateX(-50%)"
-              >
-                A
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:20%;transform:translateX(-50%)"
-              >
-                B
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:40%;transform:translateX(-50%)"
-              >
-                C
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:60%;transform:translateX(-50%)"
-              >
-                D
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:80%;transform:translateX(-50%)"
-              >
-                E
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:100%;transform:translateX(-50%)"
-              >
-                F
-              </span>
-            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_radio-group"
-        title="Radio.Group"
-      >
-        Radio.Group
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="Captcha"
         >
-          <div
-            class="ant-radio-group ant-radio-group-outline"
-            id="validate_other_radio-group"
-          >
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="a"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 1
-              </span>
-            </label>
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="b"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 2
-              </span>
-            </label>
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="c"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 3
-              </span>
-            </label>
-          </div>
-        </div>
+          Captcha
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_radio-button"
-        title="Radio.Button"
-      >
-        Radio.Button
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-radio-group ant-radio-group-outline"
-            id="validate_other_radio-button"
-          >
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="a"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 1
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="b"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 2
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="c"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 3
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_checkbox-group"
-        title="Checkbox.Group"
-      >
-        Checkbox.Group
-      </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-checkbox-group"
-            id="validate_other_checkbox-group"
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-row"
+              style="margin-left:-4px;margin-right:-4px"
             >
               <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="A"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    A
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      disabled=""
-                      type="checkbox"
-                      value="B"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    B
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="C"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    C
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="D"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    D
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="E"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    E
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="F"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    F
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_rate"
-        title="Rate"
-      >
-        Rate
-      </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"
-        >
-          <ul
-            class="ant-rate"
-            role="radiogroup"
-            tabindex="0"
-          >
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="1"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="2"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="3"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-zero"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="4"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-zero"
-            >
-              <div
-                aria-checked="false"
-                aria-posinset="5"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_upload"
-        title="Upload"
-      >
-        Upload
-      </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"
-        >
-          <span
-            class=""
-          >
-            <div
-              class="ant-upload ant-upload-select ant-upload-select-picture"
-            >
-              <span
-                class="ant-upload"
-                role="button"
-                tabindex="0"
+                class="ant-col ant-col-12"
+                style="padding-left:4px;padding-right:4px"
               >
                 <input
-                  accept=""
-                  id="validate_other_upload"
-                  style="display:none"
-                  type="file"
+                  class="ant-input"
+                  id="register_captcha"
+                  type="text"
+                  value=""
                 />
+              </div>
+              <div
+                class="ant-col ant-col-12"
+                style="padding-left:4px;padding-right:4px"
+              >
                 <button
                   class="ant-btn ant-btn-default"
                   type="button"
                 >
-                  <span
-                    aria-label="upload"
-                    class="anticon anticon-upload"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="upload"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-                      />
-                    </svg>
-                  </span>
                   <span>
-                    Click to upload
+                    Get captcha
                   </span>
                 </button>
-              </span>
+              </div>
             </div>
-            <div
-              class="ant-upload-list ant-upload-list-picture"
-            />
-          </span>
+          </div>
+        </div>
+        <div
+          class="ant-form-item-extra"
+        >
+          We must make sure that your are a human.
         </div>
-      </div>
-      <div
-        class="ant-form-item-extra"
-      >
-        longgggggggggggggggggggggggggggggggggg
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Dragger"
-      >
-        Dragger
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span>
-            <div
-              class="ant-upload ant-upload-drag"
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <label
+              class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
             >
               <span
-                class="ant-upload ant-upload-btn"
-                role="button"
-                tabindex="0"
+                class="ant-checkbox"
               >
                 <input
-                  accept=""
-                  id="validate_other_dragger"
-                  style="display:none"
-                  type="file"
+                  class="ant-checkbox-input"
+                  id="register_agreement"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
                 />
-                <div
-                  class="ant-upload-drag-container"
-                >
-                  <p
-                    class="ant-upload-drag-icon"
-                  >
-                    <span
-                      aria-label="inbox"
-                      class="anticon anticon-inbox"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="inbox"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="0 0 1024 1024"
-                        width="1em"
-                      >
-                        <path
-                          d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
-                        />
-                      </svg>
-                    </span>
-                  </p>
-                  <p
-                    class="ant-upload-text"
-                  >
-                    Click or drag file to this area to upload
-                  </p>
-                  <p
-                    class="ant-upload-hint"
-                  >
-                    Support for a single or bulk upload.
-                  </p>
-                </div>
               </span>
-            </div>
-            <div
-              class="ant-upload-list ant-upload-list-text"
-            />
-          </span>
+              <span>
+                I have read the 
+                <a
+                  href=""
+                >
+                  agreement
+                </a>
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
-            </span>
-          </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Register
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -19711,2639 +9177,2430 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
 </form>
 `;
 
-exports[`renders ./components/form/demo/validate-static.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/required-mark.md extend context correctly 1`] = `
 <form
-  class="ant-form ant-form-horizontal"
+  class="ant-form ant-form-vertical"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input ant-input-status-error"
-            id="error"
-            placeholder="unavailable choice"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should be combination of numbers & alphabets
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required-mark-optional"
+          for="requiredMarkValue"
+          title="Required Mark"
         >
+          Required Mark
           <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning"
+            class="ant-form-item-optional"
+            title=""
           >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="smile"
-                class="anticon anticon-smile"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="smile"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="warning"
-              placeholder="Warning"
-              type="text"
-              value=""
-            />
+            (optional)
           </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Validating"
-      >
-        Validating
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-validating ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="validating"
-              placeholder="I'm the content is being validated"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
-              >
-                <span
-                  aria-label="loading"
-                  class="anticon anticon-loading anticon-spin"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="loading"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
+        </label>
       </div>
       <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-explain-validating"
-          role="alert"
-        >
-          The information is being validated...
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="success"
-              placeholder="I'm the content"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="warning2"
-              placeholder="Warning"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-              >
-                <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="error2"
-              placeholder="unavailable choice"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should be combination of numbers & alphabets
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker ant-picker-status-success ant-picker-has-feedback"
-            style="width:100%"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
+              class="ant-radio-group ant-radio-group-outline"
+              id="requiredMarkValue"
             >
-              <input
-                autocomplete="off"
-                placeholder="Select date"
-                readonly=""
-                size="12"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <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
-                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                  class="ant-radio-button ant-radio-button-checked"
                 >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="optional"
+                  />
                   <span
-                    aria-label="check-circle"
-                    class="anticon anticon-check-circle"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="check-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                      />
-                    </svg>
-                  </span>
+                    class="ant-radio-button-inner"
+                  />
                 </span>
-              </span>
+                <span>
+                  Optional
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="true"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Required
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="false"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Hidden
+                </span>
+              </label>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-required-mark-optional"
+          title="Field A"
+        >
+          Field A
+          <span
+            aria-label="question-circle"
+            class="anticon anticon-question-circle ant-form-item-tooltip"
+            role="img"
+            title=""
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="question-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+              />
+            </svg>
+          </span>
           <div>
             <div
-              class="ant-picker-dropdown"
+              class="ant-tooltip"
               style="opacity:0"
             >
               <div
-                class="ant-picker-panel-container"
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                  class="ant-tooltip-arrow"
                 >
-                  <div
-                    class="ant-picker-date-panel"
-                  >
-                    <div
-                      class="ant-picker-header"
-                    >
-                      <button
-                        class="ant-picker-header-super-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-prev-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-prev-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-prev-icon"
-                        />
-                      </button>
-                      <div
-                        class="ant-picker-header-view"
-                      >
-                        <button
-                          class="ant-picker-month-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          Nov
-                        </button>
-                        <button
-                          class="ant-picker-year-btn"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          2016
-                        </button>
-                      </div>
-                      <button
-                        class="ant-picker-header-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-next-icon"
-                        />
-                      </button>
-                      <button
-                        class="ant-picker-header-super-next-btn"
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="ant-picker-super-next-icon"
-                        />
-                      </button>
-                    </div>
-                    <div
-                      class="ant-picker-body"
-                    >
-                      <table
-                        class="ant-picker-content"
-                      >
-                        <thead>
-                          <tr>
-                            <th>
-                              Su
-                            </th>
-                            <th>
-                              Mo
-                            </th>
-                            <th>
-                              Tu
-                            </th>
-                            <th>
-                              We
-                            </th>
-                            <th>
-                              Th
-                            </th>
-                            <th>
-                              Fr
-                            </th>
-                            <th>
-                              Sa
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-10-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end"
-                              title="2016-10-31"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                31
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                              title="2016-11-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-11"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                11
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-12"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                12
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-13"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                13
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-14"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                14
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-15"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                15
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-16"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                16
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-17"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                17
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-18"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                18
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-19"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                19
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-20"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                20
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-21"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                21
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                              title="2016-11-22"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                22
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-23"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                23
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-24"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                24
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-25"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                25
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-26"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                26
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-27"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                27
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-28"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                28
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-in-view"
-                              title="2016-11-29"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                29
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                              title="2016-11-30"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                30
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell ant-picker-cell-start"
-                              title="2016-12-01"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                1
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-02"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                2
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-03"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                3
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-04"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                4
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-05"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                5
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-06"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                6
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-07"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                7
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-08"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                8
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-09"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                9
-                              </div>
-                            </td>
-                            <td
-                              class="ant-picker-cell"
-                              title="2016-12-10"
-                            >
-                              <div
-                                class="ant-picker-cell-inner"
-                              >
-                                10
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <a
-                      class="ant-picker-today-btn"
-                    >
-                      Today
-                    </a>
-                  </div>
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  This is a required field
                 </div>
               </div>
             </div>
           </div>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required-mark-optional"
+          title="Field B"
         >
-          <div
-            class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
-            style="width:100%"
+          Field B
+          <span
+            aria-label="info-circle"
+            class="anticon anticon-info-circle ant-form-item-tooltip"
+            role="img"
+            title=""
           >
-            <div
-              class="ant-picker-input"
+            <svg
+              aria-hidden="true"
+              data-icon="info-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <input
-                autocomplete="off"
-                placeholder="Select time"
-                readonly=""
-                size="10"
-                title=""
-                value=""
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
               />
-              <span
-                class="ant-picker-suffix"
-              >
-                <span
-                  aria-label="clock-circle"
-                  class="anticon anticon-clock-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clock-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    />
-                    <path
-                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-                >
-                  <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </span>
-            </div>
-          </div>
+              <path
+                d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </span>
           <div>
             <div
-              class="ant-picker-dropdown"
+              class="ant-tooltip"
               style="opacity:0"
             >
               <div
-                class="ant-picker-panel-container"
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-picker-panel ant-picker-panel-focused"
-                  tabindex="-1"
+                  class="ant-tooltip-arrow"
                 >
-                  <div
-                    class="ant-picker-time-panel"
-                  >
-                    <div
-                      class="ant-picker-content"
-                    >
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                      </ul>
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            24
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            25
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            26
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            27
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            28
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            29
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            30
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            31
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            32
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            33
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            34
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            35
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            36
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            37
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            38
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            39
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            40
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            41
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            42
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            43
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            44
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            45
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            46
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            47
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            48
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            49
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            50
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            51
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            52
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            53
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            54
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            55
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            56
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            57
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            58
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            59
-                          </div>
-                        </li>
-                      </ul>
-                      <ul
-                        class="ant-picker-time-panel-column"
-                        style="position:relative"
-                      >
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            00
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            01
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            02
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            03
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            04
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            05
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            06
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            07
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            08
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            09
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            10
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            11
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            12
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            13
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            14
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            15
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            16
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            17
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            18
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            19
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            20
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            21
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            22
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            23
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            24
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            25
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            26
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            27
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            28
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            29
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            30
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            31
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            32
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            33
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            34
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            35
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            36
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            37
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            38
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            39
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            40
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            41
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            42
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            43
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            44
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            45
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            46
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            47
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            48
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            49
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            50
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            51
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            52
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            53
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            54
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            55
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            56
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            57
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            58
-                          </div>
-                        </li>
-                        <li
-                          class="ant-picker-time-panel-cell"
-                        >
-                          <div
-                            class="ant-picker-time-panel-cell-inner"
-                          >
-                            59
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-picker-footer"
-                  >
-                    <ul
-                      class="ant-picker-ranges"
-                    >
-                      <li
-                        class="ant-picker-now"
-                      >
-                        <a
-                          class="ant-picker-now-btn"
-                        >
-                          Now
-                        </a>
-                      </li>
-                      <li
-                        class="ant-picker-ok"
-                      >
-                        <button
-                          class="ant-btn ant-btn-primary ant-btn-sm"
-                          disabled=""
-                          type="button"
-                        >
-                          <span>
-                            OK
-                          </span>
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  Tooltip with customize icon
                 </div>
               </div>
             </div>
           </div>
+          <span
+            class="ant-form-item-optional"
+            title=""
+          >
+            (optional)
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
-            style="width:100%"
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal ant-form-default"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="size"
+          title="Form Size"
+        >
+          Form Size
+        </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-input ant-picker-input-active"
+              class="ant-radio-group ant-radio-group-outline ant-radio-group-default"
+              id="size"
             >
-              <input
-                autocomplete="off"
-                placeholder="Start date"
-                readonly=""
-                size="12"
-                value=""
-              />
-            </div>
-            <div
-              class="ant-picker-range-separator"
-            >
-              <span
-                aria-label="to"
-                class="ant-picker-separator"
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
               >
                 <span
-                  aria-label="swap-right"
-                  class="anticon anticon-swap-right"
-                  role="img"
+                  class="ant-radio-button"
                 >
-                  <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"
-                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"
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="small"
                   />
-                </svg>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Small
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
+                  class="ant-radio-button ant-radio-button-checked"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="default"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
                 </span>
-              </span>
-            </span>
+                <span>
+                  Default
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Large
+                </span>
+              </label>
+            </div>
           </div>
-          <div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-picker-dropdown ant-picker-dropdown-range"
-              style="opacity:0"
+              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
-                class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-                style="min-width:0"
+                class="ant-select-selector"
               >
-                <div
-                  class="ant-picker-range-arrow"
-                  style="left:0"
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="undefined_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
                 />
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="undefined_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="Demo"
+                        aria-selected="false"
+                        id="undefined_list_0"
+                        role="option"
+                      >
+                        demo
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Demo"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Demo
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-tree-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div>
+                      <div
+                        class="ant-select-tree"
+                        role="tree"
+                      >
+                        <div>
+                          <input
+                            aria-label="for screen reader"
+                            disabled=""
+                            style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          aria-hidden="true"
+                          class="ant-select-tree-treenode"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                        >
+                          <div
+                            class="ant-select-tree-indent"
+                          >
+                            <div
+                              class="ant-select-tree-indent-unit"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="ant-select-tree-list"
+                          style="position:relative"
+                        >
+                          <div
+                            class="ant-select-tree-list-holder"
+                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                          >
+                            <div>
+                              <div
+                                class="ant-select-tree-list-holder-inner"
+                                style="display:flex;flex-direction:column"
+                              >
+                                <div
+                                  aria-grabbed="false"
+                                  class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                                  draggable="false"
+                                >
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-tree-indent"
+                                  />
+                                  <span
+                                    class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                                  >
+                                    <span
+                                      aria-label="caret-down"
+                                      class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                                      role="img"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        data-icon="caret-down"
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height="1em"
+                                        viewBox="0 0 1024 1024"
+                                        width="1em"
+                                      >
+                                        <path
+                                          d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </span>
+                                  <span
+                                    class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                                    title="Light"
+                                  >
+                                    <span
+                                      class="ant-select-tree-title"
+                                    >
+                                      Light
+                                    </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-cascader-dropdown"
+                  style="opacity:0;min-width:auto"
+                >
+                  <div>
+                    <div
+                      class="ant-cascader-menus"
+                    >
+                      <ul
+                        class="ant-cascader-menu"
+                        role="menu"
+                      >
+                        <li
+                          aria-checked="false"
+                          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                          data-path-key="zhejiang"
+                          role="menuitemcheckbox"
+                          title="Zhejiang"
+                        >
+                          <div
+                            class="ant-cascader-menu-item-content"
+                          >
+                            Zhejiang
+                          </div>
+                          <div
+                            class="ant-cascader-menu-item-expand-icon"
+                          >
+                            <span
+                              aria-label="right"
+                              class="anticon anticon-right"
+                              role="img"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                data-icon="right"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-default"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  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
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
                 <div
                   class="ant-picker-panel-container"
-                  style="margin-left:0"
                 >
                   <div
-                    class="ant-picker-panels"
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
                   >
                     <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
+                      class="ant-picker-date-panel"
+                    >
+                      <div
+                        class="ant-picker-header"
+                      >
+                        <button
+                          class="ant-picker-header-super-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-prev-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-prev-icon"
+                          />
+                        </button>
+                        <div
+                          class="ant-picker-header-view"
+                        >
+                          <button
+                            class="ant-picker-month-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            Nov
+                          </button>
+                          <button
+                            class="ant-picker-year-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            2016
+                          </button>
+                        </div>
+                        <button
+                          class="ant-picker-header-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-next-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-super-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-next-icon"
+                          />
+                        </button>
+                      </div>
+                      <div
+                        class="ant-picker-body"
+                      >
+                        <table
+                          class="ant-picker-content"
+                        >
+                          <thead>
+                            <tr>
+                              <th>
+                                Su
+                              </th>
+                              <th>
+                                Mo
+                              </th>
+                              <th>
+                                Tu
+                              </th>
+                              <th>
+                                We
+                              </th>
+                              <th>
+                                Th
+                              </th>
+                              <th>
+                                Fr
+                              </th>
+                              <th>
+                                Sa
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-10-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end"
+                                title="2016-10-31"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  31
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                title="2016-11-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-11"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  11
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-12"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  12
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-13"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  13
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-14"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  14
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-15"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  15
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-16"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  16
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-17"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  17
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-18"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  18
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-19"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  19
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-20"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  20
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-21"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  21
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                title="2016-11-22"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  22
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-23"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  23
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-24"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  24
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-25"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  25
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-26"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  26
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-27"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  27
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-28"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  28
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-29"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  29
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                title="2016-11-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start"
+                                title="2016-12-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <a
+                        class="ant-picker-today-btn"
+                      >
+                        Today
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <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"
+                  role="spinbutton"
+                  step="1"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+              role="switch"
+              type="button"
+            >
+              <div
+                class="ant-switch-handle"
+              />
+              <span
+                class="ant-switch-inner"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+              type="button"
+            >
+              <span>
+                Button
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/time-related-controls.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="time_related_controls"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_date-picker"
+          title="DatePicker"
+        >
+          DatePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_date-picker"
+                  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
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="ant-picker-date-panel"
+                    >
+                      <div
+                        class="ant-picker-header"
+                      >
+                        <button
+                          class="ant-picker-header-super-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-prev-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-prev-icon"
+                          />
+                        </button>
+                        <div
+                          class="ant-picker-header-view"
+                        >
+                          <button
+                            class="ant-picker-month-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            Nov
+                          </button>
+                          <button
+                            class="ant-picker-year-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            2016
+                          </button>
+                        </div>
+                        <button
+                          class="ant-picker-header-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-next-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-super-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-next-icon"
+                          />
+                        </button>
+                      </div>
+                      <div
+                        class="ant-picker-body"
+                      >
+                        <table
+                          class="ant-picker-content"
+                        >
+                          <thead>
+                            <tr>
+                              <th>
+                                Su
+                              </th>
+                              <th>
+                                Mo
+                              </th>
+                              <th>
+                                Tu
+                              </th>
+                              <th>
+                                We
+                              </th>
+                              <th>
+                                Th
+                              </th>
+                              <th>
+                                Fr
+                              </th>
+                              <th>
+                                Sa
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-10-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end"
+                                title="2016-10-31"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  31
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                title="2016-11-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-11"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  11
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-12"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  12
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-13"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  13
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-14"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  14
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-15"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  15
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-16"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  16
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-17"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  17
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-18"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  18
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-19"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  19
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-20"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  20
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-21"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  21
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                title="2016-11-22"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  22
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-23"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  23
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-24"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  24
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-25"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  25
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-26"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  26
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-27"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  27
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-28"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  28
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-29"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  29
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                title="2016-11-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start"
+                                title="2016-12-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <a
+                        class="ant-picker-today-btn"
+                      >
+                        Today
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_date-time-picker"
+          title="DatePicker[showTime]"
+        >
+          DatePicker[showTime]
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_date-time-picker"
+                  placeholder="Select date"
+                  readonly=""
+                  size="21"
+                  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
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="ant-picker-datetime-panel"
                     >
                       <div
                         class="ant-picker-date-panel"
@@ -22389,7 +11646,6 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                           </div>
                           <button
                             class="ant-picker-header-next-btn"
-                            style="visibility:hidden"
                             tabindex="-1"
                             type="button"
                           >
@@ -22399,7 +11655,6 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                           </button>
                           <button
                             class="ant-picker-header-super-next-btn"
-                            style="visibility:hidden"
                             tabindex="-1"
                             type="button"
                           >
@@ -22876,1025 +12131,6671 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                           </table>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="ant-picker-panel ant-picker-panel-focused"
-                      tabindex="-1"
-                    >
                       <div
-                        class="ant-picker-date-panel"
+                        class="ant-picker-time-panel"
                       >
                         <div
                           class="ant-picker-header"
                         >
-                          <button
-                            class="ant-picker-header-super-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-prev-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-prev-btn"
-                            style="visibility:hidden"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-prev-icon"
-                            />
-                          </button>
                           <div
                             class="ant-picker-header-view"
                           >
-                            <button
-                              class="ant-picker-month-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              Dec
-                            </button>
-                            <button
-                              class="ant-picker-year-btn"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2016
-                            </button>
+                             
                           </div>
-                          <button
-                            class="ant-picker-header-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-next-icon"
-                            />
-                          </button>
-                          <button
-                            class="ant-picker-header-super-next-btn"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="ant-picker-super-next-icon"
-                            />
-                          </button>
                         </div>
                         <div
-                          class="ant-picker-body"
+                          class="ant-picker-content"
                         >
-                          <table
-                            class="ant-picker-content"
+                          <ul
+                            class="ant-picker-time-panel-column"
+                            style="position:relative"
                           >
-                            <thead>
-                              <tr>
-                                <th>
-                                  Su
-                                </th>
-                                <th>
-                                  Mo
-                                </th>
-                                <th>
-                                  Tu
-                                </th>
-                                <th>
-                                  We
-                                </th>
-                                <th>
-                                  Th
-                                </th>
-                                <th>
-                                  Fr
-                                </th>
-                                <th>
-                                  Sa
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-27"
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                00
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                01
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                02
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                03
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                04
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                05
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                06
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                07
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                08
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                09
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                10
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                11
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                12
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                13
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                14
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                15
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                16
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                17
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                18
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                19
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                20
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                21
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                22
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                23
+                              </div>
+                            </li>
+                          </ul>
+                          <ul
+                            class="ant-picker-time-panel-column"
+                            style="position:relative"
+                          >
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                00
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                01
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                02
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                03
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                04
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                05
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                06
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                07
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                08
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                09
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                10
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                11
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                12
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                13
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                14
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                15
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                16
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                17
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                18
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                19
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                20
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                21
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                22
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                23
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                24
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                25
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                26
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                27
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                28
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                29
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                30
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                31
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                32
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                33
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                34
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                35
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                36
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                37
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                38
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                39
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                40
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                41
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                42
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                43
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                44
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                45
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                46
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                47
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                48
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                49
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                50
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                51
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                52
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                53
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                54
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                55
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                56
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                57
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                58
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                59
+                              </div>
+                            </li>
+                          </ul>
+                          <ul
+                            class="ant-picker-time-panel-column"
+                            style="position:relative"
+                          >
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                00
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                01
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                02
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                03
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                04
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                05
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                06
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                07
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                08
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                09
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                10
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                11
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                12
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                13
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                14
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                15
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                16
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                17
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                18
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                19
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                20
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                21
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                22
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                23
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                24
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                25
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                26
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                27
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                28
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                29
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                30
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                31
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                32
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                33
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                34
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                35
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                36
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                37
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                38
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                39
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                40
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                41
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                42
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                43
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                44
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                45
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                46
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                47
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                48
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                49
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                50
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                51
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                52
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                53
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                54
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                55
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                56
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                57
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                58
+                              </div>
+                            </li>
+                            <li
+                              class="ant-picker-time-panel-cell"
+                            >
+                              <div
+                                class="ant-picker-time-panel-cell-inner"
+                              >
+                                59
+                              </div>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <ul
+                        class="ant-picker-ranges"
+                      >
+                        <li
+                          class="ant-picker-now"
+                        >
+                          <a
+                            class="ant-picker-now-btn"
+                          >
+                            Now
+                          </a>
+                        </li>
+                        <li
+                          class="ant-picker-ok"
+                        >
+                          <button
+                            class="ant-btn ant-btn-primary ant-btn-sm"
+                            disabled=""
+                            type="button"
+                          >
+                            <span>
+                              OK
+                            </span>
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_month-picker"
+          title="MonthPicker"
+        >
+          MonthPicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_month-picker"
+                  placeholder="Select month"
+                  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
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="ant-picker-month-panel"
+                    >
+                      <div
+                        class="ant-picker-header"
+                      >
+                        <button
+                          class="ant-picker-header-super-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-prev-icon"
+                          />
+                        </button>
+                        <div
+                          class="ant-picker-header-view"
+                        >
+                          <button
+                            class="ant-picker-year-btn"
+                            type="button"
+                          >
+                            2016
+                          </button>
+                        </div>
+                        <button
+                          class="ant-picker-header-super-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-next-icon"
+                          />
+                        </button>
+                      </div>
+                      <div
+                        class="ant-picker-body"
+                      >
+                        <table
+                          class="ant-picker-content"
+                        >
+                          <tbody>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
                                 >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                  Jan
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Feb
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Mar
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Apr
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  May
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Jun
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Jul
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Aug
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Sep
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Oct
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Nov
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-12"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  Dec
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_range-picker"
+          title="RangePicker"
+        >
+          RangePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_range-picker"
+                  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"
+                  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
+                class="ant-picker-dropdown ant-picker-dropdown-range"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+                  style="min-width:0"
+                >
+                  <div
+                    class="ant-picker-range-arrow"
+                    style="left:0"
+                  />
+                  <div
+                    class="ant-picker-panel-container"
+                    style="margin-left:0"
+                  >
+                    <div
+                      class="ant-picker-panels"
+                    >
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="ant-picker-date-panel"
+                        >
+                          <div
+                            class="ant-picker-header"
+                          >
+                            <button
+                              class="ant-picker-header-super-prev-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-prev-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-prev-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-prev-icon"
+                              />
+                            </button>
+                            <div
+                              class="ant-picker-header-view"
+                            >
+                              <button
+                                class="ant-picker-month-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                Nov
+                              </button>
+                              <button
+                                class="ant-picker-year-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                2016
+                              </button>
+                            </div>
+                            <button
+                              class="ant-picker-header-next-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-next-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-super-next-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-next-icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="ant-picker-body"
+                          >
+                            <table
+                              class="ant-picker-content"
+                            >
+                              <thead>
+                                <tr>
+                                  <th>
+                                    Su
+                                  </th>
+                                  <th>
+                                    Mo
+                                  </th>
+                                  <th>
+                                    Tu
+                                  </th>
+                                  <th>
+                                    We
+                                  </th>
+                                  <th>
+                                    Th
+                                  </th>
+                                  <th>
+                                    Fr
+                                  </th>
+                                  <th>
+                                    Sa
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-10-30"
                                   >
-                                    27
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-28"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end"
+                                    title="2016-10-31"
                                   >
-                                    28
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2016-11-29"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      31
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                    title="2016-11-01"
                                   >
-                                    29
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end"
-                                  title="2016-11-30"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-02"
                                   >
-                                    30
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                  title="2016-12-01"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-03"
                                   >
-                                    1
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-02"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-04"
                                   >
-                                    2
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-03"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-05"
                                   >
-                                    3
-                                  </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-04"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-06"
                                   >
-                                    4
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-05"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-07"
                                   >
-                                    5
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-06"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-08"
                                   >
-                                    6
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-07"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-09"
                                   >
-                                    7
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-08"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-10"
                                   >
-                                    8
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-09"
-                                >
-                                  <div
-                                    class="ant-picker-cell-inner"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-11"
                                   >
-                                    9
-                                  </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-10"
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      11
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-12"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      12
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-13"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      13
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-14"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      14
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-15"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      15
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-16"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      16
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-17"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      17
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-18"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      18
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-19"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      19
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-20"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      20
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-21"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      21
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                    title="2016-11-22"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      22
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-23"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      23
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-24"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      24
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-25"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      25
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-26"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      26
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                    title="2016-11-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start"
+                                    title="2016-12-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="ant-picker-date-panel"
+                        >
+                          <div
+                            class="ant-picker-header"
+                          >
+                            <button
+                              class="ant-picker-header-super-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-prev-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-prev-icon"
+                              />
+                            </button>
+                            <div
+                              class="ant-picker-header-view"
+                            >
+                              <button
+                                class="ant-picker-month-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                Dec
+                              </button>
+                              <button
+                                class="ant-picker-year-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                2016
+                              </button>
+                            </div>
+                            <button
+                              class="ant-picker-header-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-next-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-super-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-next-icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="ant-picker-body"
+                          >
+                            <table
+                              class="ant-picker-content"
+                            >
+                              <thead>
+                                <tr>
+                                  <th>
+                                    Su
+                                  </th>
+                                  <th>
+                                    Mo
+                                  </th>
+                                  <th>
+                                    Tu
+                                  </th>
+                                  <th>
+                                    We
+                                  </th>
+                                  <th>
+                                    Th
+                                  </th>
+                                  <th>
+                                    Fr
+                                  </th>
+                                  <th>
+                                    Sa
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end"
+                                    title="2016-11-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                    title="2016-12-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-11"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      11
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-12"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      12
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-13"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      13
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-14"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      14
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-15"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      15
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-16"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      16
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-17"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      17
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-18"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      18
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-19"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      19
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-20"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      20
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-21"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      21
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-22"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      22
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-23"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      23
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-24"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      24
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-25"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      25
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-26"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      26
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                    title="2016-12-31"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      31
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start"
+                                    title="2017-01-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_range-time-picker"
+          title="RangePicker[showTime]"
+        >
+          RangePicker[showTime]
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_range-time-picker"
+                  placeholder="Start date"
+                  readonly=""
+                  size="21"
+                  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"
+                  placeholder="End date"
+                  readonly=""
+                  size="21"
+                  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
+                class="ant-picker-dropdown ant-picker-dropdown-range"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+                  style="min-width:0"
+                >
+                  <div
+                    class="ant-picker-range-arrow"
+                    style="left:0"
+                  />
+                  <div
+                    class="ant-picker-panel-container"
+                    style="margin-left:0"
+                  >
+                    <div
+                      class="ant-picker-panels"
+                    >
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="ant-picker-datetime-panel"
+                        >
+                          <div
+                            class="ant-picker-date-panel"
+                          >
+                            <div
+                              class="ant-picker-header"
+                            >
+                              <button
+                                class="ant-picker-header-super-prev-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                <span
+                                  class="ant-picker-super-prev-icon"
+                                />
+                              </button>
+                              <button
+                                class="ant-picker-header-prev-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                <span
+                                  class="ant-picker-prev-icon"
+                                />
+                              </button>
+                              <div
+                                class="ant-picker-header-view"
+                              >
+                                <button
+                                  class="ant-picker-month-btn"
+                                  tabindex="-1"
+                                  type="button"
+                                >
+                                  Nov
+                                </button>
+                                <button
+                                  class="ant-picker-year-btn"
+                                  tabindex="-1"
+                                  type="button"
+                                >
+                                  2016
+                                </button>
+                              </div>
+                              <button
+                                class="ant-picker-header-next-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                <span
+                                  class="ant-picker-next-icon"
+                                />
+                              </button>
+                              <button
+                                class="ant-picker-header-super-next-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                <span
+                                  class="ant-picker-super-next-icon"
+                                />
+                              </button>
+                            </div>
+                            <div
+                              class="ant-picker-body"
+                            >
+                              <table
+                                class="ant-picker-content"
+                              >
+                                <thead>
+                                  <tr>
+                                    <th>
+                                      Su
+                                    </th>
+                                    <th>
+                                      Mo
+                                    </th>
+                                    <th>
+                                      Tu
+                                    </th>
+                                    <th>
+                                      We
+                                    </th>
+                                    <th>
+                                      Th
+                                    </th>
+                                    <th>
+                                      Fr
+                                    </th>
+                                    <th>
+                                      Sa
+                                    </th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-10-30"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        30
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-end"
+                                      title="2016-10-31"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        31
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                      title="2016-11-01"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        1
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-02"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        2
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-03"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        3
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-04"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        4
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-05"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        5
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-06"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        6
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-07"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        7
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-08"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        8
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-09"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        9
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-10"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        10
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-11"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        11
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-12"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        12
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-13"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        13
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-14"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        14
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-15"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        15
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-16"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        16
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-17"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        17
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-18"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        18
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-19"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        19
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-20"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        20
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-21"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        21
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                      title="2016-11-22"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        22
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-23"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        23
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-24"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        24
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-25"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        25
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-26"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        26
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-27"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        27
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-28"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        28
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-in-view"
+                                      title="2016-11-29"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        29
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                      title="2016-11-30"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        30
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell ant-picker-cell-start"
+                                      title="2016-12-01"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        1
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-02"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        2
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-03"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        3
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-04"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        4
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-05"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        5
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-06"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        6
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-07"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        7
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-08"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        8
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-09"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        9
+                                      </div>
+                                    </td>
+                                    <td
+                                      class="ant-picker-cell"
+                                      title="2016-12-10"
+                                    >
+                                      <div
+                                        class="ant-picker-cell-inner"
+                                      >
+                                        10
+                                      </div>
+                                    </td>
+                                  </tr>
+                                </tbody>
+                              </table>
+                            </div>
+                          </div>
+                          <div
+                            class="ant-picker-time-panel"
+                          >
+                            <div
+                              class="ant-picker-header"
+                            >
+                              <div
+                                class="ant-picker-header-view"
+                              >
+                                 
+                              </div>
+                            </div>
+                            <div
+                              class="ant-picker-content"
+                            >
+                              <ul
+                                class="ant-picker-time-panel-column"
+                                style="position:relative"
+                              >
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    00
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    01
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    02
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    03
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    04
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    05
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    06
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    07
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    08
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    09
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     10
                                   </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-11"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     11
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-12"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     12
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-13"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     13
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-14"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     14
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-15"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     15
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-16"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     16
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-17"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     17
                                   </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-18"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     18
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-19"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     19
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-20"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     20
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-21"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     21
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-22"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     22
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-23"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     23
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-24"
+                                </li>
+                              </ul>
+                              <ul
+                                class="ant-picker-time-panel-column"
+                                style="position:relative"
+                              >
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    00
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    01
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    02
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    03
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    04
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    05
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    06
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    07
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    08
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    09
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    10
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    11
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    12
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    13
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    14
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    15
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    16
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    17
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    18
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    19
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    20
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    21
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    22
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    23
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     24
                                   </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-25"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     25
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-26"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     26
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-27"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     27
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-28"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     28
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-29"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     29
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-in-view"
-                                  title="2016-12-30"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     30
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                  title="2016-12-31"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
                                     31
                                   </div>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td
-                                  class="ant-picker-cell ant-picker-cell-start"
-                                  title="2017-01-01"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    1
+                                    32
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-02"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    2
+                                    33
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-03"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    3
+                                    34
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-04"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    4
+                                    35
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-05"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    5
+                                    36
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-06"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    6
+                                    37
                                   </div>
-                                </td>
-                                <td
-                                  class="ant-picker-cell"
-                                  title="2017-01-07"
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
                                 >
                                   <div
-                                    class="ant-picker-cell-inner"
+                                    class="ant-picker-time-panel-cell-inner"
                                   >
-                                    7
+                                    38
                                   </div>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <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-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm Select
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    id="undefined_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
-                  >
-                    <div
-                      aria-label="Option 1"
-                      aria-selected="false"
-                      id="undefined_list_0"
-                      role="option"
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-label="Option 2"
-                      aria-selected="false"
-                      id="undefined_list_1"
-                      role="option"
-                    >
-                      2
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position:relative"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="Option 1"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Option 1
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    39
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    40
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    41
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    42
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    43
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    44
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    45
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    46
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    47
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    48
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    49
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    50
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    51
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    52
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    53
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    54
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    55
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    56
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    57
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    58
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    59
+                                  </div>
+                                </li>
+                              </ul>
+                              <ul
+                                class="ant-picker-time-panel-column"
+                                style="position:relative"
+                              >
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    00
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    01
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    02
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    03
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    04
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    05
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    06
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    07
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    08
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    09
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    10
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    11
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    12
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    13
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    14
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    15
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    16
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    17
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    18
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    19
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    20
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    21
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    22
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    23
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    24
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    25
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    26
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    27
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    28
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    29
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    30
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    31
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    32
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    33
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    34
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    35
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    36
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    37
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    38
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    39
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    40
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    41
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    42
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    43
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    44
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    45
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    46
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    47
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    48
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    49
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    50
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    51
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    52
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    53
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    54
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    55
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    56
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    57
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    58
+                                  </div>
+                                </li>
+                                <li
+                                  class="ant-picker-time-panel-cell"
+                                >
+                                  <div
+                                    class="ant-picker-time-panel-cell-inner"
+                                  >
+                                    59
+                                  </div>
+                                </li>
+                              </ul>
                             </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Option 2"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Option 2
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="Option 3"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Option 3
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Validating"
-      >
-        Validating
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm Cascader
-              </span>
-            </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-cascader-dropdown"
-                style="opacity:0;min-width:auto"
-              >
-                <div>
-                  <div
-                    class="ant-cascader-menus"
-                  >
-                    <ul
-                      class="ant-cascader-menu"
-                      role="menu"
+                    <div
+                      class="ant-picker-footer"
                     >
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item"
-                        data-path-key="xx"
-                        role="menuitemcheckbox"
-                        title="xx"
+                      <ul
+                        class="ant-picker-ranges"
                       >
-                        <div
-                          class="ant-cascader-menu-item-content"
+                        <li
+                          class="ant-picker-ok"
                         >
-                          xx
-                        </div>
-                      </li>
-                    </ul>
+                          <button
+                            class="ant-btn ant-btn-primary ant-btn-sm"
+                            disabled=""
+                            type="button"
+                          >
+                            <span>
+                              OK
+                            </span>
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>
             </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
           </div>
         </div>
       </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Something breaks the rule.
-        </div>
-      </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-warning"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_time-picker"
+          title="TimePicker"
+        >
+          TimePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            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"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              class="ant-picker"
             >
-              <span
-                class="ant-select-selection-search"
+              <div
+                class="ant-picker-input"
               >
                 <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
                   autocomplete="off"
-                  class="ant-select-selection-search-input"
+                  id="time_related_controls_time-picker"
+                  placeholder="Select time"
                   readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
+                  size="10"
+                  title=""
                   value=""
                 />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm TreeSelect
-              </span>
+                <span
+                  class="ant-picker-suffix"
+                >
+                  <span
+                    aria-label="clock-circle"
+                    class="anticon anticon-clock-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="clock-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                      />
+                      <path
+                        d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
             </div>
             <div>
               <div
-                class="ant-select-dropdown ant-tree-select-dropdown"
+                class="ant-picker-dropdown"
                 style="opacity:0"
               >
-                <div>
-                  <div>
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
                     <div
-                      class="ant-select-tree"
-                      role="tree"
+                      class="ant-picker-time-panel"
                     >
-                      <div>
-                        <input
-                          aria-label="for screen reader"
-                          disabled=""
-                          style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
-                          value=""
-                        />
-                      </div>
                       <div
+                        class="ant-picker-content"
+                      >
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                        </ul>
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              24
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              25
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              26
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              27
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              28
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              29
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              30
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              31
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              32
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              33
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              34
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              35
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              36
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              37
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              38
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              39
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              40
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              41
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              42
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              43
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              44
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              45
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              46
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              47
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              48
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              49
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              50
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              51
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              52
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              53
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              54
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              55
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              56
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              57
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              58
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              59
+                            </div>
+                          </li>
+                        </ul>
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              24
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              25
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              26
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              27
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              28
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              29
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              30
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              31
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              32
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              33
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              34
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              35
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              36
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              37
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              38
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              39
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              40
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              41
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              42
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              43
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              44
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              45
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              46
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              47
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              48
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              49
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              50
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              51
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              52
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              53
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              54
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              55
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              56
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              57
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              58
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              59
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <ul
+                        class="ant-picker-ranges"
+                      >
+                        <li
+                          class="ant-picker-now"
+                        >
+                          <a
+                            class="ant-picker-now-btn"
+                          >
+                            Now
+                          </a>
+                        </li>
+                        <li
+                          class="ant-picker-ok"
+                        >
+                          <button
+                            class="ant-btn ant-btn-primary ant-btn-sm"
+                            disabled=""
+                            type="button"
+                          >
+                            <span>
+                              OK
+                            </span>
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/useWatch.md extend context correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-vertical"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="name"
+            title="Name (Watch to trigger rerender)"
+          >
+            Name (Watch to trigger rerender)
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="name"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="age"
+            title="Age (Not Watch)"
+          >
+            Age (Not Watch)
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+              >
+                <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"
-                        class="ant-select-tree-treenode"
-                        style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                        data-icon="up"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
                       >
-                        <div
-                          class="ant-select-tree-indent"
-                        >
-                          <div
-                            class="ant-select-tree-indent-unit"
-                          />
-                        </div>
+                        <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"
+                    id="age"
+                    role="spinbutton"
+                    step="1"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      Name Value: 
+    </pre>
+  </article>,
+]
+`;
+
+exports[`renders ./components/form/demo/validate-other.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="validate_other"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Plain Text"
+        >
+          Plain Text
+        </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"
+          >
+            <span
+              class="ant-form-text"
+            >
+              China
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_select"
+          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-has-feedback ant-select-single ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="validate_other_select_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="validate_other_select_list"
+                    aria-haspopup="listbox"
+                    aria-owns="validate_other_select_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="validate_other_select"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Please select a country
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="validate_other_select_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="China"
+                        aria-selected="false"
+                        id="validate_other_select_list_0"
+                        role="option"
+                      >
+                        china
                       </div>
                       <div
-                        class="ant-select-tree-list"
-                        style="position:relative"
+                        aria-label="U.S.A"
+                        aria-selected="false"
+                        id="validate_other_select_list_1"
+                        role="option"
                       >
-                        <div
-                          class="ant-select-tree-list-holder"
-                          style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                        >
-                          <div>
+                        usa
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
                             <div
-                              class="ant-select-tree-list-holder-inner"
-                              style="display:flex;flex-direction:column"
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="China"
                             >
                               <div
-                                aria-grabbed="false"
-                                class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
-                                draggable="false"
+                                class="ant-select-item-option-content"
                               >
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-tree-indent"
-                                />
-                                <span
-                                  class="ant-select-tree-switcher ant-select-tree-switcher-noop"
-                                />
-                                <span
-                                  class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
-                                  title="xx"
-                                >
-                                  <span
-                                    class="ant-select-tree-title"
-                                  >
-                                    xx
-                                  </span>
-                                </span>
+                                China
                               </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="U.S.A"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                U.S.A
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
                             </div>
                           </div>
                         </div>
@@ -23903,43 +18804,20 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                   </div>
                 </div>
               </div>
-            </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="down"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -23947,1276 +18825,165 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      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>
-            </span>
+            </div>
           </div>
         </div>
       </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-warning"
-          role="alert"
-        >
-          Need to be checked
-        </div>
-      </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
-    style="margin-bottom:0"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="inline"
-      >
-        inline
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_select-multiple"
+          title="Select[multiple]"
+        >
+          Select[multiple]
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-            style="display:inline-block;width:calc(50% - 12px)"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-col ant-form-item-control"
+              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
               <div
-                class="ant-form-item-control-input"
+                class="ant-select-selector"
               >
                 <div
-                  class="ant-form-item-control-input-content"
+                  class="ant-select-selection-overflow"
                 >
                   <div
-                    class="ant-picker ant-picker-status-error"
+                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                    style="opacity:1"
                   >
                     <div
-                      class="ant-picker-input"
+                      class="ant-select-selection-search"
+                      style="width:0"
                     >
                       <input
+                        aria-activedescendant="validate_other_select-multiple_list_0"
+                        aria-autocomplete="list"
+                        aria-controls="validate_other_select-multiple_list"
+                        aria-haspopup="listbox"
+                        aria-owns="validate_other_select-multiple_list"
                         autocomplete="off"
-                        placeholder="Select date"
+                        class="ant-select-selection-search-input"
+                        id="validate_other_select-multiple"
                         readonly=""
-                        size="12"
-                        title=""
+                        role="combobox"
+                        style="opacity:0"
+                        type="search"
+                        unselectable="on"
                         value=""
                       />
                       <span
-                        class="ant-picker-suffix"
+                        aria-hidden="true"
+                        class="ant-select-selection-search-mirror"
                       >
-                        <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>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Please select favourite colors
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
                   <div>
                     <div
-                      class="ant-picker-dropdown"
-                      style="opacity:0"
+                      id="validate_other_select-multiple_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
                     >
                       <div
-                        class="ant-picker-panel-container"
+                        aria-label="Red"
+                        aria-selected="false"
+                        id="validate_other_select-multiple_list_0"
+                        role="option"
                       >
-                        <div
-                          class="ant-picker-panel ant-picker-panel-focused"
-                          tabindex="-1"
-                        >
-                          <div
-                            class="ant-picker-date-panel"
-                          >
-                            <div
-                              class="ant-picker-header"
-                            >
-                              <button
-                                class="ant-picker-header-super-prev-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-super-prev-icon"
-                                />
-                              </button>
-                              <button
-                                class="ant-picker-header-prev-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-prev-icon"
-                                />
-                              </button>
-                              <div
-                                class="ant-picker-header-view"
-                              >
-                                <button
-                                  class="ant-picker-month-btn"
-                                  tabindex="-1"
-                                  type="button"
-                                >
-                                  Nov
-                                </button>
-                                <button
-                                  class="ant-picker-year-btn"
-                                  tabindex="-1"
-                                  type="button"
-                                >
-                                  2016
-                                </button>
-                              </div>
-                              <button
-                                class="ant-picker-header-next-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-next-icon"
-                                />
-                              </button>
-                              <button
-                                class="ant-picker-header-super-next-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-super-next-icon"
-                                />
-                              </button>
-                            </div>
-                            <div
-                              class="ant-picker-body"
-                            >
-                              <table
-                                class="ant-picker-content"
-                              >
-                                <thead>
-                                  <tr>
-                                    <th>
-                                      Su
-                                    </th>
-                                    <th>
-                                      Mo
-                                    </th>
-                                    <th>
-                                      Tu
-                                    </th>
-                                    <th>
-                                      We
-                                    </th>
-                                    <th>
-                                      Th
-                                    </th>
-                                    <th>
-                                      Fr
-                                    </th>
-                                    <th>
-                                      Sa
-                                    </th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-10-30"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        30
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-end"
-                                      title="2016-10-31"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        31
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                      title="2016-11-01"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        1
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-02"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        2
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-03"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        3
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-04"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        4
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-05"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        5
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-06"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        6
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-07"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        7
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-08"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        8
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-09"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        9
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-10"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        10
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-11"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        11
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-12"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        12
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-13"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        13
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-14"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        14
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-15"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        15
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-16"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        16
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-17"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        17
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-18"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        18
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-19"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        19
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-20"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        20
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-21"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        21
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                                      title="2016-11-22"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        22
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-23"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        23
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-24"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        24
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-25"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        25
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-26"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        26
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-27"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        27
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-28"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        28
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-29"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        29
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                      title="2016-11-30"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        30
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-start"
-                                      title="2016-12-01"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        1
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-02"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        2
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-03"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        3
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-04"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        4
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-05"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        5
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-06"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        6
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-07"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        7
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-08"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        8
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-09"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        9
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-10"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        10
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                            </div>
-                          </div>
-                          <div
-                            class="ant-picker-footer"
-                          >
-                            <a
-                              class="ant-picker-today-btn"
-                            >
-                              Today
-                            </a>
-                          </div>
-                        </div>
+                        red
+                      </div>
+                      <div
+                        aria-label="Green"
+                        aria-selected="false"
+                        id="validate_other_select-multiple_list_1"
+                        role="option"
+                      >
+                        green
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="ant-form-item-explain ant-form-item-explain-connected"
-              >
-                <div
-                  class="ant-form-item-explain-error"
-                  role="alert"
-                >
-                  Please select right date
-                </div>
-              </div>
-            </div>
-          </div>
-          <span
-            style="display:inline-block;width:24px;line-height:32px;text-align:center"
-          >
-            -
-          </span>
-          <div
-            class="ant-row ant-form-item"
-            style="display:inline-block;width:calc(50% - 12px)"
-          >
-            <div
-              class="ant-col ant-form-item-control"
-            >
-              <div
-                class="ant-form-item-control-input"
-              >
-                <div
-                  class="ant-form-item-control-input-content"
-                >
-                  <div
-                    class="ant-picker"
-                  >
                     <div
-                      class="ant-picker-input"
-                    >
-                      <input
-                        autocomplete="off"
-                        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
-                      class="ant-picker-dropdown"
-                      style="opacity:0"
+                      class="rc-virtual-list"
+                      style="position:relative"
                     >
                       <div
-                        class="ant-picker-panel-container"
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
                       >
-                        <div
-                          class="ant-picker-panel ant-picker-panel-focused"
-                          tabindex="-1"
-                        >
+                        <div>
                           <div
-                            class="ant-picker-date-panel"
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
                           >
                             <div
-                              class="ant-picker-header"
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Red"
                             >
-                              <button
-                                class="ant-picker-header-super-prev-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-super-prev-icon"
-                                />
-                              </button>
-                              <button
-                                class="ant-picker-header-prev-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-prev-icon"
-                                />
-                              </button>
                               <div
-                                class="ant-picker-header-view"
+                                class="ant-select-item-option-content"
                               >
-                                <button
-                                  class="ant-picker-month-btn"
-                                  tabindex="-1"
-                                  type="button"
-                                >
-                                  Nov
-                                </button>
-                                <button
-                                  class="ant-picker-year-btn"
-                                  tabindex="-1"
-                                  type="button"
-                                >
-                                  2016
-                                </button>
+                                Red
                               </div>
-                              <button
-                                class="ant-picker-header-next-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-next-icon"
-                                />
-                              </button>
-                              <button
-                                class="ant-picker-header-super-next-btn"
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="ant-picker-super-next-icon"
-                                />
-                              </button>
                             </div>
                             <div
-                              class="ant-picker-body"
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Green"
                             >
-                              <table
-                                class="ant-picker-content"
+                              <div
+                                class="ant-select-item-option-content"
                               >
-                                <thead>
-                                  <tr>
-                                    <th>
-                                      Su
-                                    </th>
-                                    <th>
-                                      Mo
-                                    </th>
-                                    <th>
-                                      Tu
-                                    </th>
-                                    <th>
-                                      We
-                                    </th>
-                                    <th>
-                                      Th
-                                    </th>
-                                    <th>
-                                      Fr
-                                    </th>
-                                    <th>
-                                      Sa
-                                    </th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-10-30"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        30
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-end"
-                                      title="2016-10-31"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        31
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                                      title="2016-11-01"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        1
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-02"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        2
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-03"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        3
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-04"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        4
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-05"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        5
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-06"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        6
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-07"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        7
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-08"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        8
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-09"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        9
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-10"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        10
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-11"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        11
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-12"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        12
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-13"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        13
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-14"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        14
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-15"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        15
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-16"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        16
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-17"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        17
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-18"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        18
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-19"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        19
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-20"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        20
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-21"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        21
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                                      title="2016-11-22"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        22
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-23"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        23
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-24"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        24
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-25"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        25
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-26"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        26
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-27"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        27
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-28"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        28
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-in-view"
-                                      title="2016-11-29"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        29
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                                      title="2016-11-30"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        30
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell ant-picker-cell-start"
-                                      title="2016-12-01"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        1
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-02"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        2
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-03"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        3
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-04"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        4
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-05"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        5
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-06"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        6
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-07"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        7
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-08"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        8
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-09"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        9
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="ant-picker-cell"
-                                      title="2016-12-10"
-                                    >
-                                      <div
-                                        class="ant-picker-cell-inner"
-                                      >
-                                        10
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
+                                Green
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="ant-picker-footer"
-                          >
-                            <a
-                              class="ant-picker-today-btn"
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Blue"
                             >
-                              Today
-                            </a>
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Blue
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -25231,33 +18998,32 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-success ant-input-number-affix-wrapper-has-feedback"
-            style="width:100%"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
+              class="ant-input-number ant-input-number-in-form-item"
             >
               <div
                 class="ant-input-number-handler-wrap"
@@ -25321,40 +19087,22 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 class="ant-input-number-input-wrap"
               >
                 <input
+                  aria-valuemax="10"
+                  aria-valuemin="1"
+                  aria-valuenow="3"
                   autocomplete="off"
                   class="ant-input-number-input"
+                  id="validate_other_input-number"
                   role="spinbutton"
                   step="1"
-                  value=""
+                  value="3"
                 />
               </div>
             </div>
             <span
-              class="ant-input-number-suffix"
+              class="ant-form-text"
             >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
+               machines
             </span>
           </div>
         </div>
@@ -25362,534 +19110,1091 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          for="validate_other_switch"
+          title="Switch"
         >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              placeholder="with allowClear"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
+          Switch
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              placeholder="with input password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-              >
-                <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              placeholder="with input password and allowClear"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-status-error ant-mentions-affix-wrapper-has-feedback"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-mentions ant-mentions-status-error"
+            <button
+              aria-checked="false"
+              class="ant-switch"
+              id="validate_other_switch"
+              role="switch"
+              type="button"
             >
-              <textarea
-                class="rc-textarea"
-                rows="1"
-              />
-            </div>
-            <span
-              class="ant-mentions-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
-            data-count="0"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-            >
-              <textarea
-                class="ant-input ant-input-status-error"
+              <div
+                class="ant-switch-handle"
               />
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-                role="button"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="ant-input-textarea-suffix"
+                class="ant-switch-inner"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_slider"
+          title="Slider"
+        >
+          Slider
+        </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-slider ant-slider-horizontal ant-slider-with-marks"
             >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+              <div
+                class="ant-slider-rail"
+              />
+              <div
+                class="ant-slider-track"
+                style="left:0%;width:0%"
+              />
+              <div
+                class="ant-slider-step"
               >
                 <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
+                  class="ant-slider-dot ant-slider-dot-active"
+                  style="left:0%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:20%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:40%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:60%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:80%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:100%;transform:translateX(-50%)"
+                />
+              </div>
+              <div
+                aria-disabled="false"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="0"
+                class="ant-slider-handle"
+                role="slider"
+                style="left:0%;transform:translateX(-50%)"
+                tabindex="0"
+              />
+              <div>
+                <div
+                  class="ant-tooltip ant-slider-tooltip"
+                  style="opacity:0"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <div
+                    class="ant-tooltip-content"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
+                    <div
+                      class="ant-tooltip-arrow"
+                    >
+                      <span
+                        class="ant-tooltip-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    >
+                      0
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="ant-slider-mark"
+              >
+                <span
+                  class="ant-slider-mark-text ant-slider-mark-text-active"
+                  style="left:0%;transform:translateX(-50%)"
+                >
+                  A
                 </span>
-              </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:20%;transform:translateX(-50%)"
+                >
+                  B
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:40%;transform:translateX(-50%)"
+                >
+                  C
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:60%;transform:translateX(-50%)"
+                >
+                  D
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:80%;transform:translateX(-50%)"
+                >
+                  E
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:100%;transform:translateX(-50%)"
+                >
+                  F
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_radio-group"
+          title="Radio.Group"
+        >
+          Radio.Group
+        </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"
+              id="validate_other_radio-group"
+            >
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="a"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 1
+                </span>
+              </label>
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="b"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 2
+                </span>
+              </label>
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="c"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 3
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_radio-button"
+          title="Radio.Button"
+        >
+          Radio.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"
+          >
+            <div
+              class="ant-radio-group ant-radio-group-outline"
+              id="validate_other_radio-button"
+            >
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="a"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 1
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="b"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 2
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="c"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 3
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_checkbox-group"
+          title="Checkbox.Group"
+        >
+          Checkbox.Group
+        </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-checkbox-group"
+              id="validate_other_checkbox-group"
+            >
+              <div
+                class="ant-row"
+              >
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox ant-checkbox-checked"
+                    >
+                      <input
+                        checked=""
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="A"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      A
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
+                    >
+                      <input
+                        checked=""
+                        class="ant-checkbox-input"
+                        disabled=""
+                        type="checkbox"
+                        value="B"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      B
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="C"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      C
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="D"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      D
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="E"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      E
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="F"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      F
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_rate"
+          title="Rate"
+        >
+          Rate
+        </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"
+          >
+            <ul
+              class="ant-rate"
+              role="radiogroup"
+              tabindex="0"
+            >
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="1"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="2"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="3"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-zero"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="4"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-zero"
+              >
+                <div
+                  aria-checked="false"
+                  aria-posinset="5"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_upload"
+          title="Upload"
+        >
+          Upload
+        </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"
+          >
+            <span
+              class=""
+            >
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-picture"
+              >
+                <span
+                  class="ant-upload"
+                  role="button"
+                  tabindex="0"
+                >
+                  <input
+                    accept=""
+                    id="validate_other_upload"
+                    style="display:none"
+                    type="file"
+                  />
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span
+                      aria-label="upload"
+                      class="anticon anticon-upload"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="upload"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <span>
+                      Click to upload
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-picture"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-form-item-extra"
+        >
+          longgggggggggggggggggggggggggggggggggg
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Dragger"
+        >
+          Dragger
+        </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"
+          >
+            <span>
+              <div
+                class="ant-upload ant-upload-drag"
+              >
+                <span
+                  class="ant-upload ant-upload-btn"
+                  role="button"
+                  tabindex="0"
+                >
+                  <input
+                    accept=""
+                    id="validate_other_dragger"
+                    style="display:none"
+                    type="file"
+                  />
+                  <div
+                    class="ant-upload-drag-container"
+                  >
+                    <p
+                      class="ant-upload-drag-icon"
+                    >
+                      <span
+                        aria-label="inbox"
+                        class="anticon anticon-inbox"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="inbox"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
+                          />
+                        </svg>
+                      </span>
+                    </p>
+                    <p
+                      class="ant-upload-text"
+                    >
+                      Click or drag file to this area to upload
+                    </p>
+                    <p
+                      class="ant-upload-hint"
+                    >
+                      Support for a single or bulk upload.
+                    </p>
+                  </div>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-text"
+              />
             </span>
           </div>
         </div>
       </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should have something
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/warning-only.md extend context correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-vertical"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="url"
-        title="URL"
-      >
-        URL
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="url"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-space ant-space-horizontal ant-space-align-center"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-space-item"
-              style="margin-right:8px"
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
             >
-              <button
-                class="ant-btn ant-btn-primary"
-                type="submit"
-              >
-                <span>
-                  Submit
-                </span>
-              </button>
-            </div>
-            <div
-              class="ant-space-item"
-            >
-              <button
-                class="ant-btn ant-btn-default"
-                type="button"
-              >
-                <span>
-                  Fill
-                </span>
-              </button>
-            </div>
+              <span>
+                Submit
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -25898,53 +20203,86 @@ exports[`renders ./components/form/demo/warning-only.md extend context correctly
 </form>
 `;
 
-exports[`renders ./components/form/demo/without-form-create.md extend context correctly 1`] = `
+exports[`renders ./components/form/demo/validate-static.md extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help"
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-col-7 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Prime between 8 & 12"
-      >
-        Prime between 8 & 12
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-12 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-input-number-handler-wrap"
+            <input
+              class="ant-input ant-input-status-error"
+              id="error"
+              placeholder="unavailable choice"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning"
             >
               <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
+                class="ant-input-prefix"
               >
                 <span
-                  aria-label="up"
-                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  aria-label="smile"
+                  class="anticon anticon-smile"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="up"
+                    data-icon="smile"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -25952,21 +20290,3800 @@ exports[`renders ./components/form/demo/without-form-create.md extend context co
                     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"
+                      d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
                     />
                   </svg>
                 </span>
               </span>
+              <input
+                class="ant-input"
+                id="warning"
+                placeholder="Warning"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Validating"
+        >
+          Validating
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-validating ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="validating"
+                placeholder="I'm the content is being validated"
+                type="text"
+                value=""
+              />
               <span
-                aria-disabled="false"
-                aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down"
-                role="button"
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
+                >
+                  <span
+                    aria-label="loading"
+                    class="anticon anticon-loading anticon-spin"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="loading"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="success"
+                placeholder="I'm the content"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="warning2"
+                placeholder="Warning"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="error2"
+                placeholder="unavailable choice"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-status-success ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  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
+                    class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                  >
+                    <span
+                      aria-label="check-circle"
+                      class="anticon anticon-check-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="check-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div>
+              <div
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="ant-picker-date-panel"
+                    >
+                      <div
+                        class="ant-picker-header"
+                      >
+                        <button
+                          class="ant-picker-header-super-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-prev-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-prev-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-prev-icon"
+                          />
+                        </button>
+                        <div
+                          class="ant-picker-header-view"
+                        >
+                          <button
+                            class="ant-picker-month-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            Nov
+                          </button>
+                          <button
+                            class="ant-picker-year-btn"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            2016
+                          </button>
+                        </div>
+                        <button
+                          class="ant-picker-header-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-next-icon"
+                          />
+                        </button>
+                        <button
+                          class="ant-picker-header-super-next-btn"
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="ant-picker-super-next-icon"
+                          />
+                        </button>
+                      </div>
+                      <div
+                        class="ant-picker-body"
+                      >
+                        <table
+                          class="ant-picker-content"
+                        >
+                          <thead>
+                            <tr>
+                              <th>
+                                Su
+                              </th>
+                              <th>
+                                Mo
+                              </th>
+                              <th>
+                                Tu
+                              </th>
+                              <th>
+                                We
+                              </th>
+                              <th>
+                                Th
+                              </th>
+                              <th>
+                                Fr
+                              </th>
+                              <th>
+                                Sa
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-10-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end"
+                                title="2016-10-31"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  31
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                title="2016-11-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-11"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  11
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-12"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  12
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-13"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  13
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-14"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  14
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-15"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  15
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-16"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  16
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-17"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  17
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-18"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  18
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-19"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  19
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-20"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  20
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-21"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  21
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                title="2016-11-22"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  22
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-23"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  23
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-24"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  24
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-25"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  25
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-26"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  26
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-27"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  27
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-28"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  28
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-in-view"
+                                title="2016-11-29"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  29
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                title="2016-11-30"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  30
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell ant-picker-cell-start"
+                                title="2016-12-01"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  1
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-02"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  2
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-03"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  3
+                                </div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-04"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  4
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-05"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  5
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-06"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  6
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-07"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  7
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-08"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  8
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-09"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  9
+                                </div>
+                              </td>
+                              <td
+                                class="ant-picker-cell"
+                                title="2016-12-10"
+                              >
+                                <div
+                                  class="ant-picker-cell-inner"
+                                >
+                                  10
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <a
+                        class="ant-picker-today-btn"
+                      >
+                        Today
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  placeholder="Select time"
+                  readonly=""
+                  size="10"
+                  title=""
+                  value=""
+                />
+                <span
+                  class="ant-picker-suffix"
+                >
+                  <span
+                    aria-label="clock-circle"
+                    class="anticon anticon-clock-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="clock-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                      />
+                      <path
+                        d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                  >
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div>
+              <div
+                class="ant-picker-dropdown"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel ant-picker-panel-focused"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="ant-picker-time-panel"
+                    >
+                      <div
+                        class="ant-picker-content"
+                      >
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                        </ul>
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              24
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              25
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              26
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              27
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              28
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              29
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              30
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              31
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              32
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              33
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              34
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              35
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              36
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              37
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              38
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              39
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              40
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              41
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              42
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              43
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              44
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              45
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              46
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              47
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              48
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              49
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              50
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              51
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              52
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              53
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              54
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              55
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              56
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              57
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              58
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              59
+                            </div>
+                          </li>
+                        </ul>
+                        <ul
+                          class="ant-picker-time-panel-column"
+                          style="position:relative"
+                        >
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              00
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              01
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              02
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              03
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              04
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              05
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              06
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              07
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              08
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              09
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              10
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              11
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              12
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              13
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              14
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              15
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              16
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              17
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              18
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              19
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              20
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              21
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              22
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              23
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              24
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              25
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              26
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              27
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              28
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              29
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              30
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              31
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              32
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              33
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              34
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              35
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              36
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              37
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              38
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              39
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              40
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              41
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              42
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              43
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              44
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              45
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              46
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              47
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              48
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              49
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              50
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              51
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              52
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              53
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              54
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              55
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              56
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              57
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              58
+                            </div>
+                          </li>
+                          <li
+                            class="ant-picker-time-panel-cell"
+                          >
+                            <div
+                              class="ant-picker-time-panel-cell-inner"
+                            >
+                              59
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                    <div
+                      class="ant-picker-footer"
+                    >
+                      <ul
+                        class="ant-picker-ranges"
+                      >
+                        <li
+                          class="ant-picker-now"
+                        >
+                          <a
+                            class="ant-picker-now-btn"
+                          >
+                            Now
+                          </a>
+                        </li>
+                        <li
+                          class="ant-picker-ok"
+                        >
+                          <button
+                            class="ant-btn ant-btn-primary ant-btn-sm"
+                            disabled=""
+                            type="button"
+                          >
+                            <span>
+                              OK
+                            </span>
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  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"
+                  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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+            <div>
+              <div
+                class="ant-picker-dropdown ant-picker-dropdown-range"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+                  style="min-width:0"
+                >
+                  <div
+                    class="ant-picker-range-arrow"
+                    style="left:0"
+                  />
+                  <div
+                    class="ant-picker-panel-container"
+                    style="margin-left:0"
+                  >
+                    <div
+                      class="ant-picker-panels"
+                    >
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="ant-picker-date-panel"
+                        >
+                          <div
+                            class="ant-picker-header"
+                          >
+                            <button
+                              class="ant-picker-header-super-prev-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-prev-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-prev-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-prev-icon"
+                              />
+                            </button>
+                            <div
+                              class="ant-picker-header-view"
+                            >
+                              <button
+                                class="ant-picker-month-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                Nov
+                              </button>
+                              <button
+                                class="ant-picker-year-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                2016
+                              </button>
+                            </div>
+                            <button
+                              class="ant-picker-header-next-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-next-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-super-next-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-next-icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="ant-picker-body"
+                          >
+                            <table
+                              class="ant-picker-content"
+                            >
+                              <thead>
+                                <tr>
+                                  <th>
+                                    Su
+                                  </th>
+                                  <th>
+                                    Mo
+                                  </th>
+                                  <th>
+                                    Tu
+                                  </th>
+                                  <th>
+                                    We
+                                  </th>
+                                  <th>
+                                    Th
+                                  </th>
+                                  <th>
+                                    Fr
+                                  </th>
+                                  <th>
+                                    Sa
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-10-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end"
+                                    title="2016-10-31"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      31
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                    title="2016-11-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-11"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      11
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-12"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      12
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-13"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      13
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-14"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      14
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-15"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      15
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-16"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      16
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-17"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      17
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-18"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      18
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-19"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      19
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-20"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      20
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-21"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      21
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                    title="2016-11-22"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      22
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-23"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      23
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-24"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      24
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-25"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      25
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-26"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      26
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-11-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                    title="2016-11-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start"
+                                    title="2016-12-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-12-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="ant-picker-panel ant-picker-panel-focused"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="ant-picker-date-panel"
+                        >
+                          <div
+                            class="ant-picker-header"
+                          >
+                            <button
+                              class="ant-picker-header-super-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-prev-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-prev-btn"
+                              style="visibility:hidden"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-prev-icon"
+                              />
+                            </button>
+                            <div
+                              class="ant-picker-header-view"
+                            >
+                              <button
+                                class="ant-picker-month-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                Dec
+                              </button>
+                              <button
+                                class="ant-picker-year-btn"
+                                tabindex="-1"
+                                type="button"
+                              >
+                                2016
+                              </button>
+                            </div>
+                            <button
+                              class="ant-picker-header-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-next-icon"
+                              />
+                            </button>
+                            <button
+                              class="ant-picker-header-super-next-btn"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="ant-picker-super-next-icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="ant-picker-body"
+                          >
+                            <table
+                              class="ant-picker-content"
+                            >
+                              <thead>
+                                <tr>
+                                  <th>
+                                    Su
+                                  </th>
+                                  <th>
+                                    Mo
+                                  </th>
+                                  <th>
+                                    Tu
+                                  </th>
+                                  <th>
+                                    We
+                                  </th>
+                                  <th>
+                                    Th
+                                  </th>
+                                  <th>
+                                    Fr
+                                  </th>
+                                  <th>
+                                    Sa
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2016-11-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end"
+                                    title="2016-11-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                    title="2016-12-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-08"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      8
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-09"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      9
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-10"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      10
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-11"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      11
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-12"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      12
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-13"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      13
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-14"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      14
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-15"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      15
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-16"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      16
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-17"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      17
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-18"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      18
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-19"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      19
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-20"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      20
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-21"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      21
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-22"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      22
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-23"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      23
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-24"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      24
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-25"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      25
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-26"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      26
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-27"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      27
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-28"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      28
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-29"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      29
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-in-view"
+                                    title="2016-12-30"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      30
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                    title="2016-12-31"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      31
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td
+                                    class="ant-picker-cell ant-picker-cell-start"
+                                    title="2017-01-01"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      1
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-02"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      2
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-03"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      3
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-04"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      4
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-05"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-06"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      6
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="ant-picker-cell"
+                                    title="2017-01-07"
+                                  >
+                                    <div
+                                      class="ant-picker-cell-inner"
+                                    >
+                                      7
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            >
+              <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-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm Select
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div
+                      id="undefined_list"
+                      role="listbox"
+                      style="height:0;width:0;overflow:hidden"
+                    >
+                      <div
+                        aria-label="Option 1"
+                        aria-selected="false"
+                        id="undefined_list_0"
+                        role="option"
+                      >
+                        1
+                      </div>
+                      <div
+                        aria-label="Option 2"
+                        aria-selected="false"
+                        id="undefined_list_1"
+                        role="option"
+                      >
+                        2
+                      </div>
+                    </div>
+                    <div
+                      class="rc-virtual-list"
+                      style="position:relative"
+                    >
+                      <div
+                        class="rc-virtual-list-holder"
+                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      >
+                        <div>
+                          <div
+                            class="rc-virtual-list-holder-inner"
+                            style="display:flex;flex-direction:column"
+                          >
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                              title="Option 1"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Option 1
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Option 2"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Option 2
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                            <div
+                              aria-selected="false"
+                              class="ant-select-item ant-select-item-option"
+                              title="Option 3"
+                            >
+                              <div
+                                class="ant-select-item-option-content"
+                              >
+                                Option 3
+                              </div>
+                              <span
+                                aria-hidden="true"
+                                class="ant-select-item-option-state"
+                                style="user-select:none;-webkit-user-select:none"
+                                unselectable="on"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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-input-number-handler-down-inner"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
@@ -25983,33 +24100,2424 @@ exports[`renders ./components/form/demo/without-form-create.md extend context co
                     />
                   </svg>
                 </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </span>
             </div>
-            <div
-              class="ant-input-number-input-wrap"
-            >
-              <input
-                aria-valuemax="12"
-                aria-valuemin="8"
-                aria-valuenow="11"
-                autocomplete="off"
-                class="ant-input-number-input"
-                role="spinbutton"
-                step="1"
-                value="11"
-              />
-            </div>
           </div>
         </div>
       </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
       <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Validating"
+        >
+          Validating
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
       >
         <div
-          class=""
-          role="alert"
+          class="ant-form-item-control-input"
         >
-          A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              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"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm Cascader
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-cascader-dropdown"
+                  style="opacity:0;min-width:auto"
+                >
+                  <div>
+                    <div
+                      class="ant-cascader-menus"
+                    >
+                      <ul
+                        class="ant-cascader-menu"
+                        role="menu"
+                      >
+                        <li
+                          aria-checked="false"
+                          class="ant-cascader-menu-item"
+                          data-path-key="xx"
+                          role="menuitemcheckbox"
+                          title="xx"
+                        >
+                          <div
+                            class="ant-cascader-menu-item-content"
+                          >
+                            xx
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <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-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm TreeSelect
+                </span>
+              </div>
+              <div>
+                <div
+                  class="ant-select-dropdown ant-tree-select-dropdown"
+                  style="opacity:0"
+                >
+                  <div>
+                    <div>
+                      <div
+                        class="ant-select-tree"
+                        role="tree"
+                      >
+                        <div>
+                          <input
+                            aria-label="for screen reader"
+                            disabled=""
+                            style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          aria-hidden="true"
+                          class="ant-select-tree-treenode"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                        >
+                          <div
+                            class="ant-select-tree-indent"
+                          >
+                            <div
+                              class="ant-select-tree-indent-unit"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="ant-select-tree-list"
+                          style="position:relative"
+                        >
+                          <div
+                            class="ant-select-tree-list-holder"
+                            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                          >
+                            <div>
+                              <div
+                                class="ant-select-tree-list-holder-inner"
+                                style="display:flex;flex-direction:column"
+                              >
+                                <div
+                                  aria-grabbed="false"
+                                  class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                                  draggable="false"
+                                >
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-tree-indent"
+                                  />
+                                  <span
+                                    class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                                  />
+                                  <span
+                                    class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                                    title="xx"
+                                  >
+                                    <span
+                                      class="ant-select-tree-title"
+                                    >
+                                      xx
+                                    </span>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+    style="margin-bottom:0"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="inline"
+        >
+          inline
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+              style="display:inline-block;width:calc(50% - 12px)"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col 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-status-error"
+                      >
+                        <div
+                          class="ant-picker-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            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
+                          class="ant-picker-dropdown"
+                          style="opacity:0"
+                        >
+                          <div
+                            class="ant-picker-panel-container"
+                          >
+                            <div
+                              class="ant-picker-panel ant-picker-panel-focused"
+                              tabindex="-1"
+                            >
+                              <div
+                                class="ant-picker-date-panel"
+                              >
+                                <div
+                                  class="ant-picker-header"
+                                >
+                                  <button
+                                    class="ant-picker-header-super-prev-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-super-prev-icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ant-picker-header-prev-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-prev-icon"
+                                    />
+                                  </button>
+                                  <div
+                                    class="ant-picker-header-view"
+                                  >
+                                    <button
+                                      class="ant-picker-month-btn"
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      Nov
+                                    </button>
+                                    <button
+                                      class="ant-picker-year-btn"
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      2016
+                                    </button>
+                                  </div>
+                                  <button
+                                    class="ant-picker-header-next-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-next-icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ant-picker-header-super-next-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-super-next-icon"
+                                    />
+                                  </button>
+                                </div>
+                                <div
+                                  class="ant-picker-body"
+                                >
+                                  <table
+                                    class="ant-picker-content"
+                                  >
+                                    <thead>
+                                      <tr>
+                                        <th>
+                                          Su
+                                        </th>
+                                        <th>
+                                          Mo
+                                        </th>
+                                        <th>
+                                          Tu
+                                        </th>
+                                        <th>
+                                          We
+                                        </th>
+                                        <th>
+                                          Th
+                                        </th>
+                                        <th>
+                                          Fr
+                                        </th>
+                                        <th>
+                                          Sa
+                                        </th>
+                                      </tr>
+                                    </thead>
+                                    <tbody>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-10-30"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            30
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-end"
+                                          title="2016-10-31"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            31
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                          title="2016-11-01"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            1
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-02"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            2
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-03"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            3
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-04"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            4
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-05"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            5
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-06"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            6
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-07"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            7
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-08"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            8
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-09"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            9
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-10"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            10
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-11"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            11
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-12"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            12
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-13"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            13
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-14"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            14
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-15"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            15
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-16"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            16
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-17"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            17
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-18"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            18
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-19"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            19
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-20"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            20
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-21"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            21
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                          title="2016-11-22"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            22
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-23"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            23
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-24"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            24
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-25"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            25
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-26"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            26
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-27"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            27
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-28"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            28
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-29"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            29
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                          title="2016-11-30"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            30
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-start"
+                                          title="2016-12-01"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            1
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-02"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            2
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-03"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            3
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-04"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            4
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-05"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            5
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-06"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            6
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-07"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            7
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-08"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            8
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-09"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            9
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-10"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            10
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </div>
+                              </div>
+                              <div
+                                class="ant-picker-footer"
+                              >
+                                <a
+                                  class="ant-picker-today-btn"
+                                >
+                                  Today
+                                </a>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span
+              style="display:inline-block;width:24px;line-height:32px;text-align:center"
+            >
+              -
+            </span>
+            <div
+              class="ant-form-item"
+              style="display:inline-block;width:calc(50% - 12px)"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col ant-form-item-control"
+                >
+                  <div
+                    class="ant-form-item-control-input"
+                  >
+                    <div
+                      class="ant-form-item-control-input-content"
+                    >
+                      <div
+                        class="ant-picker"
+                      >
+                        <div
+                          class="ant-picker-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            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
+                          class="ant-picker-dropdown"
+                          style="opacity:0"
+                        >
+                          <div
+                            class="ant-picker-panel-container"
+                          >
+                            <div
+                              class="ant-picker-panel ant-picker-panel-focused"
+                              tabindex="-1"
+                            >
+                              <div
+                                class="ant-picker-date-panel"
+                              >
+                                <div
+                                  class="ant-picker-header"
+                                >
+                                  <button
+                                    class="ant-picker-header-super-prev-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-super-prev-icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ant-picker-header-prev-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-prev-icon"
+                                    />
+                                  </button>
+                                  <div
+                                    class="ant-picker-header-view"
+                                  >
+                                    <button
+                                      class="ant-picker-month-btn"
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      Nov
+                                    </button>
+                                    <button
+                                      class="ant-picker-year-btn"
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      2016
+                                    </button>
+                                  </div>
+                                  <button
+                                    class="ant-picker-header-next-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-next-icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ant-picker-header-super-next-btn"
+                                    tabindex="-1"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="ant-picker-super-next-icon"
+                                    />
+                                  </button>
+                                </div>
+                                <div
+                                  class="ant-picker-body"
+                                >
+                                  <table
+                                    class="ant-picker-content"
+                                  >
+                                    <thead>
+                                      <tr>
+                                        <th>
+                                          Su
+                                        </th>
+                                        <th>
+                                          Mo
+                                        </th>
+                                        <th>
+                                          Tu
+                                        </th>
+                                        <th>
+                                          We
+                                        </th>
+                                        <th>
+                                          Th
+                                        </th>
+                                        <th>
+                                          Fr
+                                        </th>
+                                        <th>
+                                          Sa
+                                        </th>
+                                      </tr>
+                                    </thead>
+                                    <tbody>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-10-30"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            30
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-end"
+                                          title="2016-10-31"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            31
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                                          title="2016-11-01"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            1
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-02"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            2
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-03"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            3
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-04"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            4
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-05"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            5
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-06"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            6
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-07"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            7
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-08"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            8
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-09"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            9
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-10"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            10
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-11"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            11
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-12"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            12
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-13"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            13
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-14"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            14
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-15"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            15
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-16"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            16
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-17"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            17
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-18"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            18
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-19"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            19
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-20"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            20
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-21"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            21
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                                          title="2016-11-22"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            22
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-23"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            23
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-24"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            24
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-25"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            25
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-26"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            26
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-27"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            27
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-28"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            28
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-in-view"
+                                          title="2016-11-29"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            29
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                                          title="2016-11-30"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            30
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell ant-picker-cell-start"
+                                          title="2016-12-01"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            1
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-02"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            2
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-03"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            3
+                                          </div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-04"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            4
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-05"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            5
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-06"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            6
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-07"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            7
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-08"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            8
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-09"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            9
+                                          </div>
+                                        </td>
+                                        <td
+                                          class="ant-picker-cell"
+                                          title="2016-12-10"
+                                        >
+                                          <div
+                                            class="ant-picker-cell-inner"
+                                          >
+                                            10
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </div>
+                              </div>
+                              <div
+                                class="ant-picker-footer"
+                              >
+                                <a
+                                  class="ant-picker-today-btn"
+                                >
+                                  Today
+                                </a>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-success ant-input-number-affix-wrapper-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
+              >
+                <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"
+                    role="spinbutton"
+                    step="1"
+                    value=""
+                  />
+                </div>
+              </div>
+              <span
+                class="ant-input-number-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                placeholder="with allowClear"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                placeholder="with input password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                placeholder="with input password and allowClear"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-status-error ant-mentions-affix-wrapper-has-feedback"
+            >
+              <div
+                class="ant-mentions ant-mentions-status-error"
+              >
+                <textarea
+                  class="rc-textarea"
+                  rows="1"
+                />
+              </div>
+              <span
+                class="ant-mentions-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
+              data-count="0"
+            >
+              <span
+                class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+              >
+                <textarea
+                  class="ant-input ant-input-status-error"
+                />
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                class="ant-input-textarea-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/warning-only.md extend context correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-vertical"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="url"
+          title="URL"
+        >
+          URL
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="url"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center"
+            >
+              <div
+                class="ant-space-item"
+                style="margin-right:8px"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="submit"
+                >
+                  <span>
+                    Submit
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Fill
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/without-form-create.md extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item ant-form-item-with-help"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-7 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Prime between 8 & 12"
+        >
+          Prime between 8 & 12
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-12 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"
+            >
+              <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
+                  aria-valuemax="12"
+                  aria-valuemin="8"
+                  aria-valuenow="11"
+                  autocomplete="off"
+                  class="ant-input-number-input"
+                  role="spinbutton"
+                  step="1"
+                  value="11"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index fd4b9174fc..ed8f3ccb4c 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -15,126 +15,38 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-0"
-              title="Field 0"
-            >
-              Field 0
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
             >
-              <div
-                class="ant-form-item-control-input-content"
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-0"
+                title="Field 0"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-0"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
+                Field 0
+              </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-1"
-              title="Field 1"
-            >
-              Field 1
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
                 <div
-                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                  class="ant-form-item-control-input-content"
                 >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="advanced_search_field-1_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="advanced_search_field-1_list"
-                        aria-haspopup="listbox"
-                        aria-owns="advanced_search_field-1_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="advanced_search_field-1"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                    >
-                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-                    </span>
-                  </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>
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-0"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
             </div>
@@ -146,165 +58,91 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-2"
-              title="Field 2"
-            >
-              Field 2
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
             >
-              <div
-                class="ant-form-item-control-input-content"
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-1"
+                title="Field 1"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-2"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
+                Field 1
+              </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-3"
-              title="Field 3"
-            >
-              Field 3
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
-              >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-3"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-col ant-col-8"
-        style="padding-left:12px;padding-right:12px"
-      >
-        <div
-          class="ant-row ant-form-item"
-        >
-          <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-4"
-              title="Field 4"
-            >
-              Field 4
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
-          >
-            <div
-              class="ant-form-item-control-input"
-            >
-              <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
                 <div
-                  class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                  class="ant-form-item-control-input-content"
                 >
                   <div
-                    class="ant-select-selector"
+                    class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
-                    <span
-                      class="ant-select-selection-search"
+                    <div
+                      class="ant-select-selector"
                     >
-                      <input
-                        aria-activedescendant="advanced_search_field-4_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="advanced_search_field-4_list"
-                        aria-haspopup="listbox"
-                        aria-owns="advanced_search_field-4_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="advanced_search_field-4"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="advanced_search_field-1_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="advanced_search_field-1_list"
+                          aria-haspopup="listbox"
+                          aria-owns="advanced_search_field-1_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="advanced_search_field-1"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                      >
+                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                      </span>
+                    </div>
                     <span
-                      class="ant-select-selection-item"
-                      title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                      aria-hidden="true"
+                      class="ant-select-arrow"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
                     >
-                      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                      <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>
-                  <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>
@@ -316,35 +154,221 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         style="padding-left:12px;padding-right:12px"
       >
         <div
-          class="ant-row ant-form-item"
+          class="ant-form-item"
         >
           <div
-            class="ant-col ant-form-item-label"
-          >
-            <label
-              class="ant-form-item-required"
-              for="advanced_search_field-5"
-              title="Field 5"
-            >
-              Field 5
-            </label>
-          </div>
-          <div
-            class="ant-col ant-form-item-control"
+            class="ant-row ant-form-item-row"
           >
             <div
-              class="ant-form-item-control-input"
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-2"
+                title="Field 2"
+              >
+                Field 2
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
             >
               <div
-                class="ant-form-item-control-input-content"
+                class="ant-form-item-control-input"
               >
-                <input
-                  class="ant-input"
-                  id="advanced_search_field-5"
-                  placeholder="placeholder"
-                  type="text"
-                  value=""
-                />
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-2"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-3"
+                title="Field 3"
+              >
+                Field 3
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-3"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-4"
+                title="Field 4"
+              >
+                Field 4
+              </label>
+            </div>
+            <div
+              class="ant-col 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"
+                  >
+                    <div
+                      class="ant-select-selector"
+                    >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="advanced_search_field-4_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="advanced_search_field-4_list"
+                          aria-haspopup="listbox"
+                          aria-owns="advanced_search_field-4_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="advanced_search_field-4"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                      >
+                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                      </span>
+                    </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>
+      </div>
+      <div
+        class="ant-col ant-col-8"
+        style="padding-left:12px;padding-right:12px"
+      >
+        <div
+          class="ant-form-item"
+        >
+          <div
+            class="ant-row ant-form-item-row"
+          >
+            <div
+              class="ant-col ant-form-item-label"
+            >
+              <label
+                class="ant-form-item-required"
+                for="advanced_search_field-5"
+                title="Field 5"
+              >
+                Field 5
+              </label>
+            </div>
+            <div
+              class="ant-col ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
+                >
+                  <input
+                    class="ant-input"
+                    id="advanced_search_field-5"
+                    placeholder="placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -417,178 +441,13 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
   id="basic"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_username"
-        title="Username"
-      >
-        Username
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="basic_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="basic_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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="basic_remember"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Remember me
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/col-24-debug.md correctly 1`] = `
-Array [
-  <form
-    autocomplete="off"
-    class="ant-form ant-form-horizontal"
-    id="basic"
-  >
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-col-24 ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
@@ -599,7 +458,7 @@ Array [
         </label>
       </div>
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -617,11 +476,15 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
@@ -632,7 +495,7 @@ Array [
         </label>
       </div>
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -682,27 +545,15 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
-      style="box-shadow:0 0 3px red"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-label"
-      >
-        <label
-          class=""
-          for="basic_select"
-          title=""
-        >
-          <a
-            href="https://github.com/ant-design/ant-design/issues/36459"
-          >
-            #36459
-          </a>
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -710,101 +561,39 @@ Array [
           <div
             class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
-              style="width:70%"
+            <label
+              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
             >
-              <div
-                class="ant-select-selector"
+              <span
+                class="ant-checkbox ant-checkbox-checked"
               >
-                <div
-                  class="ant-select-selection-overflow"
-                >
-                  <div
-                    class="ant-select-selection-overflow-item"
-                    style="opacity:1"
-                  >
-                    <span
-                      class="ant-select-selection-item"
-                      title="Bamboo"
-                    >
-                      <span
-                        class="ant-select-selection-item-content"
-                      >
-                        Bamboo
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-item-remove"
-                        style="user-select:none;-webkit-user-select:none"
-                        unselectable="on"
-                      >
-                        <span
-                          aria-label="close"
-                          class="anticon anticon-close"
-                          role="img"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            data-icon="close"
-                            fill="currentColor"
-                            focusable="false"
-                            height="1em"
-                            viewBox="64 64 896 896"
-                            width="1em"
-                          >
-                            <path
-                              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                  <div
-                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                    style="opacity:1"
-                  >
-                    <div
-                      class="ant-select-selection-search"
-                      style="width:0"
-                    >
-                      <input
-                        aria-activedescendant="basic_select_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="basic_select_list"
-                        aria-haspopup="listbox"
-                        aria-owns="basic_select_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="basic_select"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-search-mirror"
-                      >
-                         
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+                <input
+                  checked=""
+                  class="ant-checkbox-input"
+                  id="basic_remember"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
+                />
+              </span>
+              <span>
+                Remember me
+              </span>
+            </label>
           </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-col-24 ant-form-item-control"
+        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -824,6 +613,273 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/col-24-debug.md correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="basic"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="basic_username"
+            title="Username"
+          >
+            Username
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="basic_username"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="basic_password"
+            title="Password"
+          >
+            Password
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <span
+                class="ant-input-affix-wrapper ant-input-password"
+              >
+                <input
+                  action="click"
+                  class="ant-input"
+                  id="basic_password"
+                  type="password"
+                  value=""
+                />
+                <span
+                  class="ant-input-suffix"
+                >
+                  <span
+                    aria-label="eye-invisible"
+                    class="anticon anticon-eye-invisible ant-input-password-icon"
+                    role="img"
+                    tabindex="-1"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="eye-invisible"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                      />
+                      <path
+                        d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="box-shadow:0 0 3px red"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 ant-form-item-label"
+        >
+          <label
+            class=""
+            for="basic_select"
+            title=""
+          >
+            <a
+              href="https://github.com/ant-design/ant-design/issues/36459"
+            >
+              #36459
+            </a>
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-24 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-multiple ant-select-show-search"
+                style="width:70%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <div
+                    class="ant-select-selection-overflow"
+                  >
+                    <div
+                      class="ant-select-selection-overflow-item"
+                      style="opacity:1"
+                    >
+                      <span
+                        class="ant-select-selection-item"
+                        title="Bamboo"
+                      >
+                        <span
+                          class="ant-select-selection-item-content"
+                        >
+                          Bamboo
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-item-remove"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        >
+                          <span
+                            aria-label="close"
+                            class="anticon anticon-close"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="close"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                      style="opacity:1"
+                    >
+                      <div
+                        class="ant-select-selection-search"
+                        style="width:0"
+                      >
+                        <input
+                          aria-activedescendant="basic_select_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="basic_select_list"
+                          aria-haspopup="listbox"
+                          aria-owns="basic_select_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="basic_select"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-search-mirror"
+                        >
+                           
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-24 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-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>,
   <form
     autocomplete="off"
@@ -831,21 +887,297 @@ Array [
     id="responsive"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+        >
+          <label
+            class="ant-form-item-required"
+            for="responsive_username"
+            title="Username"
+          >
+            Username
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="responsive_username"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+        >
+          <label
+            class="ant-form-item-required"
+            for="responsive_password"
+            title="Password"
+          >
+            Password
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <span
+                class="ant-input-affix-wrapper ant-input-password"
+              >
+                <input
+                  action="click"
+                  class="ant-input"
+                  id="responsive_password"
+                  type="password"
+                  value=""
+                />
+                <span
+                  class="ant-input-suffix"
+                >
+                  <span
+                    aria-label="eye-invisible"
+                    class="anticon anticon-eye-invisible ant-input-password-icon"
+                    role="img"
+                    tabindex="-1"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="eye-invisible"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                      />
+                      <path
+                        d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                class="ant-btn ant-btn-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <form
+    class="ant-form ant-form-vertical"
+  >
+    <div
+      class="ant-form-item"
+      style="box-shadow:0 0 3px red"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="select"
+            title=""
+          >
+            <a
+              href="https://github.com/ant-design/ant-design/issues/36459"
+            >
+              #36459
+            </a>
+          </label>
+        </div>
+        <div
+          class="ant-col 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-multiple ant-select-show-search"
+                style="width:70%"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <div
+                    class="ant-select-selection-overflow"
+                  >
+                    <div
+                      class="ant-select-selection-overflow-item"
+                      style="opacity:1"
+                    >
+                      <span
+                        class="ant-select-selection-item"
+                        title="Bamboo"
+                      >
+                        <span
+                          class="ant-select-selection-item-content"
+                        >
+                          Bamboo
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-item-remove"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        >
+                          <span
+                            aria-label="close"
+                            class="anticon anticon-close"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="close"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                      style="opacity:1"
+                    >
+                      <div
+                        class="ant-select-selection-search"
+                        style="width:0"
+                      >
+                        <input
+                          aria-activedescendant="select_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="select_list"
+                          aria-haspopup="listbox"
+                          aria-owns="select_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="select"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-selection-search-mirror"
+                        >
+                           
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+]
+`;
+
+exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="control-hooks"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
-          for="responsive_username"
-          title="Username"
+          for="control-hooks_note"
+          title="Note"
         >
-          Username
+          Note
         </label>
       </div>
       <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -855,7 +1187,7 @@ Array [
           >
             <input
               class="ant-input"
-              id="responsive_username"
+              id="control-hooks_note"
               type="text"
               value=""
             />
@@ -863,22 +1195,3076 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
-          for="responsive_password"
-          title="Password"
+          for="control-hooks_gender"
+          title="Gender"
         >
-          Password
+          Gender
         </label>
       </div>
       <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="control-hooks_gender_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="control-hooks_gender_list"
+                    aria-haspopup="listbox"
+                    aria-owns="control-hooks_gender_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="control-hooks_gender"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Select a option and change input text above
+                </span>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-link"
+              type="button"
+            >
+              <span>
+                Fill form
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="control-ref"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="control-ref_note"
+          title="Note"
+        >
+          Note
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="control-ref_note"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="control-ref_gender"
+          title="Gender"
+        >
+          Gender
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="control-ref_gender_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="control-ref_gender_list"
+                    aria-haspopup="listbox"
+                    aria-owns="control-ref_gender_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="control-ref_gender"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Select a option and change input text above
+                </span>
+              </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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-link"
+              type="button"
+            >
+              <span>
+                Fill form
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`] = `
+<form
+  class="ant-form ant-form-inline"
+  id="customized_form_controls"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="customized_form_controls_price"
+          title="Price"
+        >
+          Price
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span>
+              <input
+                class="ant-input"
+                style="width:100px"
+                type="text"
+                value="0"
+              />
+              <div
+                class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+                style="width:80px;margin:0 8px"
+              >
+                <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-haspopup="listbox"
+                      aria-owns="undefined_list"
+                      autocomplete="off"
+                      class="ant-select-selection-search-input"
+                      readonly=""
+                      role="combobox"
+                      style="opacity:0"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-item"
+                    title="RMB"
+                  >
+                    RMB
+                  </span>
+                </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>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dep-debug.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="debug"
+>
+  0
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="debug_debug1"
+          title="debug1"
+        >
+          debug1
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="debug_debug1"
+              type="text"
+              value="debug1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="debug_debug2"
+          title="debug2"
+        >
+          debug2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="debug_debug2"
+              type="text"
+              value="debug2"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-disabled ant-checkbox-wrapper-in-form-item"
+            >
+              <span
+                class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
+              >
+                <input
+                  checked=""
+                  class="ant-checkbox-input"
+                  disabled=""
+                  id="disabled"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
+                />
+              </span>
+              <span>
+                disabled
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Upload"
+        >
+          Upload
+        </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"
+          >
+            <span
+              class="ant-upload-picture-card-wrapper"
+            >
+              <div
+                class="ant-upload-list ant-upload-list-picture-card"
+              >
+                <div
+                  class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
+                >
+                  <span
+                    class="ant-upload ant-upload-disabled"
+                    role="button"
+                  >
+                    <input
+                      accept=""
+                      style="display:none"
+                      type="file"
+                    />
+                    <div>
+                      <span
+                        aria-label="plus"
+                        class="anticon anticon-plus"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="plus"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <defs />
+                          <path
+                            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                          />
+                          <path
+                            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                      <div
+                        style="margin-top:8px"
+                      >
+                        Upload
+                      </div>
+                    </div>
+                  </span>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal0"
+        >
+          Normal0
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail0"
+        >
+          Fail0
+        </label>
+      </div>
+      <div
+        class="ant-col 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-status-error"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled0"
+        >
+          FailDisabled0
+        </label>
+      </div>
+      <div
+        class="ant-col 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 ant-input-status-error"
+              disabled=""
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal1"
+        >
+          Normal1
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail1"
+        >
+          Fail1
+        </label>
+      </div>
+      <div
+        class="ant-col 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-status-error"
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled1"
+        >
+          FailDisabled1
+        </label>
+      </div>
+      <div
+        class="ant-col 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 ant-input-status-error"
+              disabled=""
+              placeholder="unavailable choice"
+              type="text"
+              value="Buggy!"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal2"
+        >
+          Normal2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input"
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail2"
+        >
+          Fail2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input ant-input-status-error"
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled2"
+        >
+          FailDisabled2
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+            >
+              <span
+                class="ant-input-wrapper ant-input-group"
+              >
+                <span
+                  class="ant-input-group-addon"
+                >
+                  Buggy!
+                </span>
+                <input
+                  class="ant-input ant-input-disabled ant-input-status-error"
+                  disabled=""
+                  placeholder="unavailable choice"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Normal3"
+        >
+          Normal3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input"
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Fail3"
+        >
+          Fail3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input"
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="FailDisabled3"
+        >
+          FailDisabled3
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-disabled ant-input-affix-wrapper-status-error"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                人民币
+              </span>
+              <input
+                class="ant-input ant-input-disabled"
+                disabled=""
+                placeholder="unavailable choice"
+                type="text"
+                value="50"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-dashed"
+              style="width:60%"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-dashed"
+              style="width:60%;margin-top:20px"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field at head
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-dashed ant-btn-block"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add field
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dynamic_form_nest_item_area"
+          title="Area"
+        >
+          Area
+        </label>
+      </div>
+      <div
+        class="ant-col 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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="dynamic_form_nest_item_area_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="dynamic_form_nest_item_area_list"
+                    aria-haspopup="listbox"
+                    aria-owns="dynamic_form_nest_item_area_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="dynamic_form_nest_item_area"
+                    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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-dashed ant-btn-block"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Add sights
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-form-items-no-style.md correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Users"
+        >
+          Users
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-form-item"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col 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-dashed ant-btn-block"
+                        type="button"
+                      >
+                        <span
+                          aria-label="plus"
+                          class="anticon anticon-plus"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="plus"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <defs />
+                            <path
+                              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                            />
+                            <path
+                              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                            />
+                          </svg>
+                        </span>
+                        <span>
+                          Add field
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="dynamic_rule"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dynamic_rule_username"
+          title="Name"
+        >
+          Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-8 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="dynamic_rule_username"
+              placeholder="Please input your name"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="dynamic_rule_nickname"
+          title="Nickname"
+        >
+          Nickname
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-8 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="dynamic_rule_nickname"
+              placeholder="Please input your nickname"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-col-offset-4 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-in-form-item"
+            >
+              <span
+                class="ant-checkbox"
+              >
+                <input
+                  class="ant-checkbox-input"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
+                />
+              </span>
+              <span>
+                Nickname is required
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-col-offset-4 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-primary"
+              type="button"
+            >
+              <span>
+                Check
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="basicForm"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="basicForm_group"
+          title="Group Name"
+        >
+          Group Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="basicForm_group"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="User List"
+        >
+          User List
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-typography ant-typography-secondary ant-form-text"
+            >
+              ( 
+              <span
+                aria-label="smile"
+                class="anticon anticon-smile"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="smile"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                  />
+                </svg>
+              </span>
+               No user yet. )
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-default"
+              style="margin:0 8px"
+              type="button"
+            >
+              <span>
+                Add User
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      New Collection
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
+Array [
+  <form
+    class="ant-form ant-form-inline"
+    id="global_state"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="global_state_username"
+            title="Username"
+          >
+            Username
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="global_state_username"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <pre
+    class="language-bash"
+  >
+    [
+  {
+    "name": [
+      "username"
+    ],
+    "value": "Ant Design"
+  }
+]
+  </pre>,
+]
+`;
+
+exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
+<form
+  class="ant-form ant-form-inline"
+  id="horizontal_login"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="horizontal_login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="horizontal_login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="label-ellipsis"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="label-ellipsis_username"
+          title=""
+        >
+          <span
+            aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+          >
+            longtextlongtextlongtextlongtextlongtextlongtextlongtext
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+            >
+              lg
+            </span>
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+            >
+              <span
+                aria-hidden="true"
+              >
+                ...
+              </span>
+            </span>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="label-ellipsis_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="label-ellipsis_password"
+          title=""
+        >
+          <span
+            aria-label="longtext longtext longtext longtext longtext longtext longtext"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+          >
+            longtext longtext longtext longtext longtext longtext longtext
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
+            >
+              lg
+            </span>
+            <span
+              aria-hidden="true"
+              style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
+            >
+              <span
+                aria-hidden="true"
+              >
+                ...
+              </span>
+            </span>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -892,7 +4278,7 @@ Array [
               <input
                 action="click"
                 class="ant-input"
-                id="responsive_password"
+                id="label-ellipsis_password"
                 type="password"
                 value=""
               />
@@ -928,11 +4314,314 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/layout.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="layout"
+          title="Form Layout"
+        >
+          Form Layout
+        </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"
+              id="layout"
+            >
+              <label
+                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"
+                >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="horizontal"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Horizontal
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="vertical"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Vertical
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="inline"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Inline
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Field A"
+        >
+          Field A
+        </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"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Field B"
+        >
+          Field B
+        </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"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-14 ant-col-offset-4 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-primary"
+              type="button"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="wrap"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-no-colon"
+          for="wrap_username"
+          title="正常标签文案"
+        >
+          正常标签文案
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="wrap_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-no-colon"
+          for="wrap_password"
+          title="超长标签文案超长标签文案"
+        >
+          超长标签文案超长标签文案
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="wrap_password"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-no-colon"
+          title=" "
+        >
+           
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
       >
         <div
           class="ant-form-item-control-input"
@@ -952,3443 +4641,6 @@ Array [
         </div>
       </div>
     </div>
-  </form>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <form
-    class="ant-form ant-form-vertical"
-  >
-    <div
-      class="ant-row ant-form-item"
-      style="box-shadow:0 0 3px red"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          for="select"
-          title=""
-        >
-          <a
-            href="https://github.com/ant-design/ant-design/issues/36459"
-          >
-            #36459
-          </a>
-        </label>
-      </div>
-      <div
-        class="ant-col 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-multiple ant-select-show-search"
-              style="width:70%"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <div
-                  class="ant-select-selection-overflow"
-                >
-                  <div
-                    class="ant-select-selection-overflow-item"
-                    style="opacity:1"
-                  >
-                    <span
-                      class="ant-select-selection-item"
-                      title="Bamboo"
-                    >
-                      <span
-                        class="ant-select-selection-item-content"
-                      >
-                        Bamboo
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-item-remove"
-                        style="user-select:none;-webkit-user-select:none"
-                        unselectable="on"
-                      >
-                        <span
-                          aria-label="close"
-                          class="anticon anticon-close"
-                          role="img"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            data-icon="close"
-                            fill="currentColor"
-                            focusable="false"
-                            height="1em"
-                            viewBox="64 64 896 896"
-                            width="1em"
-                          >
-                            <path
-                              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                  <div
-                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                    style="opacity:1"
-                  >
-                    <div
-                      class="ant-select-selection-search"
-                      style="width:0"
-                    >
-                      <input
-                        aria-activedescendant="select_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="select_list"
-                        aria-haspopup="listbox"
-                        aria-owns="select_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="select"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-selection-search-mirror"
-                      >
-                         
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>,
-]
-`;
-
-exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="control-hooks"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-hooks_note"
-        title="Note"
-      >
-        Note
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="control-hooks_note"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-hooks_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="control-hooks_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="control-hooks_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="control-hooks_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="control-hooks_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Select a option and change input text above
-              </span>
-            </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-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-link"
-            type="button"
-          >
-            <span>
-              Fill form
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="control-ref"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-ref_note"
-        title="Note"
-      >
-        Note
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="control-ref_note"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="control-ref_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 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-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="control-ref_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="control-ref_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="control-ref_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="control-ref_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Select a option and change input text above
-              </span>
-            </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-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-link"
-            type="button"
-          >
-            <span>
-              Fill form
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`] = `
-<form
-  class="ant-form ant-form-inline"
-  id="customized_form_controls"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="customized_form_controls_price"
-        title="Price"
-      >
-        Price
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span>
-            <input
-              class="ant-input"
-              style="width:100px"
-              type="text"
-              value="0"
-            />
-            <div
-              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
-              style="width:80px;margin:0 8px"
-            >
-              <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-haspopup="listbox"
-                    aria-owns="undefined_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-item"
-                  title="RMB"
-                >
-                  RMB
-                </span>
-              </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>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dep-debug.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="debug"
->
-  0
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="debug_debug1"
-        title="debug1"
-      >
-        debug1
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="debug_debug1"
-            type="text"
-            value="debug1"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="debug_debug2"
-        title="debug2"
-      >
-        debug2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="debug_debug2"
-            type="text"
-            value="debug2"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</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-disabled ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
-            >
-              <input
-                checked=""
-                class="ant-checkbox-input"
-                disabled=""
-                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="Upload"
-      >
-        Upload
-      </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"
-        >
-          <span
-            class="ant-upload-picture-card-wrapper"
-          >
-            <div
-              class="ant-upload-list ant-upload-list-picture-card"
-            >
-              <div
-                class="ant-upload ant-upload-select ant-upload-select-picture-card ant-upload-disabled"
-              >
-                <span
-                  class="ant-upload ant-upload-disabled"
-                  role="button"
-                >
-                  <input
-                    accept=""
-                    style="display:none"
-                    type="file"
-                  />
-                  <div>
-                    <span
-                      aria-label="plus"
-                      class="anticon anticon-plus"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="plus"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <defs />
-                        <path
-                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                        />
-                        <path
-                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                    <div
-                      style="margin-top:8px"
-                    >
-                      Upload
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-          </span>
-        </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"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal0"
-      >
-        Normal0
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail0"
-      >
-        Fail0
-      </label>
-    </div>
-    <div
-      class="ant-col 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-status-error"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled0"
-      >
-        FailDisabled0
-      </label>
-    </div>
-    <div
-      class="ant-col 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 ant-input-status-error"
-            disabled=""
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal1"
-      >
-        Normal1
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail1"
-      >
-        Fail1
-      </label>
-    </div>
-    <div
-      class="ant-col 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-status-error"
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled1"
-      >
-        FailDisabled1
-      </label>
-    </div>
-    <div
-      class="ant-col 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 ant-input-status-error"
-            disabled=""
-            placeholder="unavailable choice"
-            type="text"
-            value="Buggy!"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal2"
-      >
-        Normal2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input"
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail2"
-      >
-        Fail2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input ant-input-status-error"
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled2"
-      >
-        FailDisabled2
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                Buggy!
-              </span>
-              <input
-                class="ant-input ant-input-disabled ant-input-status-error"
-                disabled=""
-                placeholder="unavailable choice"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Normal3"
-      >
-        Normal3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input"
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Fail3"
-      >
-        Fail3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input"
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="FailDisabled3"
-      >
-        FailDisabled3
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-disabled ant-input-affix-wrapper-status-error"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              人民币
-            </span>
-            <input
-              class="ant-input ant-input-disabled"
-              disabled=""
-              placeholder="unavailable choice"
-              type="text"
-              value="50"
-            />
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Buggy!
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-dashed"
-            style="width:60%"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-dashed"
-            style="width:60%;margin-top:20px"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field at head
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-dashed ant-btn-block"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add field
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="dynamic_form_nest_item_area"
-        title="Area"
-      >
-        Area
-      </label>
-    </div>
-    <div
-      class="ant-col 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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="dynamic_form_nest_item_area_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="dynamic_form_nest_item_area_list"
-                  aria-haspopup="listbox"
-                  aria-owns="dynamic_form_nest_item_area_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="dynamic_form_nest_item_area"
-                  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-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-dashed ant-btn-block"
-            type="button"
-          >
-            <span
-              aria-label="plus"
-              class="anticon anticon-plus"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="plus"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs />
-                <path
-                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                />
-                <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                />
-              </svg>
-            </span>
-            <span>
-              Add sights
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-form-items-no-style.md correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="dynamic_form_nest_item"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Users"
-      >
-        Users
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-row ant-form-item"
-          >
-            <div
-              class="ant-col 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-dashed ant-btn-block"
-                    type="button"
-                  >
-                    <span
-                      aria-label="plus"
-                      class="anticon anticon-plus"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="plus"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <defs />
-                        <path
-                          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                        />
-                        <path
-                          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                    <span>
-                      Add field
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="dynamic_rule"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="dynamic_rule_username"
-        title="Name"
-      >
-        Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-8 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="dynamic_rule_username"
-            placeholder="Please input your name"
-            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=""
-        for="dynamic_rule_nickname"
-        title="Nickname"
-      >
-        Nickname
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-8 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="dynamic_rule_nickname"
-            placeholder="Please input your nickname"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-col-offset-4 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-in-form-item"
-          >
-            <span
-              class="ant-checkbox"
-            >
-              <input
-                class="ant-checkbox-input"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Nickname is required
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-col-offset-4 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-primary"
-            type="button"
-          >
-            <span>
-              Check
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="basicForm"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basicForm_group"
-        title="Group Name"
-      >
-        Group Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="basicForm_group"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="User List"
-      >
-        User List
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-typography ant-typography-secondary ant-form-text"
-          >
-            ( 
-            <span
-              aria-label="smile"
-              class="anticon anticon-smile"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="smile"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-                />
-              </svg>
-            </span>
-             No user yet. )
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-          <button
-            class="ant-btn ant-btn-default"
-            style="margin:0 8px"
-            type="button"
-          >
-            <span>
-              Add User
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
-<div>
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      New Collection
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
-Array [
-  <form
-    class="ant-form ant-form-inline"
-    id="global_state"
-  >
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class="ant-form-item-required"
-          for="global_state_username"
-          title="Username"
-        >
-          Username
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <input
-              class="ant-input"
-              id="global_state_username"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>,
-  <pre
-    class="language-bash"
-  >
-    [
-  {
-    "name": [
-      "username"
-    ],
-    "value": "Ant Design"
-  }
-]
-  </pre>,
-]
-`;
-
-exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
-<form
-  class="ant-form ant-form-inline"
-  id="horizontal_login"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="user"
-                class="anticon anticon-user site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="horizontal_login_username"
-              placeholder="Username"
-              type="text"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="lock"
-                class="anticon anticon-lock site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="lock"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="horizontal_login_password"
-              placeholder="Password"
-              type="password"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="submit"
-          >
-            <span>
-              Log in
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="label-ellipsis"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="label-ellipsis_username"
-        title=""
-      >
-        <span
-          aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
-          class="ant-typography ant-typography-ellipsis ant-typography-single-line"
-        >
-          longtextlongtextlongtextlongtextlongtextlongtextlongtext
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
-          >
-            lg
-          </span>
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ...
-            </span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="label-ellipsis_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="label-ellipsis_password"
-        title=""
-      >
-        <span
-          aria-label="longtext longtext longtext longtext longtext longtext longtext"
-          class="ant-typography ant-typography-ellipsis ant-typography-single-line"
-        >
-          longtext longtext longtext longtext longtext longtext longtext
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
-          >
-            lg
-          </span>
-          <span
-            aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
-          >
-            <span
-              aria-hidden="true"
-            >
-              ...
-            </span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="label-ellipsis_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/layout.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="layout"
-        title="Form Layout"
-      >
-        Form Layout
-      </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"
-            id="layout"
-          >
-            <label
-              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"
-              >
-                <input
-                  checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="horizontal"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Horizontal
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="vertical"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Vertical
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="inline"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Inline
-              </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="Field A"
-      >
-        Field A
-      </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"
-            placeholder="input placeholder"
-            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="Field B"
-      >
-        Field B
-      </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"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-14 ant-col-offset-4 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-primary"
-            type="button"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="wrap"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-no-colon"
-        for="wrap_username"
-        title="正常标签文案"
-      >
-        正常标签文案
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="wrap_username"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-no-colon"
-        for="wrap_password"
-        title="超长标签文案超长标签文案"
-      >
-        超长标签文案超长标签文案
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="wrap_password"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
-      style="flex:0 0 110px"
-    >
-      <label
-        class="ant-form-item-no-colon"
-        title=" "
-      >
-         
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-      style="flex:1 1 auto"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </form>
 `;
@@ -4399,2837 +4651,24 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
   id="nest-messages"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="nest-messages_user_name"
-        title="Name"
-      >
-        Name
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_name"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_email"
-        title="Email"
-      >
-        Email
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_email"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_age"
-        title="Age"
-      >
-        Age
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 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"
-          >
-            <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"
-                id="nest-messages_user_age"
-                role="spinbutton"
-                step="1"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_website"
-        title="Website"
-      >
-        Website
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="nest-messages_user_website"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-8 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="nest-messages_user_introduction"
-        title="Introduction"
-      >
-        Introduction
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <textarea
-            class="ant-input"
-            id="nest-messages_user_introduction"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-16 ant-col-offset-8 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-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal login-form"
-  id="normal_login"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="user"
-                class="anticon anticon-user site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="normal_login_username"
-              placeholder="Username"
-              type="text"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="lock"
-                class="anticon anticon-lock site-form-item-icon"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="lock"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="normal_login_password"
-              placeholder="Password"
-              type="password"
-              value=""
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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="normal_login_remember"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              Remember me
-            </span>
-          </label>
-          <a
-            class="login-form-forgot"
-            href=""
-          >
-            Forgot password
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary login-form-button"
-            type="submit"
-          >
-            <span>
-              Log in
-            </span>
-          </button>
-          Or 
-          <a
-            href=""
-          >
-            register now!
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class=""
-        for="test"
-        title="test"
-      >
-        test
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="test"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="list_0"
-            type="text"
-            value="light"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Focus Form.Item
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Focus Form.List
-    </span>
-  </button>
-</form>
-`;
-
-exports[`renders ./components/form/demo/register.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="register"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_email"
-        title="E-mail"
-      >
-        E-mail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="register_email"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="register_password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_confirm"
-        title="Confirm Password"
-      >
-        Confirm Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              id="register_confirm"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_nickname"
-        title="Nickname"
-      >
-        Nickname
-        <span
-          aria-label="question-circle"
-          class="anticon anticon-question-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="question-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-            />
-          </svg>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="register_nickname"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_residence"
-        title="Habitual Residence"
-      >
-        Habitual Residence
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="register_residence_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_residence_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="register_residence"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="Zhejiang / Hangzhou / West Lake"
-              >
-                Zhejiang / Hangzhou / West Lake
-              </span>
-            </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>
-            <span
-              aria-hidden="true"
-              class="ant-select-clear"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
-            >
-              <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_phone"
-        title="Phone Number"
-      >
-        Phone Number
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-group-wrapper"
-            style="width:100%"
-          >
-            <span
-              class="ant-input-wrapper ant-input-group"
-            >
-              <span
-                class="ant-input-group-addon"
-              >
-                <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
-                  style="width:70px"
-                >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="register_prefix_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="register_prefix_list"
-                        aria-haspopup="listbox"
-                        aria-owns="register_prefix_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="register_prefix"
-                        readonly=""
-                        role="combobox"
-                        style="opacity:0"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="+86"
-                    >
-                      +86
-                    </span>
-                  </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>
-              </span>
-              <input
-                class="ant-input"
-                id="register_phone"
-                type="text"
-                value=""
-              />
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_donation"
-        title="Donation"
-      >
-        Donation
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-number-group-wrapper"
-            style="width:100%"
-          >
-            <div
-              class="ant-input-number-wrapper ant-input-number-group"
-            >
-              <div
-                class="ant-input-number ant-input-number-in-form-item"
-              >
-                <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"
-                    id="register_donation"
-                    role="spinbutton"
-                    step="1"
-                    value=""
-                  />
-                </div>
-              </div>
-              <div
-                class="ant-input-number-group-addon"
-              >
-                <div
-                  class="ant-select ant-select-single ant-select-show-arrow"
-                  style="width:70px"
-                >
-                  <div
-                    class="ant-select-selector"
-                  >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="register_suffix_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="register_suffix_list"
-                        aria-haspopup="listbox"
-                        aria-owns="register_suffix_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="register_suffix"
-                        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>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_website"
-        title="Website"
-      >
-        Website
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="register_website_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="register_website_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_website_list"
-                  autocomplete="off"
-                  class="ant-input ant-select-selection-search-input"
-                  id="register_website"
-                  role="combobox"
-                  type="search"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                website
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_intro"
-        title="Intro"
-      >
-        Intro
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
-            data-count="0 / 100"
-          >
-            <textarea
-              class="ant-input"
-              id="register_intro"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="register_gender"
-        title="Gender"
-      >
-        Gender
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-activedescendant="register_gender_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="register_gender_list"
-                  aria-haspopup="listbox"
-                  aria-owns="register_gender_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="register_gender"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                select your gender
-              </span>
-            </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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class=""
-        title="Captcha"
-      >
-        Captcha
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-row"
-            style="margin-left:-4px;margin-right:-4px"
-          >
-            <div
-              class="ant-col ant-col-12"
-              style="padding-left:4px;padding-right:4px"
-            >
-              <input
-                class="ant-input"
-                id="register_captcha"
-                type="text"
-                value=""
-              />
-            </div>
-            <div
-              class="ant-col ant-col-12"
-              style="padding-left:4px;padding-right:4px"
-            >
-              <button
-                class="ant-btn ant-btn-default"
-                type="button"
-              >
-                <span>
-                  Get captcha
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-extra"
-      >
-        We must make sure that your are a human.
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox"
-            >
-              <input
-                class="ant-checkbox-input"
-                id="register_agreement"
-                type="checkbox"
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              I have read the 
-              <a
-                href=""
-              >
-                agreement
-              </a>
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Register
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
-<form
-  class="ant-form ant-form-vertical"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required-mark-optional"
-        for="requiredMarkValue"
-        title="Required Mark"
-      >
-        Required Mark
-        <span
-          class="ant-form-item-optional"
-          title=""
-        >
-          (optional)
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col 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"
-            id="requiredMarkValue"
-          >
-            <label
-              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"
-              >
-                <input
-                  checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="optional"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Optional
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="true"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Required
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="false"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Hidden
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required ant-form-item-required-mark-optional"
-        title="Field A"
-      >
-        Field A
-        <span
-          aria-label="question-circle"
-          class="anticon anticon-question-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="question-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-            />
-          </svg>
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required-mark-optional"
-        title="Field B"
-      >
-        Field B
-        <span
-          aria-label="info-circle"
-          class="anticon anticon-info-circle ant-form-item-tooltip"
-          role="img"
-          title=""
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="info-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-form-item-optional"
-          title=""
-        >
-          (optional)
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col 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-primary"
-            type="button"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/size.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal ant-form-default"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="size"
-        title="Form Size"
-      >
-        Form Size
-      </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 ant-radio-group-default"
-            id="size"
-          >
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="small"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Small
-              </span>
-            </label>
-            <label
-              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"
-              >
-                <input
-                  checked=""
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="default"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Default
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="large"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                Large
-              </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"
-            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"
-          >
-            <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-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  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"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  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-default"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                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="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"
-          >
-            <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"
-                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="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"
-            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"
-            type="button"
-          >
-            <span>
-              Button
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="time_related_controls"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_date-picker"
-        title="DatePicker"
-      >
-        DatePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_date-picker"
-                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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_date-time-picker"
-        title="DatePicker[showTime]"
-      >
-        DatePicker[showTime]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_date-time-picker"
-                placeholder="Select date"
-                readonly=""
-                size="21"
-                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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_month-picker"
-        title="MonthPicker"
-      >
-        MonthPicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_month-picker"
-                placeholder="Select month"
-                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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_range-picker"
-        title="RangePicker"
-      >
-        RangePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_range-picker"
-                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"
-                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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_range-time-picker"
-        title="RangePicker[showTime]"
-      >
-        RangePicker[showTime]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_range-time-picker"
-                placeholder="Start date"
-                readonly=""
-                size="21"
-                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"
-                placeholder="End date"
-                readonly=""
-                size="21"
-                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-form-item-label ant-col-xs-24 ant-col-sm-8"
-    >
-      <label
-        class="ant-form-item-required"
-        for="time_related_controls_time-picker"
-        title="TimePicker"
-      >
-        TimePicker
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                id="time_related_controls_time-picker"
-                placeholder="Select time"
-                readonly=""
-                size="10"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
-              >
-                <span
-                  aria-label="clock-circle"
-                  class="anticon anticon-clock-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clock-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    />
-                    <path
-                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
-          >
-            <span>
-              Submit
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/useWatch.md correctly 1`] = `
-Array [
-  <form
-    autocomplete="off"
-    class="ant-form ant-form-vertical"
-  >
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
-          class=""
-          for="name"
-          title="Name (Watch to trigger rerender)"
+          class="ant-form-item-required"
+          for="nest-messages_user_name"
+          title="Name"
         >
-          Name (Watch to trigger rerender)
+          Name
         </label>
       </div>
       <div
-        class="ant-col ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -7239,7 +4678,7 @@ Array [
           >
             <input
               class="ant-input"
-              id="name"
+              id="nest-messages_user_name"
               type="text"
               value=""
             />
@@ -7247,22 +4686,63 @@ Array [
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-col ant-form-item-label"
+        class="ant-col ant-col-8 ant-form-item-label"
       >
         <label
           class=""
-          for="age"
-          title="Age (Not Watch)"
+          for="nest-messages_user_email"
+          title="Email"
         >
-          Age (Not Watch)
+          Email
         </label>
       </div>
       <div
-        class="ant-col ant-form-item-control"
+        class="ant-col ant-col-16 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="nest-messages_user_email"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_age"
+          title="Age"
+        >
+          Age
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
           class="ant-form-item-control-input"
@@ -7337,7 +4817,7 @@ Array [
                 <input
                   autocomplete="off"
                   class="ant-input-number-input"
-                  id="age"
+                  id="nest-messages_user_age"
                   role="spinbutton"
                   step="1"
                   value=""
@@ -7348,132 +4828,496 @@ Array [
         </div>
       </div>
     </div>
-  </form>,
-  <article
-    class="ant-typography"
-  >
-    <pre>
-      Name Value: 
-    </pre>
-  </article>,
-]
-`;
-
-exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="validate_other"
->
+  </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Plain Text"
-      >
-        Plain Text
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_website"
+          title="Website"
+        >
+          Website
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-form-text"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            China
-          </span>
+            <input
+              class="ant-input"
+              id="nest-messages_user_website"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_select"
-        title="Select"
-      >
-        Select
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-8 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="nest-messages_user_introduction"
+          title="Introduction"
+        >
+          Introduction
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select-selector"
+            <textarea
+              class="ant-input"
+              id="nest-messages_user_introduction"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-16 ant-col-offset-8 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal login-form"
+  id="normal_login"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
             >
               <span
-                class="ant-select-selection-search"
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="normal_login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock site-form-item-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="normal_login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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
-                  aria-activedescendant="validate_other_select_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="validate_other_select_list"
-                  aria-haspopup="listbox"
-                  aria-owns="validate_other_select_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="validate_other_select"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
+                  checked=""
+                  class="ant-checkbox-input"
+                  id="normal_login_remember"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
                 />
               </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                Please select a country
+              <span>
+                Remember me
               </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
+            </label>
+            <a
+              class="login-form-forgot"
+              href=""
             >
+              Forgot password
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary login-form-button"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+            Or 
+            <a
+              href=""
+            >
+              register now!
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="test"
+          title="test"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="test"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="list_0"
+              type="text"
+              value="light"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Focus Form.Item
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Focus Form.List
+    </span>
+  </button>
+</form>
+`;
+
+exports[`renders ./components/form/demo/register.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="register"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_email"
+          title="E-mail"
+        >
+          E-mail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="register_email"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="register_password"
+                type="password"
+                value=""
+              />
               <span
-                aria-label="down"
-                class="anticon anticon-down ant-select-suffix"
-                role="img"
+                class="ant-input-suffix"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
                 >
-                  <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>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>
@@ -7482,74 +5326,243 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_select-multiple"
-        title="Select[multiple]"
-      >
-        Select[multiple]
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_confirm"
+          title="Confirm Password"
+        >
+          Confirm Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="register_confirm"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_nickname"
+          title="Nickname"
+        >
+          Nickname
+          <span
+            aria-label="question-circle"
+            class="anticon anticon-question-circle ant-form-item-tooltip"
+            role="img"
+            title=""
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="question-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+              />
+            </svg>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="register_nickname"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_residence"
+          title="Habitual Residence"
+        >
+          Habitual Residence
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              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-selection-overflow"
+                class="ant-select-selector"
               >
-                <div
-                  class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-                  style="opacity:1"
+                <span
+                  class="ant-select-selection-search"
                 >
-                  <div
-                    class="ant-select-selection-search"
-                    style="width:0"
-                  >
-                    <input
-                      aria-activedescendant="validate_other_select-multiple_list_0"
-                      aria-autocomplete="list"
-                      aria-controls="validate_other_select-multiple_list"
-                      aria-haspopup="listbox"
-                      aria-owns="validate_other_select-multiple_list"
-                      autocomplete="off"
-                      class="ant-select-selection-search-input"
-                      id="validate_other_select-multiple"
-                      readonly=""
-                      role="combobox"
-                      style="opacity:0"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-selection-search-mirror"
-                    >
-                       
-                    </span>
-                  </div>
-                </div>
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="register_residence_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_residence_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="register_residence"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="Zhejiang / Hangzhou / West Lake"
+                >
+                  Zhejiang / Hangzhou / West Lake
+                </span>
               </div>
               <span
-                class="ant-select-selection-placeholder"
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
               >
-                Please select favourite colors
+                <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>
+              <span
+                aria-hidden="true"
+                class="ant-select-clear"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </div>
           </div>
@@ -7558,70 +5571,460 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="InputNumber"
-      >
-        InputNumber
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_phone"
+          title="Phone Number"
+        >
+          Phone Number
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-input-number-handler-wrap"
+            <span
+              class="ant-input-group-wrapper"
+              style="width:100%"
             >
               <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
+                class="ant-input-wrapper ant-input-group"
               >
                 <span
-                  aria-label="up"
-                  class="anticon anticon-up ant-input-number-handler-up-inner"
-                  role="img"
+                  class="ant-input-group-addon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="up"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <div
+                    class="ant-select ant-select-single ant-select-show-arrow"
+                    style="width:70px"
                   >
-                    <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>
+                    <div
+                      class="ant-select-selector"
+                    >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="register_prefix_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="register_prefix_list"
+                          aria-haspopup="listbox"
+                          aria-owns="register_prefix_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="register_prefix"
+                          readonly=""
+                          role="combobox"
+                          style="opacity:0"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="+86"
+                      >
+                        +86
+                      </span>
+                    </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>
                 </span>
+                <input
+                  class="ant-input"
+                  id="register_phone"
+                  type="text"
+                  value=""
+                />
               </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_donation"
+          title="Donation"
+        >
+          Donation
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-number-group-wrapper"
+              style="width:100%"
+            >
+              <div
+                class="ant-input-number-wrapper ant-input-number-group"
+              >
+                <div
+                  class="ant-input-number ant-input-number-in-form-item"
+                >
+                  <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"
+                      id="register_donation"
+                      role="spinbutton"
+                      step="1"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="ant-input-number-group-addon"
+                >
+                  <div
+                    class="ant-select ant-select-single ant-select-show-arrow"
+                    style="width:70px"
+                  >
+                    <div
+                      class="ant-select-selector"
+                    >
+                      <span
+                        class="ant-select-selection-search"
+                      >
+                        <input
+                          aria-activedescendant="register_suffix_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="register_suffix_list"
+                          aria-haspopup="listbox"
+                          aria-owns="register_suffix_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="register_suffix"
+                          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>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_website"
+          title="Website"
+        >
+          Website
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="register_website_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="register_website_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_website_list"
+                    autocomplete="off"
+                    class="ant-input ant-select-selection-search-input"
+                    id="register_website"
+                    role="combobox"
+                    type="search"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  website
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_intro"
+          title="Intro"
+        >
+          Intro
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
+              data-count="0 / 100"
+            >
+              <textarea
+                class="ant-input"
+                id="register_intro"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="register_gender"
+          title="Gender"
+        >
+          Gender
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="register_gender_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="register_gender_list"
+                    aria-haspopup="listbox"
+                    aria-owns="register_gender_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="register_gender"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  select your gender
+                </span>
+              </div>
               <span
-                aria-disabled="false"
-                aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down"
-                role="button"
+                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-input-number-handler-down-inner"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
@@ -7640,1058 +6043,143 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </span>
               </span>
             </div>
-            <div
-              class="ant-input-number-input-wrap"
-            >
-              <input
-                aria-valuemax="10"
-                aria-valuemin="1"
-                aria-valuenow="3"
-                autocomplete="off"
-                class="ant-input-number-input"
-                id="validate_other_input-number"
-                role="spinbutton"
-                step="1"
-                value="3"
-              />
-            </div>
-          </div>
-          <span
-            class="ant-form-text"
-          >
-             machines
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_switch"
-        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"
-            id="validate_other_switch"
-            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-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_slider"
-        title="Slider"
-      >
-        Slider
-      </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-slider ant-slider-horizontal ant-slider-with-marks"
-          >
-            <div
-              class="ant-slider-rail"
-            />
-            <div
-              class="ant-slider-track"
-              style="left:0%;width:0%"
-            />
-            <div
-              class="ant-slider-step"
-            >
-              <span
-                class="ant-slider-dot ant-slider-dot-active"
-                style="left:0%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:20%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:40%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:60%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:80%;transform:translateX(-50%)"
-              />
-              <span
-                class="ant-slider-dot"
-                style="left:100%;transform:translateX(-50%)"
-              />
-            </div>
-            <div
-              aria-disabled="false"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              aria-valuenow="0"
-              class="ant-slider-handle"
-              role="slider"
-              style="left:0%;transform:translateX(-50%)"
-              tabindex="0"
-            />
-            <div
-              class="ant-slider-mark"
-            >
-              <span
-                class="ant-slider-mark-text ant-slider-mark-text-active"
-                style="left:0%;transform:translateX(-50%)"
-              >
-                A
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:20%;transform:translateX(-50%)"
-              >
-                B
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:40%;transform:translateX(-50%)"
-              >
-                C
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:60%;transform:translateX(-50%)"
-              >
-                D
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:80%;transform:translateX(-50%)"
-              >
-                E
-              </span>
-              <span
-                class="ant-slider-mark-text"
-                style="left:100%;transform:translateX(-50%)"
-              >
-                F
-              </span>
-            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_radio-group"
-        title="Radio.Group"
-      >
-        Radio.Group
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="Captcha"
         >
-          <div
-            class="ant-radio-group ant-radio-group-outline"
-            id="validate_other_radio-group"
-          >
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="a"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 1
-              </span>
-            </label>
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="b"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 2
-              </span>
-            </label>
-            <label
-              class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio"
-              >
-                <input
-                  class="ant-radio-input"
-                  type="radio"
-                  value="c"
-                />
-                <span
-                  class="ant-radio-inner"
-                />
-              </span>
-              <span>
-                item 3
-              </span>
-            </label>
-          </div>
-        </div>
+          Captcha
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="validate_other_radio-button"
-        title="Radio.Button"
-      >
-        Radio.Button
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-radio-group ant-radio-group-outline"
-            id="validate_other_radio-button"
-          >
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="a"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 1
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="b"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 2
-              </span>
-            </label>
-            <label
-              class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-            >
-              <span
-                class="ant-radio-button"
-              >
-                <input
-                  class="ant-radio-button-input"
-                  type="radio"
-                  value="c"
-                />
-                <span
-                  class="ant-radio-button-inner"
-                />
-              </span>
-              <span>
-                item 3
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_checkbox-group"
-        title="Checkbox.Group"
-      >
-        Checkbox.Group
-      </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-checkbox-group"
-            id="validate_other_checkbox-group"
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-row"
+              style="margin-left:-4px;margin-right:-4px"
             >
               <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="A"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    A
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      disabled=""
-                      type="checkbox"
-                      value="B"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    B
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="C"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    C
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="D"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    D
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="E"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    E
-                  </span>
-                </label>
-              </div>
-              <div
-                class="ant-col ant-col-8"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
-                  style="line-height:32px"
-                >
-                  <span
-                    class="ant-checkbox"
-                  >
-                    <input
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                      value="F"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                  <span>
-                    F
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_rate"
-        title="Rate"
-      >
-        Rate
-      </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"
-        >
-          <ul
-            class="ant-rate"
-            role="radiogroup"
-            tabindex="0"
-          >
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="1"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="2"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-full"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="3"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-zero"
-            >
-              <div
-                aria-checked="true"
-                aria-posinset="4"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-            <li
-              class="ant-rate-star ant-rate-star-zero"
-            >
-              <div
-                aria-checked="false"
-                aria-posinset="5"
-                aria-setsize="5"
-                role="radio"
-                tabindex="0"
-              >
-                <div
-                  class="ant-rate-star-first"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-                <div
-                  class="ant-rate-star-second"
-                >
-                  <span
-                    aria-label="star"
-                    class="anticon anticon-star"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="star"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="validate_other_upload"
-        title="Upload"
-      >
-        Upload
-      </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"
-        >
-          <span
-            class=""
-          >
-            <div
-              class="ant-upload ant-upload-select ant-upload-select-picture"
-            >
-              <span
-                class="ant-upload"
-                role="button"
-                tabindex="0"
+                class="ant-col ant-col-12"
+                style="padding-left:4px;padding-right:4px"
               >
                 <input
-                  accept=""
-                  id="validate_other_upload"
-                  style="display:none"
-                  type="file"
+                  class="ant-input"
+                  id="register_captcha"
+                  type="text"
+                  value=""
                 />
+              </div>
+              <div
+                class="ant-col ant-col-12"
+                style="padding-left:4px;padding-right:4px"
+              >
                 <button
                   class="ant-btn ant-btn-default"
                   type="button"
                 >
-                  <span
-                    aria-label="upload"
-                    class="anticon anticon-upload"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="upload"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-                      />
-                    </svg>
-                  </span>
                   <span>
-                    Click to upload
+                    Get captcha
                   </span>
                 </button>
-              </span>
+              </div>
             </div>
-            <div
-              class="ant-upload-list ant-upload-list-picture"
-            />
-          </span>
+          </div>
+        </div>
+        <div
+          class="ant-form-item-extra"
+        >
+          We must make sure that your are a human.
         </div>
-      </div>
-      <div
-        class="ant-form-item-extra"
-      >
-        longgggggggggggggggggggggggggggggggggg
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Dragger"
-      >
-        Dragger
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-14 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span>
-            <div
-              class="ant-upload ant-upload-drag"
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <label
+              class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
             >
               <span
-                class="ant-upload ant-upload-btn"
-                role="button"
-                tabindex="0"
+                class="ant-checkbox"
               >
                 <input
-                  accept=""
-                  id="validate_other_dragger"
-                  style="display:none"
-                  type="file"
+                  class="ant-checkbox-input"
+                  id="register_agreement"
+                  type="checkbox"
+                />
+                <span
+                  class="ant-checkbox-inner"
                 />
-                <div
-                  class="ant-upload-drag-container"
-                >
-                  <p
-                    class="ant-upload-drag-icon"
-                  >
-                    <span
-                      aria-label="inbox"
-                      class="anticon anticon-inbox"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="inbox"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="0 0 1024 1024"
-                        width="1em"
-                      >
-                        <path
-                          d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
-                        />
-                      </svg>
-                    </span>
-                  </p>
-                  <p
-                    class="ant-upload-text"
-                  >
-                    Click or drag file to this area to upload
-                  </p>
-                  <p
-                    class="ant-upload-hint"
-                  >
-                    Support for a single or bulk upload.
-                  </p>
-                </div>
               </span>
-            </div>
-            <div
-              class="ant-upload-list ant-upload-list-text"
-            />
-          </span>
+              <span>
+                I have read the 
+                <a
+                  href=""
+                >
+                  agreement
+                </a>
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
-            </span>
-          </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Register
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -8699,437 +6187,466 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
+exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
 <form
-  class="ant-form ant-form-horizontal"
+  class="ant-form ant-form-vertical"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input ant-input-status-error"
-            id="error"
-            placeholder="unavailable choice"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should be combination of numbers & alphabets
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required-mark-optional"
+          for="requiredMarkValue"
+          title="Required Mark"
         >
+          Required Mark
           <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning"
+            class="ant-form-item-optional"
+            title=""
           >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="smile"
-                class="anticon anticon-smile"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="smile"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              id="warning"
-              placeholder="Warning"
-              type="text"
-              value=""
-            />
+            (optional)
           </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Validating"
-      >
-        Validating
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-validating ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="validating"
-              placeholder="I'm the content is being validated"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
-              >
-                <span
-                  aria-label="loading"
-                  class="anticon anticon-loading anticon-spin"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="loading"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
+        </label>
       </div>
       <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-explain-validating"
-          role="alert"
-        >
-          The information is being validated...
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="success"
-              placeholder="I'm the content"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="warning2"
-              placeholder="Warning"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-              >
-                <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              id="error2"
-              placeholder="unavailable choice"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should be combination of numbers & alphabets
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker ant-picker-status-success ant-picker-has-feedback"
-            style="width:100%"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
+              class="ant-radio-group ant-radio-group-outline"
+              id="requiredMarkValue"
             >
-              <input
-                autocomplete="off"
-                placeholder="Select date"
-                readonly=""
-                size="12"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
               >
                 <span
-                  aria-label="calendar"
-                  class="anticon anticon-calendar"
+                  class="ant-radio-button ant-radio-button-checked"
+                >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="optional"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Optional
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="true"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Required
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="false"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Hidden
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-required-mark-optional"
+          title="Field A"
+        >
+          Field A
+          <span
+            aria-label="question-circle"
+            class="anticon anticon-question-circle ant-form-item-tooltip"
+            role="img"
+            title=""
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="question-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+              />
+            </svg>
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required-mark-optional"
+          title="Field B"
+        >
+          Field B
+          <span
+            aria-label="info-circle"
+            class="anticon anticon-info-circle ant-form-item-tooltip"
+            role="img"
+            title=""
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="info-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-form-item-optional"
+            title=""
+          >
+            (optional)
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col 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-primary"
+              type="button"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/size.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal ant-form-default"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="size"
+          title="Form Size"
+        >
+          Form Size
+        </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 ant-radio-group-default"
+              id="size"
+            >
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="small"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Small
+                </span>
+              </label>
+              <label
+                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"
+                >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="default"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Default
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  Large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <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-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    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="calendar"
+                    data-icon="down"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -9137,21 +6654,237 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                     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"
+                      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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
                 <span
-                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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-default"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  placeholder="Select date"
+                  readonly=""
+                  size="12"
+                  title=""
+                  value=""
+                />
+                <span
+                  class="ant-picker-suffix"
                 >
                   <span
-                    aria-label="check-circle"
-                    class="anticon anticon-check-circle"
+                    aria-label="calendar"
+                    class="anticon anticon-calendar"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="check-circle"
+                      data-icon="calendar"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
@@ -9159,727 +6892,11 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                        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>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
-            style="width:100%"
-          >
-            <div
-              class="ant-picker-input"
-            >
-              <input
-                autocomplete="off"
-                placeholder="Select time"
-                readonly=""
-                size="10"
-                title=""
-                value=""
-              />
-              <span
-                class="ant-picker-suffix"
-              >
-                <span
-                  aria-label="clock-circle"
-                  class="anticon anticon-clock-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clock-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    />
-                    <path
-                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-                >
-                  <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
-            style="width:100%"
-          >
-            <div
-              class="ant-picker-input ant-picker-input-active"
-            >
-              <input
-                autocomplete="off"
-                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"
-                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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <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-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm Select
-              </span>
-            </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Validating"
-      >
-        Validating
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm Cascader
-              </span>
-            </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Something breaks the rule.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <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-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-placeholder"
-              >
-                I'm TreeSelect
-              </span>
-            </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
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-              >
-                <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-warning"
-          role="alert"
-        >
-          Need to be checked
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-    style="margin-bottom:0"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="inline"
-      >
-        inline
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
-            style="display:inline-block;width:calc(50% - 12px)"
-          >
-            <div
-              class="ant-col 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-status-error"
-                  >
-                    <div
-                      class="ant-picker-input"
-                    >
-                      <input
-                        autocomplete="off"
-                        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
-                class="ant-form-item-explain ant-form-item-explain-connected"
-              >
-                <div
-                  class="ant-form-item-explain-error"
-                  role="alert"
-                >
-                  Please select right date
-                </div>
-              </div>
-            </div>
-          </div>
-          <span
-            style="display:inline-block;width:24px;line-height:32px;text-align:center"
-          >
-            -
-          </span>
-          <div
-            class="ant-row ant-form-item"
-            style="display:inline-block;width:calc(50% - 12px)"
-          >
-            <div
-              class="ant-col ant-form-item-control"
-            >
-              <div
-                class="ant-form-item-control-input"
-              >
-                <div
-                  class="ant-form-item-control-input-content"
-                >
-                  <div
-                    class="ant-picker"
-                  >
-                    <div
-                      class="ant-picker-input"
-                    >
-                      <input
-                        autocomplete="off"
-                        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>
@@ -9888,33 +6905,32 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-success ant-input-number-affix-wrapper-has-feedback"
-            style="width:100%"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
+              class="ant-input-number ant-input-number-in-form-item"
             >
               <div
                 class="ant-input-number-handler-wrap"
@@ -9986,567 +7002,87 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 />
               </div>
             </div>
-            <span
-              class="ant-input-number-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Success"
-      >
-        Success
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="Switch"
         >
-          <span
-            class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              class="ant-input"
-              placeholder="with allowClear"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
-              >
-                <span
-                  aria-label="check-circle"
-                  class="anticon anticon-check-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="check-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
+          Switch
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Warning"
-      >
-        Warning
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              placeholder="with input password"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
-              >
-                <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Error"
-      >
-        Error
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-          >
-            <input
-              action="click"
-              class="ant-input"
-              placeholder="with input password and allowClear"
-              type="password"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-status-error ant-mentions-affix-wrapper-has-feedback"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-mentions ant-mentions-status-error"
+            <button
+              aria-checked="false"
+              class="ant-switch"
+              role="switch"
+              type="button"
             >
-              <textarea
-                class="rc-textarea"
-                rows="1"
-              />
-            </div>
-            <span
-              class="ant-mentions-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
-  >
-    <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
-    >
-      <label
-        class=""
-        title="Fail"
-      >
-        Fail
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
-            data-count="0"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
-            >
-              <textarea
-                class="ant-input ant-input-status-error"
+              <div
+                class="ant-switch-handle"
               />
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-                role="button"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="ant-input-textarea-suffix"
-            >
-              <span
-                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
+                class="ant-switch-inner"
+              />
+            </button>
           </div>
         </div>
       </div>
-      <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
-      >
-        <div
-          class="ant-form-item-explain-error"
-          role="alert"
-        >
-          Should have something
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-vertical"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="url"
-        title="URL"
-      >
-        URL
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-form-item-control-input-content"
-        >
-          <input
-            class="ant-input"
-            id="url"
-            placeholder="input placeholder"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-space ant-space-horizontal ant-space-align-center"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-space-item"
-              style="margin-right:8px"
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
             >
-              <button
-                class="ant-btn ant-btn-primary"
-                type="submit"
-              >
-                <span>
-                  Submit
-                </span>
-              </button>
-            </div>
-            <div
-              class="ant-space-item"
-            >
-              <button
-                class="ant-btn ant-btn-default"
-                type="button"
-              >
-                <span>
-                  Fill
-                </span>
-              </button>
-            </div>
+              <span>
+                Button
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -10555,53 +7091,319 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
+exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
+  id="time_related_controls"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-with-help"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-7 ant-form-item-label"
-    >
-      <label
-        class=""
-        title="Prime between 8 & 12"
-      >
-        Prime between 8 & 12
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-12 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_date-picker"
+          title="DatePicker"
+        >
+          DatePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-input-number ant-input-number-in-form-item"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-input-number-handler-wrap"
+              class="ant-picker"
             >
-              <span
-                aria-disabled="false"
-                aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up"
-                role="button"
-                unselectable="on"
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_date-picker"
+                  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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_date-time-picker"
+          title="DatePicker[showTime]"
+        >
+          DatePicker[showTime]
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_date-time-picker"
+                  placeholder="Select date"
+                  readonly=""
+                  size="21"
+                  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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_month-picker"
+          title="MonthPicker"
+        >
+          MonthPicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_month-picker"
+                  placeholder="Select month"
+                  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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_range-picker"
+          title="RangePicker"
+        >
+          RangePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_range-picker"
+                  placeholder="Start date"
+                  readonly=""
+                  size="12"
+                  value=""
+                />
+              </div>
+              <div
+                class="ant-picker-range-separator"
               >
                 <span
-                  aria-label="up"
-                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  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"
+                  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="up"
+                    data-icon="calendar"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -10609,21 +7411,501 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
                     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"
+                      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-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_range-time-picker"
+          title="RangePicker[showTime]"
+        >
+          RangePicker[showTime]
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_range-time-picker"
+                  placeholder="Start date"
+                  readonly=""
+                  size="21"
+                  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"
+                  placeholder="End date"
+                  readonly=""
+                  size="21"
+                  value=""
+                />
+              </div>
+              <div
+                class="ant-picker-active-bar"
+                style="left:0;width:0;position:absolute"
+              />
               <span
-                aria-disabled="false"
-                aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down"
-                role="button"
+                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-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      >
+        <label
+          class="ant-form-item-required"
+          for="time_related_controls_time-picker"
+          title="TimePicker"
+        >
+          TimePicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  id="time_related_controls_time-picker"
+                  placeholder="Select time"
+                  readonly=""
+                  size="10"
+                  title=""
+                  value=""
+                />
+                <span
+                  class="ant-picker-suffix"
+                >
+                  <span
+                    aria-label="clock-circle"
+                    class="anticon anticon-clock-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="clock-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                      />
+                      <path
+                        d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/useWatch.md correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-vertical"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="name"
+            title="Name (Watch to trigger rerender)"
+          >
+            Name (Watch to trigger rerender)
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="name"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="age"
+            title="Age (Not Watch)"
+          >
+            Age (Not Watch)
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+              >
+                <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"
+                    id="age"
+                    role="spinbutton"
+                    step="1"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      Name Value: 
+    </pre>
+  </article>,
+]
+`;
+
+exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="validate_other"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Plain Text"
+        >
+          Plain Text
+        </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"
+          >
+            <span
+              class="ant-form-text"
+            >
+              China
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_select"
+          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-has-feedback ant-select-single ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-activedescendant="validate_other_select_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="validate_other_select_list"
+                    aria-haspopup="listbox"
+                    aria-owns="validate_other_select_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="validate_other_select"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Please select a country
+                </span>
+              </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-input-number-handler-down-inner"
+                  class="anticon anticon-down ant-select-suffix"
                   role="img"
                 >
                   <svg
@@ -10642,31 +7924,3257 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_select-multiple"
+          title="Select[multiple]"
+        >
+          Select[multiple]
+        </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-input-wrap"
+              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
-              <input
-                aria-valuemax="12"
-                aria-valuemin="8"
-                aria-valuenow="11"
-                autocomplete="off"
-                class="ant-input-number-input"
-                role="spinbutton"
-                step="1"
-                value="11"
-              />
+              <div
+                class="ant-select-selector"
+              >
+                <div
+                  class="ant-select-selection-overflow"
+                >
+                  <div
+                    class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+                    style="opacity:1"
+                  >
+                    <div
+                      class="ant-select-selection-search"
+                      style="width:0"
+                    >
+                      <input
+                        aria-activedescendant="validate_other_select-multiple_list_0"
+                        aria-autocomplete="list"
+                        aria-controls="validate_other_select-multiple_list"
+                        aria-haspopup="listbox"
+                        aria-owns="validate_other_select-multiple_list"
+                        autocomplete="off"
+                        class="ant-select-selection-search-input"
+                        id="validate_other_select-multiple"
+                        readonly=""
+                        role="combobox"
+                        style="opacity:0"
+                        type="search"
+                        unselectable="on"
+                        value=""
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-selection-search-mirror"
+                      >
+                         
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  Please select favourite colors
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
       <div
-        class="ant-form-item-explain ant-form-item-explain-connected"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="InputNumber"
+        >
+          InputNumber
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class=""
-          role="alert"
+          class="ant-form-item-control-input"
         >
-          A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-number ant-input-number-in-form-item"
+            >
+              <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
+                  aria-valuemax="10"
+                  aria-valuemin="1"
+                  aria-valuenow="3"
+                  autocomplete="off"
+                  class="ant-input-number-input"
+                  id="validate_other_input-number"
+                  role="spinbutton"
+                  step="1"
+                  value="3"
+                />
+              </div>
+            </div>
+            <span
+              class="ant-form-text"
+            >
+               machines
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_switch"
+          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"
+              id="validate_other_switch"
+              role="switch"
+              type="button"
+            >
+              <div
+                class="ant-switch-handle"
+              />
+              <span
+                class="ant-switch-inner"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_slider"
+          title="Slider"
+        >
+          Slider
+        </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-slider ant-slider-horizontal ant-slider-with-marks"
+            >
+              <div
+                class="ant-slider-rail"
+              />
+              <div
+                class="ant-slider-track"
+                style="left:0%;width:0%"
+              />
+              <div
+                class="ant-slider-step"
+              >
+                <span
+                  class="ant-slider-dot ant-slider-dot-active"
+                  style="left:0%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:20%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:40%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:60%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:80%;transform:translateX(-50%)"
+                />
+                <span
+                  class="ant-slider-dot"
+                  style="left:100%;transform:translateX(-50%)"
+                />
+              </div>
+              <div
+                aria-disabled="false"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="0"
+                class="ant-slider-handle"
+                role="slider"
+                style="left:0%;transform:translateX(-50%)"
+                tabindex="0"
+              />
+              <div
+                class="ant-slider-mark"
+              >
+                <span
+                  class="ant-slider-mark-text ant-slider-mark-text-active"
+                  style="left:0%;transform:translateX(-50%)"
+                >
+                  A
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:20%;transform:translateX(-50%)"
+                >
+                  B
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:40%;transform:translateX(-50%)"
+                >
+                  C
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:60%;transform:translateX(-50%)"
+                >
+                  D
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:80%;transform:translateX(-50%)"
+                >
+                  E
+                </span>
+                <span
+                  class="ant-slider-mark-text"
+                  style="left:100%;transform:translateX(-50%)"
+                >
+                  F
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_radio-group"
+          title="Radio.Group"
+        >
+          Radio.Group
+        </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"
+              id="validate_other_radio-group"
+            >
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="a"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 1
+                </span>
+              </label>
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="b"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 2
+                </span>
+              </label>
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio"
+                >
+                  <input
+                    class="ant-radio-input"
+                    type="radio"
+                    value="c"
+                  />
+                  <span
+                    class="ant-radio-inner"
+                  />
+                </span>
+                <span>
+                  item 3
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_radio-button"
+          title="Radio.Button"
+        >
+          Radio.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"
+          >
+            <div
+              class="ant-radio-group ant-radio-group-outline"
+              id="validate_other_radio-button"
+            >
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="a"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 1
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="b"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 2
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="c"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  item 3
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_checkbox-group"
+          title="Checkbox.Group"
+        >
+          Checkbox.Group
+        </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-checkbox-group"
+              id="validate_other_checkbox-group"
+            >
+              <div
+                class="ant-row"
+              >
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox ant-checkbox-checked"
+                    >
+                      <input
+                        checked=""
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="A"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      A
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
+                    >
+                      <input
+                        checked=""
+                        class="ant-checkbox-input"
+                        disabled=""
+                        type="checkbox"
+                        value="B"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      B
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="C"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      C
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="D"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      D
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="E"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      E
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="ant-col ant-col-8"
+                >
+                  <label
+                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
+                    style="line-height:32px"
+                  >
+                    <span
+                      class="ant-checkbox"
+                    >
+                      <input
+                        class="ant-checkbox-input"
+                        type="checkbox"
+                        value="F"
+                      />
+                      <span
+                        class="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      F
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_rate"
+          title="Rate"
+        >
+          Rate
+        </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"
+          >
+            <ul
+              class="ant-rate"
+              role="radiogroup"
+              tabindex="0"
+            >
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="1"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="2"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-full"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="3"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-zero"
+              >
+                <div
+                  aria-checked="true"
+                  aria-posinset="4"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+              <li
+                class="ant-rate-star ant-rate-star-zero"
+              >
+                <div
+                  aria-checked="false"
+                  aria-posinset="5"
+                  aria-setsize="5"
+                  role="radio"
+                  tabindex="0"
+                >
+                  <div
+                    class="ant-rate-star-first"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-rate-star-second"
+                  >
+                    <span
+                      aria-label="star"
+                      class="anticon anticon-star"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="star"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_upload"
+          title="Upload"
+        >
+          Upload
+        </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"
+          >
+            <span
+              class=""
+            >
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-picture"
+              >
+                <span
+                  class="ant-upload"
+                  role="button"
+                  tabindex="0"
+                >
+                  <input
+                    accept=""
+                    id="validate_other_upload"
+                    style="display:none"
+                    type="file"
+                  />
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span
+                      aria-label="upload"
+                      class="anticon anticon-upload"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="upload"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <span>
+                      Click to upload
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-picture"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-form-item-extra"
+        >
+          longgggggggggggggggggggggggggggggggggg
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Dragger"
+        >
+          Dragger
+        </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"
+          >
+            <span>
+              <div
+                class="ant-upload ant-upload-drag"
+              >
+                <span
+                  class="ant-upload ant-upload-btn"
+                  role="button"
+                  tabindex="0"
+                >
+                  <input
+                    accept=""
+                    id="validate_other_dragger"
+                    style="display:none"
+                    type="file"
+                  />
+                  <div
+                    class="ant-upload-drag-container"
+                  >
+                    <p
+                      class="ant-upload-drag-icon"
+                    >
+                      <span
+                        aria-label="inbox"
+                        class="anticon anticon-inbox"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="inbox"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
+                          />
+                        </svg>
+                      </span>
+                    </p>
+                    <p
+                      class="ant-upload-text"
+                    >
+                      Click or drag file to this area to upload
+                    </p>
+                    <p
+                      class="ant-upload-hint"
+                    >
+                      Support for a single or bulk upload.
+                    </p>
+                  </div>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-text"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-12 ant-col-offset-6 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-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-status-error"
+              id="error"
+              placeholder="unavailable choice"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="smile"
+                  class="anticon anticon-smile"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="smile"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                class="ant-input"
+                id="warning"
+                placeholder="Warning"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Validating"
+        >
+          Validating
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-validating ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="validating"
+                placeholder="I'm the content is being validated"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
+                >
+                  <span
+                    aria-label="loading"
+                    class="anticon anticon-loading anticon-spin"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="loading"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="success"
+                placeholder="I'm the content"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="warning2"
+                placeholder="Warning"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                id="error2"
+                placeholder="unavailable choice"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-status-success ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  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
+                    class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                  >
+                    <span
+                      aria-label="check-circle"
+                      class="anticon anticon-check-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="check-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input"
+              >
+                <input
+                  autocomplete="off"
+                  placeholder="Select time"
+                  readonly=""
+                  size="10"
+                  title=""
+                  value=""
+                />
+                <span
+                  class="ant-picker-suffix"
+                >
+                  <span
+                    aria-label="clock-circle"
+                    class="anticon anticon-clock-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="clock-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                      />
+                      <path
+                        d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                  >
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-picker-input ant-picker-input-active"
+              >
+                <input
+                  autocomplete="off"
+                  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"
+                  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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            >
+              <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-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm Select
+                </span>
+              </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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Validating"
+        >
+          Validating
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <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-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm Cascader
+                </span>
+              </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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <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-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                >
+                  I'm TreeSelect
+                </span>
+              </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
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+    style="margin-bottom:0"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="inline"
+        >
+          inline
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
+              style="display:inline-block;width:calc(50% - 12px)"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col 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-status-error"
+                      >
+                        <div
+                          class="ant-picker-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            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>
+            <span
+              style="display:inline-block;width:24px;line-height:32px;text-align:center"
+            >
+              -
+            </span>
+            <div
+              class="ant-form-item"
+              style="display:inline-block;width:calc(50% - 12px)"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col ant-form-item-control"
+                >
+                  <div
+                    class="ant-form-item-control-input"
+                  >
+                    <div
+                      class="ant-form-item-control-input-content"
+                    >
+                      <div
+                        class="ant-picker"
+                      >
+                        <div
+                          class="ant-picker-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-success ant-input-number-affix-wrapper-has-feedback"
+              style="width:100%"
+            >
+              <div
+                class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
+              >
+                <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"
+                    role="spinbutton"
+                    step="1"
+                    value=""
+                  />
+                </div>
+              </div>
+              <span
+                class="ant-input-number-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Success"
+        >
+          Success
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-status-success ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                class="ant-input"
+                placeholder="with allowClear"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
+                >
+                  <span
+                    aria-label="check-circle"
+                    class="anticon anticon-check-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="check-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Warning"
+        >
+          Warning
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-warning ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                placeholder="with input password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Error"
+        >
+          Error
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                placeholder="with input password and allowClear"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-status-error ant-mentions-affix-wrapper-has-feedback"
+            >
+              <div
+                class="ant-mentions ant-mentions-status-error"
+              >
+                <textarea
+                  class="rc-textarea"
+                  rows="1"
+                />
+              </div>
+              <span
+                class="ant-mentions-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+      >
+        <label
+          class=""
+          title="Fail"
+        >
+          Fail
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
+              data-count="0"
+            >
+              <span
+                class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-status-error ant-input-affix-wrapper-has-feedback"
+              >
+                <textarea
+                  class="ant-input ant-input-status-error"
+                />
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                class="ant-input-textarea-suffix"
+              >
+                <span
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-vertical"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="url"
+          title="URL"
+        >
+          URL
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="url"
+              placeholder="input placeholder"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center"
+            >
+              <div
+                class="ant-space-item"
+                style="margin-right:8px"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="submit"
+                >
+                  <span>
+                    Submit
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Fill
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-form-item ant-form-item-with-help"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-7 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Prime between 8 & 12"
+        >
+          Prime between 8 & 12
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-12 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"
+            >
+              <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
+                  aria-valuemax="12"
+                  aria-valuemin="8"
+                  aria-valuenow="11"
+                  autocomplete="off"
+                  class="ant-input-number-input"
+                  role="spinbutton"
+                  step="1"
+                  value="11"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form/__tests__/__snapshots__/index.test.js.snap
index d5098a6f47..db7e450a58 100644
--- a/components/form/__tests__/__snapshots__/index.test.js.snap
+++ b/components/form/__tests__/__snapshots__/index.test.js.snap
@@ -5,23 +5,27 @@ exports[`Form Form item hidden noStyle should not work when hidden 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-hidden"
+    class="ant-form-item ant-form-item-hidden"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            class="ant-input"
-            id="light"
-            type="text"
-            value=""
-          />
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="light"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -34,23 +38,27 @@ exports[`Form Form item hidden should work 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-hidden"
+    class="ant-form-item ant-form-item-hidden"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            class="ant-input"
-            id="light"
-            type="text"
-            value=""
-          />
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="light"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -63,21 +71,25 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
   class="ant-form ant-form-horizontal"
 >
   <div
-    aria-hidden="true"
-    cccc="bbbb"
-    class="ant-row ant-form-item"
-    data-text="123"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      aria-hidden="true"
+      cccc="bbbb"
+      class="ant-row ant-form-item-row"
+      data-text="123"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          text
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            text
+          </div>
         </div>
       </div>
     </div>
@@ -90,116 +102,50 @@ exports[`Form form should support disabled 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          for="disabled"
+          title="Form disabled"
         >
-          <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
-          >
-            <span
-              class="ant-checkbox ant-checkbox-disabled"
-            >
-              <input
-                class="ant-checkbox-input"
-                disabled=""
-                id="disabled"
-                type="checkbox"
-                value=""
-              />
-              <span
-                class="ant-checkbox-inner"
-              />
-            </span>
-            <span>
-              disabled
-            </span>
-          </label>
-        </div>
+          Form disabled
+        </label>
       </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"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-radio-group ant-radio-group-outline"
+            class="ant-form-item-control-input-content"
           >
             <label
-              class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
+              class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
             >
               <span
-                class="ant-radio ant-radio-disabled"
+                class="ant-checkbox ant-checkbox-disabled"
               >
                 <input
-                  class="ant-radio-input"
+                  class="ant-checkbox-input"
                   disabled=""
-                  type="radio"
-                  value="apple"
+                  id="disabled"
+                  type="checkbox"
+                  value=""
                 />
                 <span
-                  class="ant-radio-inner"
+                  class="ant-checkbox-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 
+                disabled
               </span>
             </label>
           </div>
@@ -208,326 +154,533 @@ exports[`Form form should support disabled 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class=""
+          title="Radio"
         >
-          <input
-            class="ant-input ant-input-disabled"
-            disabled=""
-            type="text"
-            value=""
-          />
-        </div>
+          Radio
+        </label>
       </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"
+        class="ant-col ant-col-14 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              class="ant-radio-group ant-radio-group-outline"
             >
-              <span
-                class="ant-select-selection-search"
+              <label
+                class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
               >
-                <input
-                  aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  disabled=""
-                  id="rc_select_TEST_OR_SSR"
-                  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;"
-              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"
+                <span
+                  class="ant-radio ant-radio-disabled"
                 >
-                  <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"
+                  <input
+                    class="ant-radio-input"
+                    disabled=""
+                    type="radio"
+                    value="apple"
                   />
-                </svg>
-              </span>
-            </span>
+                  <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>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-select-selector"
-            >
-              <span
-                class="ant-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  disabled=""
-                  id="rc_select_TEST_OR_SSR"
-                  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;"
-              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>
+            <input
+              class="ant-input ant-input-disabled"
+              disabled=""
+              type="text"
+              value=""
+            />
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <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"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-select-selector"
+              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
             >
-              <span
-                class="ant-select-selection-search"
+              <div
+                class="ant-select-selector"
               >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  disabled=""
-                  id="rc_select_TEST_OR_SSR"
-                  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;"
-              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"
+                <span
+                  class="ant-select-selection-search"
                 >
-                  <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"
+                  <input
+                    aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    disabled=""
+                    id="rc_select_TEST_OR_SSR"
+                    readonly=""
+                    role="combobox"
+                    style="opacity: 0;"
+                    type="search"
+                    unselectable="on"
+                    value=""
                   />
-                </svg>
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <span
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="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>
-            </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker ant-picker-disabled"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input"
+              class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
             >
-              <input
-                autocomplete="off"
-                disabled=""
-                placeholder="Select date"
-                readonly=""
-                size="12"
-                title=""
-                value=""
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    disabled=""
+                    id="rc_select_TEST_OR_SSR"
+                    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;"
+                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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    disabled=""
+                    id="rc_select_TEST_OR_SSR"
+                    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;"
+                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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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: 0px; width: 0px; position: absolute;"
               />
               <span
                 class="ant-picker-suffix"
@@ -559,364 +712,275 @@ exports[`Form form should support disabled 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-picker ant-picker-range ant-picker-disabled"
+            class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker-input ant-picker-input-active"
+              class="ant-input-number ant-input-number-in-form-item ant-input-number-disabled"
             >
-              <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"
+              <div
+                class="ant-input-number-handler-wrap"
               >
                 <span
-                  aria-label="swap-right"
-                  class="anticon anticon-swap-right"
-                  role="img"
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="ant-input-number-handler ant-input-number-handler-up"
+                  role="button"
+                  unselectable="on"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="swap-right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
+                  <span
+                    aria-label="up"
+                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                    role="img"
                   >
-                    <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>
+                    <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>
-            </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: 0px; width: 0px; 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"
+                  aria-disabled="false"
+                  aria-label="Decrease Value"
+                  class="ant-input-number-handler ant-input-number-handler-down"
+                  role="button"
+                  unselectable="on"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="up"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                    role="img"
                   >
-                    <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>
+                    <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>
-              </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="Upload"
-      >
-        Upload
-      </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"
-        >
-          <span
-            class=""
-          >
-            <div
-              class="ant-upload ant-upload-select ant-upload-select-text ant-upload-disabled"
-              style="display: none;"
-            >
-              <span
-                class="ant-upload ant-upload-disabled"
-                role="button"
+              </div>
+              <div
+                class="ant-input-number-input-wrap"
               >
                 <input
-                  accept=""
-                  style="display: none;"
-                  type="file"
+                  autocomplete="off"
+                  class="ant-input-number-input"
+                  disabled=""
+                  role="spinbutton"
+                  step="1"
+                  value=""
                 />
-              </span>
+              </div>
             </div>
-            <div
-              class="ant-upload-list ant-upload-list-text"
-            />
-          </span>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="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"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        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-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-default"
-            disabled=""
-            type="button"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Button
+            <textarea
+              class="ant-input ant-input-disabled"
+              disabled=""
+              rows="4"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Upload"
+        >
+          Upload
+        </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"
+          >
+            <span
+              class=""
+            >
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-text ant-upload-disabled"
+                style="display: none;"
+              >
+                <span
+                  class="ant-upload ant-upload-disabled"
+                  role="button"
+                >
+                  <input
+                    accept=""
+                    style="display: none;"
+                    type="file"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-text"
+              />
             </span>
-          </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
@@ -932,17 +996,21 @@ exports[`Form rtl render component should be rendered correctly in RTL direction
 
 exports[`Form rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
-  class="ant-row ant-row-rtl ant-form-item"
+  class="ant-form-item"
 >
   <div
-    class="ant-col ant-form-item-control ant-col-rtl"
+    class="ant-row ant-row-rtl ant-form-item-row"
   >
     <div
-      class="ant-form-item-control-input"
+      class="ant-col ant-form-item-control ant-col-rtl"
     >
       <div
-        class="ant-form-item-control-input-content"
-      />
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        />
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index c37aae0c65..8ca148b17b 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -1303,4 +1303,31 @@ describe('Form', () => {
       'custom-input-status-error',
     );
   });
+
+  it('item customize margin', async () => {
+    const computeSpy = jest.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+      marginBottom: 24,
+    }));
+
+    const { container } = render(
+      <Form>
+        <Form.Item name="required" initialValue="bamboo" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+
+    fireEvent.change(container.querySelector('input'), {
+      target: {
+        value: '',
+      },
+    });
+
+    await sleep(0);
+    computeSpy.mockRestore();
+
+    expect(container.querySelector('.ant-form-item-margin-offset')).toHaveStyle({
+      marginBottom: -24,
+    });
+  });
 });
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 105b9aaf43..3fcbb6019d 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -62,11 +62,8 @@
 
   margin-bottom: @form-item-margin-bottom;
   vertical-align: top;
-  // We delay one frame (0.017s) here to let CSSMotion goes
-  transition: margin-bottom @animation-duration-slow 0.017s linear;
 
   &-with-help {
-    margin-bottom: 0;
     transition: none;
   }
 
@@ -203,9 +200,7 @@
   }
 
   &-explain-connected {
-    height: 0;
-    min-height: 0;
-    opacity: 0;
+    width: 100%;
   }
 
   &-extra {
@@ -214,7 +209,7 @@
 
   &-with-help &-explain {
     height: auto;
-    min-height: @form-item-margin-bottom;
+    // min-height: @form-item-margin-bottom;
     opacity: 1;
   }
 
@@ -249,15 +244,22 @@
 // >>>>>>>>>> Motion <<<<<<<<<<
 // Explain holder
 .@{ant-prefix}-show-help {
-  transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear,
-    margin-bottom @animation-duration-slow @ease-in-out,
-    opacity @animation-duration-slow @ease-in-out;
+  transition: opacity @animation-duration-slow @ease-in-out;
 
-  &-leave {
-    min-height: @form-item-margin-bottom;
+  &-appear,
+  &-enter {
+    opacity: 0;
 
     &-active {
-      min-height: 0;
+      opacity: 1;
+    }
+  }
+
+  &-leave {
+    opacity: 1;
+
+    &-active {
+      opacity: 0;
     }
   }
 }
@@ -279,6 +281,11 @@
     }
   }
 
+  &-leave {
+    transition: height @animation-duration-base @ease-in-out,
+      opacity @animation-duration-base @ease-in-out, transform @animation-duration-base @ease-in-out !important;
+  }
+
   &-leave-active {
     transform: translateY(-5px);
   }
diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap
index 0cd7f469b6..2d9681f9de 100644
--- a/components/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -364,22 +364,26 @@ exports[`Input should support size in form 1`] = `
   class="ant-form ant-form-horizontal ant-form-large"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <input
-            class="ant-input ant-input-lg"
-            type="text"
-            value=""
-          />
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-lg"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index bdbdbe3a4a..b825a82e7c 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -43,107 +43,119 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="coders"
-        title="Top coders"
-      >
-        Top coders
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="coders"
+          title="Top coders"
+        >
+          Top coders
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions"
+            class="ant-form-item-control-input-content"
           >
-            <textarea
-              class="rc-textarea"
-              id="coders"
-              rows="1"
-            />
+            <div
+              class="ant-mentions"
+            >
+              <textarea
+                class="rc-textarea"
+                id="coders"
+                rows="1"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="bio"
-        title="Bio"
-      >
-        Bio
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="bio"
+          title="Bio"
+        >
+          Bio
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions"
+            class="ant-form-item-control-input-content"
           >
-            <textarea
-              class="rc-textarea"
-              id="bio"
-              placeholder="You can use @ to ref user here"
-              rows="3"
-            />
+            <div
+              class="ant-mentions"
+            >
+              <textarea
+                class="rc-textarea"
+                id="bio"
+                placeholder="You can use @ to ref user here"
+                rows="3"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
-            </span>
-          </button>
-             
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+               
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
index 2e2c58f457..0fc796f533 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -43,107 +43,119 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="coders"
-        title="Top coders"
-      >
-        Top coders
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="coders"
+          title="Top coders"
+        >
+          Top coders
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions"
+            class="ant-form-item-control-input-content"
           >
-            <textarea
-              class="rc-textarea"
-              id="coders"
-              rows="1"
-            />
+            <div
+              class="ant-mentions"
+            >
+              <textarea
+                class="rc-textarea"
+                id="coders"
+                rows="1"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="bio"
-        title="Bio"
-      >
-        Bio
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="bio"
+          title="Bio"
+        >
+          Bio
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-16 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
           <div
-            class="ant-mentions"
+            class="ant-form-item-control-input-content"
           >
-            <textarea
-              class="rc-textarea"
-              id="bio"
-              placeholder="You can use @ to ref user here"
-              rows="3"
-            />
+            <div
+              class="ant-mentions"
+            >
+              <textarea
+                class="rc-textarea"
+                id="bio"
+                placeholder="You can use @ to ref user here"
+                rows="3"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
-            </span>
-          </button>
-             
-          <button
-            class="ant-btn ant-btn-default"
-            type="button"
-          >
-            <span>
-              Reset
-            </span>
-          </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+               
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5f5a83554a..1b2fa8e83d 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -230,342 +230,362 @@ Array [
     style="margin:16px 0"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Active"
-        >
-          Active
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <label
+            class=""
+            title="Active"
           >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              role="switch"
-              type="button"
-            >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
-          </div>
+            Active
+          </label>
         </div>
-      </div>
-    </div>
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Button and Input Block"
-        >
-          Button and Input Block
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Size"
-        >
-          Size
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="default"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Default
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="large"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Large
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="small"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Small
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Button Shape"
-        >
-          Button Shape
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Button and Input Block"
+          >
+            Button and Input Block
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="default"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Default
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="square"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Square
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="round"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Round
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="circle"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Circle
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Avatar Shape"
-        >
-          Avatar Shape
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Size"
+          >
+            Size
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <div
+                class="ant-radio-group ant-radio-group-outline"
               >
-                <span
-                  class="ant-radio-button"
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="square"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Square
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="default"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Default
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="large"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Large
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="small"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Small
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Button Shape"
+          >
+            Button Shape
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
               >
-                <span
-                  class="ant-radio-button ant-radio-button-checked"
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="circle"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Circle
-                </span>
-              </label>
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="default"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Default
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="square"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Square
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="round"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Round
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="circle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Circle
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Avatar Shape"
+          >
+            Avatar Shape
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="square"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Square
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="circle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Circle
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index bd5f42700d..a7620b9d87 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -230,342 +230,362 @@ Array [
     style="margin:16px 0"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Active"
-        >
-          Active
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <label
+            class=""
+            title="Active"
           >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              role="switch"
-              type="button"
-            >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
-          </div>
+            Active
+          </label>
         </div>
-      </div>
-    </div>
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Button and Input Block"
-        >
-          Button and Input Block
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Size"
-        >
-          Size
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="default"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Default
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="large"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Large
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="small"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Small
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Button Shape"
-        >
-          Button Shape
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Button and Input Block"
+          >
+            Button and Input Block
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="default"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Default
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="square"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Square
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="round"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Round
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="circle"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Circle
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Avatar Shape"
-        >
-          Avatar Shape
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Size"
+          >
+            Size
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <div
+                class="ant-radio-group ant-radio-group-outline"
               >
-                <span
-                  class="ant-radio-button"
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="square"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Square
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="default"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Default
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="large"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Large
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="small"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Small
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Button Shape"
+          >
+            Button Shape
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
               >
-                <span
-                  class="ant-radio-button ant-radio-button-checked"
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="circle"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Circle
-                </span>
-              </label>
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="default"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Default
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="square"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Square
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="round"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Round
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="circle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Circle
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Avatar Shape"
+          >
+            Avatar Shape
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="square"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Square
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="circle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Circle
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index e529e2147b..3c2bd34cf6 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2294,847 +2294,907 @@ Array [
     style="margin-bottom:16px"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Bordered"
-        >
-          Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <label
+            class=""
+            title="Bordered"
           >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              role="switch"
-              type="button"
-            >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
-          </div>
+            Bordered
+          </label>
         </div>
-      </div>
-    </div>
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="loading"
-        >
-          loading
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Title"
-        >
-          Title
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Column Header"
-        >
-          Column Header
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Footer"
-        >
-          Footer
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Expandable"
-        >
-          Expandable
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Checkbox"
-        >
-          Checkbox
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Fixed Header"
-        >
-          Fixed Header
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Has Data"
-        >
-          Has Data
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Ellipsis"
-        >
-          Ellipsis
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Size"
-        >
-          Size
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="large"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Large
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="middle"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Middle
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="small"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Small
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Table Scroll"
-        >
-          Table Scroll
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="loading"
+          >
+            loading
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Unset
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="scroll"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Scroll
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="fixed"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Fixed Columns
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Table Layout"
-        >
-          Table Layout
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Title"
+          >
+            Title
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Unset
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="fixed"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Fixed
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Pagination Top"
-        >
-          Pagination Top
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Column Header"
+          >
+            Column Header
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topLeft"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopLeft
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topCenter"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopCenter
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topRight"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopRight
-                </span>
-              </label>
-              <label
-                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"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="none"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  None
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Pagination Bottom"
-        >
-          Pagination Bottom
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Footer"
+          >
+            Footer
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomLeft"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomLeft
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Expandable"
+          >
+            Expandable
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomCenter"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomCenter
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Checkbox"
+          >
+            Checkbox
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomRight"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomRight
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Fixed Header"
+          >
+            Fixed Header
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Has Data"
+          >
+            Has Data
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Ellipsis"
+          >
+            Ellipsis
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Size"
+          >
+            Size
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="none"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  None
-                </span>
-              </label>
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="large"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Large
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="middle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Middle
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="small"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Small
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Table Scroll"
+          >
+            Table Scroll
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Unset
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="scroll"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Scroll
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="fixed"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Fixed Columns
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Table Layout"
+          >
+            Table Layout
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Unset
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="fixed"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Fixed
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Pagination Top"
+          >
+            Pagination Top
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topLeft"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopLeft
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topCenter"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopCenter
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topRight"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopRight
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="none"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    None
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Pagination Bottom"
+          >
+            Pagination Bottom
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomLeft"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomLeft
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomCenter"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomCenter
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomRight"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomRight
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="none"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    None
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
@@ -15720,79 +15780,87 @@ Array [
     style="margin-bottom:16px"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Root Table Bordered"
-        >
-          Root Table Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Root Table Bordered"
+          >
+            Root Table Bordered
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              role="switch"
-              type="button"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Child Table Bordered"
-        >
-          Child Table Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Child Table Bordered"
+          >
+            Child Table Bordered
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              role="switch"
-              type="button"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 5ecb246694..aff7375ba2 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -1803,847 +1803,907 @@ Array [
     style="margin-bottom:16px"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Bordered"
-        >
-          Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <label
+            class=""
+            title="Bordered"
           >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              role="switch"
-              type="button"
-            >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
-          </div>
+            Bordered
+          </label>
         </div>
-      </div>
-    </div>
-    <div
-      class="ant-row ant-form-item"
-    >
-      <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="loading"
-        >
-          loading
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="false"
-              class="ant-switch"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Title"
-        >
-          Title
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Column Header"
-        >
-          Column Header
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Footer"
-        >
-          Footer
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Expandable"
-        >
-          Expandable
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Checkbox"
-        >
-          Checkbox
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Fixed Header"
-        >
-          Fixed Header
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Has Data"
-        >
-          Has Data
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Ellipsis"
-        >
-          Ellipsis
-        </label>
-      </div>
-      <div
-        class="ant-col 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"
-              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-form-item-label"
-      >
-        <label
-          class=""
-          title="Size"
-        >
-          Size
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="large"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Large
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="middle"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Middle
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="small"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Small
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Table Scroll"
-        >
-          Table Scroll
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="loading"
+          >
+            loading
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Unset
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="scroll"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Scroll
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="fixed"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Fixed Columns
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Table Layout"
-        >
-          Table Layout
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Title"
+          >
+            Title
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="false"
+                class="ant-switch"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Unset
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="fixed"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Fixed
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Pagination Top"
-        >
-          Pagination Top
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Column Header"
+          >
+            Column Header
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topLeft"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopLeft
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topCenter"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopCenter
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="topRight"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  TopRight
-                </span>
-              </label>
-              <label
-                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"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="none"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  None
-                </span>
-              </label>
+                  class="ant-switch-inner"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Pagination Bottom"
-        >
-          Pagination Bottom
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Footer"
+          >
+            Footer
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
             <div
-              class="ant-radio-group ant-radio-group-outline"
+              class="ant-form-item-control-input-content"
             >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomLeft"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomLeft
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Expandable"
+          >
+            Expandable
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomCenter"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomCenter
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Checkbox"
+          >
+            Checkbox
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="bottomRight"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  BottomRight
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Fixed Header"
+          >
+            Fixed Header
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+                role="switch"
+                type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
-                  class="ant-radio-button"
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Has Data"
+          >
+            Has Data
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Ellipsis"
+          >
+            Ellipsis
+          </label>
+        </div>
+        <div
+          class="ant-col 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"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Size"
+          >
+            Size
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
                 >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="none"
-                  />
                   <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  None
-                </span>
-              </label>
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="large"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Large
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="middle"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Middle
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="small"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Small
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Table Scroll"
+          >
+            Table Scroll
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Unset
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="scroll"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Scroll
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="fixed"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Fixed Columns
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Table Layout"
+          >
+            Table Layout
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button ant-radio-button-checked"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Unset
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="fixed"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    Fixed
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Pagination Top"
+          >
+            Pagination Top
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topLeft"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopLeft
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topCenter"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopCenter
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="topRight"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    TopRight
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="none"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    None
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Pagination Bottom"
+          >
+            Pagination Bottom
+          </label>
+        </div>
+        <div
+          class="ant-col 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-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomLeft"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomLeft
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomCenter"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomCenter
+                  </span>
+                </label>
+                <label
+                  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"
+                  >
+                    <input
+                      checked=""
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="bottomRight"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    BottomRight
+                  </span>
+                </label>
+                <label
+                  class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
+                >
+                  <span
+                    class="ant-radio-button"
+                  >
+                    <input
+                      class="ant-radio-button-input"
+                      type="radio"
+                      value="none"
+                    />
+                    <span
+                      class="ant-radio-button-inner"
+                    />
+                  </span>
+                  <span>
+                    None
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
@@ -11942,79 +12002,87 @@ Array [
     style="margin-bottom:16px"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Root Table Bordered"
-        >
-          Root Table Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Root Table Bordered"
+          >
+            Root Table Bordered
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              role="switch"
-              type="button"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-row ant-form-item"
+      class="ant-form-item"
     >
       <div
-        class="ant-col ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Child Table Bordered"
-        >
-          Child Table Bordered
-        </label>
-      </div>
-      <div
-        class="ant-col ant-form-item-control"
+        class="ant-row ant-form-item-row"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Child Table Bordered"
+          >
+            Child Table Bordered
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-form-item-control-input"
           >
-            <button
-              aria-checked="true"
-              class="ant-switch ant-switch-checked"
-              role="switch"
-              type="button"
+            <div
+              class="ant-form-item-control-input-content"
             >
-              <div
-                class="ant-switch-handle"
-              />
-              <span
-                class="ant-switch-inner"
-              />
-            </button>
+              <button
+                aria-checked="true"
+                class="ant-switch ant-switch-checked"
+                role="switch"
+                type="button"
+              >
+                <div
+                  class="ant-switch-handle"
+                />
+                <span
+                  class="ant-switch-inner"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8872edf356..529a76e721 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3780,77 +3780,81 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="photos"
-        title="Photos"
-      >
-        Photos
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="photos"
+          title="Photos"
+        >
+          Photos
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class=""
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-upload ant-upload-select ant-upload-select-text"
+            <span
+              class=""
             >
-              <span
-                class="ant-upload"
-                role="button"
-                tabindex="0"
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-text"
               >
-                <input
-                  accept=""
-                  style="display:none"
-                  type="file"
-                />
-                <button
-                  class="ant-btn ant-btn-default"
-                  type="button"
+                <span
+                  class="ant-upload"
+                  role="button"
+                  tabindex="0"
                 >
-                  <span
-                    aria-label="upload"
-                    class="anticon anticon-upload"
-                    role="img"
+                  <input
+                    accept=""
+                    style="display:none"
+                    type="file"
+                  />
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="upload"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="upload"
+                      class="anticon anticon-upload"
+                      role="img"
                     >
-                      <path
-                        d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-                      />
-                    </svg>
-                  </span>
-                  <span>
-                    Click to Upload
-                  </span>
-                </button>
-              </span>
-            </div>
-            <div
-              class="ant-upload-list ant-upload-list-text"
-            />
-          </span>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="upload"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <span>
+                      Click to Upload
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-text"
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index 48506072c2..065faa5297 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -3564,77 +3564,81 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-form-item"
   >
     <div
-      class="ant-col ant-col-4 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="photos"
-        title="Photos"
-      >
-        Photos
-      </label>
-    </div>
-    <div
-      class="ant-col ant-form-item-control"
+      class="ant-row ant-form-item-row"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="photos"
+          title="Photos"
+        >
+          Photos
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class=""
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <div
-              class="ant-upload ant-upload-select ant-upload-select-text"
+            <span
+              class=""
             >
-              <span
-                class="ant-upload"
-                role="button"
-                tabindex="0"
+              <div
+                class="ant-upload ant-upload-select ant-upload-select-text"
               >
-                <input
-                  accept=""
-                  style="display:none"
-                  type="file"
-                />
-                <button
-                  class="ant-btn ant-btn-default"
-                  type="button"
+                <span
+                  class="ant-upload"
+                  role="button"
+                  tabindex="0"
                 >
-                  <span
-                    aria-label="upload"
-                    class="anticon anticon-upload"
-                    role="img"
+                  <input
+                    accept=""
+                    style="display:none"
+                    type="file"
+                  />
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="upload"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="upload"
+                      class="anticon anticon-upload"
+                      role="img"
                     >
-                      <path
-                        d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-                      />
-                    </svg>
-                  </span>
-                  <span>
-                    Click to Upload
-                  </span>
-                </button>
-              </span>
-            </div>
-            <div
-              class="ant-upload-list ant-upload-list-text"
-            />
-          </span>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="upload"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                    <span>
+                      Click to Upload
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="ant-upload-list ant-upload-list-text"
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/package.json b/package.json
index 7b8f4d7e77..c9b86a5f75 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "rc-input-number": "~7.3.0",
     "rc-mentions": "~1.9.0",
     "rc-menu": "~9.6.0",
-    "rc-motion": "^2.5.1",
+    "rc-motion": "^2.6.1",
     "rc-notification": "~4.6.0",
     "rc-pagination": "~3.1.17",
     "rc-picker": "~2.6.10",