diff --git a/package.json b/package.json
index 630207c64..3714c375b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.2-beta.6",
+  "version": "3.5.3-beta.1",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/base/src/button/button-group.tsx b/packages/base/src/button/button-group.tsx
index 048723c5f..fba81e3d6 100644
--- a/packages/base/src/button/button-group.tsx
+++ b/packages/base/src/button/button-group.tsx
@@ -26,7 +26,7 @@ const Group = (props: ButtonGroupProps) => {
   const shapeSetted = shape === 'round' ? 'round' : undefined;
 
   return (
-    <div className={groupClass} style={style} dir={config.direction}>
+    <div className={groupClass} style={style} dir={config.direction} id={props.id}>
       {Children.toArray(children).map((child) => {
         const Child = child as React.ReactElement<ButtonProps>;
         return cloneElement<ButtonProps>(Child, {
diff --git a/packages/base/src/button/button.type.ts b/packages/base/src/button/button.type.ts
index d17798ca8..351e1909e 100644
--- a/packages/base/src/button/button.type.ts
+++ b/packages/base/src/button/button.type.ts
@@ -135,6 +135,12 @@ export interface ButtonGroupProps extends Pick<CommonType, 'style' | 'className'
    */
   children: React.ReactNode;
 
+  /**
+   * @en The id of the button group
+   * @cn 按钮组id
+   */
+  id?: string;
+
   jssStyle?: ButtonJssStyle;
 }
 
diff --git a/packages/base/src/cascader/cascader.tsx b/packages/base/src/cascader/cascader.tsx
index 5556e2b94..84bf169ee 100644
--- a/packages/base/src/cascader/cascader.tsx
+++ b/packages/base/src/cascader/cascader.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import {
   util,
@@ -23,6 +23,7 @@ import Result from '../select/result';
 import Icons from '../icons';
 import useWithFormConfig from '../common/use-with-form-config';
 import useTip from '../common/use-tip';
+import { FormFieldContext } from '../form/form-field-context';
 
 import { useConfig, getLocale } from '../config';
 
@@ -30,6 +31,7 @@ const Cascader = <DataItem, Value extends KeygenResult[]>(
   props0: CascaderProps<DataItem, Value>,
 ) => {
   const props = useWithFormConfig(props0);
+  const { fieldId } = useContext(FormFieldContext);
   const defaultHeight = 250;
   const {
     jssStyle,
@@ -711,6 +713,7 @@ const Cascader = <DataItem, Value extends KeygenResult[]>(
 
   return (
     <div
+      id={fieldId}
       tabIndex={disabled === true || showInput ? undefined : 0}
       {...util.getDataAttribute({ ['input-border']: 'true' })}
       className={rootClass}
diff --git a/packages/base/src/checkbox/checkbox-group.tsx b/packages/base/src/checkbox/checkbox-group.tsx
index 0c1dead87..cc6a8aa53 100644
--- a/packages/base/src/checkbox/checkbox-group.tsx
+++ b/packages/base/src/checkbox/checkbox-group.tsx
@@ -2,9 +2,10 @@ import { CheckboxGroupProps } from './checkbox-group.type';
 import { useInputAble, useListSelectMultiple, usePersistFn, util } from '@sheinx/hooks';
 import GroupContext from './group-context';
 import Checkbox from './checkbox';
-import React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import useWithFormConfig from '../common/use-with-form-config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const defaultFormat = (d: any) => d;
 const defaultRenderItem = (d: any) => d;
@@ -13,6 +14,7 @@ const defaultRenderItem = (d: any) => d;
 const Group = <DataItem, Value extends any[]>(props0: CheckboxGroupProps<DataItem, Value>) => {
   const {format = defaultFormat, renderItem = defaultRenderItem} = props0
   const props = useWithFormConfig(props0);
+  const { fieldId } = useContext(FormFieldContext);
   const { children, className, block, keygen, jssStyle, size, style, disabled } = props;
   const checkboxStyle = jssStyle?.checkbox?.();
 
@@ -89,13 +91,13 @@ const Group = <DataItem, Value extends any[]>(props0: CheckboxGroupProps<DataIte
   );
   if (props.data === undefined) {
     return (
-      <div className={groupClass} style={style}>
+      <div className={groupClass} style={style} id={fieldId}>
         <GroupContext.Provider value={providerValue}>{children}</GroupContext.Provider>
       </div>
     );
   } else {
     return (
-      <div className={groupClass} style={style}>
+      <div className={groupClass} style={style} id={fieldId}>
         {props.data.map((d, i) => (
           <Checkbox
             jssStyle={jssStyle}
diff --git a/packages/base/src/checkbox/simple-checkbox.tsx b/packages/base/src/checkbox/simple-checkbox.tsx
index 2baddeb05..a36e66ec4 100644
--- a/packages/base/src/checkbox/simple-checkbox.tsx
+++ b/packages/base/src/checkbox/simple-checkbox.tsx
@@ -1,12 +1,14 @@
 import { useCheck, util } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import { SimpleCheckboxProps } from './checkbox.type';
+import { FormFieldContext } from '../form/form-field-context';
 
 const { getDataAttribute } = util;
 
 const Checkbox = (props: SimpleCheckboxProps) => {
   const { jssStyle, className, style, children, renderFooter, size, theme, ...rest } = props;
+  const { fieldId } = useContext(FormFieldContext);
   const checkboxStyle = jssStyle?.checkbox?.();
   const { getRootProps, getIndicatorProps, getInputProps, disabled, checked } = useCheck({
     ...rest,
@@ -33,6 +35,7 @@ const Checkbox = (props: SimpleCheckboxProps) => {
 
   return (
     <div
+      id={fieldId}
       {...getRootProps({
         className: rootClass,
         style,
diff --git a/packages/base/src/date-picker/result.tsx b/packages/base/src/date-picker/result.tsx
index e193d5838..df7d04587 100644
--- a/packages/base/src/date-picker/result.tsx
+++ b/packages/base/src/date-picker/result.tsx
@@ -1,9 +1,11 @@
 import { getLocale, useConfig } from '../config';
 import { DatePickerProps } from './date-picker.type';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { FormFieldContext } from '../form/form-field-context';
 
 export const Input = (props: {
+  id?: string;
   className?: string;
   value: string;
   placeholder?: string;
@@ -43,6 +45,7 @@ export const Input = (props: {
   }, [props.value, props.open]);
   return (
     <input
+      id={props.id}
       ref={props.onRef}
       style={props.style}
       className={props.className}
@@ -107,6 +110,8 @@ const Result = (props: ResultProps) => {
   } = props;
   const { locale } = useConfig();
 
+  const { fieldId } = useContext(FormFieldContext);
+
   const styles = jssStyle?.datePicker?.();
   const { current: context } = useRef<{ inputRefs: Array<HTMLDivElement>; clickIndex: number }>({
     inputRefs: [],
@@ -162,6 +167,7 @@ const Result = (props: ResultProps) => {
 
   const placeholderArr = getPlaceHolderArr();
 
+  const formFieldId = fieldId.split('__separator__');
   const renderItem = (info: {
     inputable?: boolean;
     target: string | undefined;
@@ -211,6 +217,7 @@ const Result = (props: ResultProps) => {
                 props.onFocus?.(e);
               }}
               onClick={onClickProps}
+              id={formFieldId[info.index]}
             />
         </span>
         <div className={styles?.resultTextBg}></div>
diff --git a/packages/base/src/editable-area/editable-area.tsx b/packages/base/src/editable-area/editable-area.tsx
index a67a5c025..ccc0f0fe4 100644
--- a/packages/base/src/editable-area/editable-area.tsx
+++ b/packages/base/src/editable-area/editable-area.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Textarea } from '../textarea';
 import { EditableAreaProps } from './editable-area.type';
 import AbsoluteList from '../absolute-list';
@@ -6,6 +6,7 @@ import { useInputAble, usePersistFn } from '@sheinx/hooks';
 import classNames from 'classnames';
 import Icons from '../icons';
 import useInnerTitle from '../common/use-inner-title';
+import { FormFieldContext } from '../form/form-field-context';
 
 function formatShowValue(value: unknown) {
   if (!value && value !== 0) return '';
@@ -37,6 +38,8 @@ const EditableArea = (props: EditableAreaProps) => {
     bordered = false,
   } = props;
 
+  const { fieldId } = useContext(FormFieldContext);
+
   const editableAreaStyle = jssStyle?.editableArea?.();
 
   const status = error ? 'error' : props.status;
@@ -166,6 +169,7 @@ const EditableArea = (props: EditableAreaProps) => {
 
   return (
     <div
+      id={fieldId}
       className={classNames(
         className,
         editableAreaStyle?.wrapper,
diff --git a/packages/base/src/form/form-field-context.ts b/packages/base/src/form/form-field-context.ts
new file mode 100644
index 000000000..1f1a853c2
--- /dev/null
+++ b/packages/base/src/form/form-field-context.ts
@@ -0,0 +1,12 @@
+// 把id放到context中
+import React from 'react';
+
+interface FormFieldContextProps {
+  fieldId: string;
+  separator: string;
+}
+
+export const FormFieldContext = React.createContext<FormFieldContextProps>({
+  fieldId: '',
+  separator: '__separator__',
+});
diff --git a/packages/base/src/form/form-field.tsx b/packages/base/src/form/form-field.tsx
index 1c5302097..f7ee2acfc 100644
--- a/packages/base/src/form/form-field.tsx
+++ b/packages/base/src/form/form-field.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useFormControl, usePersistFn, util } from '@sheinx/hooks';
 import { FieldControlProps, FormFieldProps } from './form-field.type';
+import { FormFieldContext } from './form-field-context';
 
 const FormField = <T extends any = any>(props: FormFieldProps<T>) => {
   const { children } = props;
@@ -37,11 +38,21 @@ const FormField = <T extends any = any>(props: FormFieldProps<T>) => {
 
   const status = childrenProps.status ?? (formControl.error ? 'error' : undefined);
 
+  const { separator } = useContext(FormFieldContext);
+  const formFieldId = useMemo(() => {
+    if(childrenProps.id) return childrenProps.id
+
+    if(Array.isArray(formControl.name)) {
+      return formControl.name.map(name => util.getFieldId(name, props.formName)).join(separator)
+    }
+
+    return util.getFieldId(formControl.name, props.formName)
+  }, [formControl.name, props.formName, childrenProps.id])
+
   const cloneProps: FieldControlProps<T> = {
     onChange: handleChange,
     status,
     error,
-    id: childrenProps.id || util.getFieldId(formControl.name, props.formName),
   };
 
   if (formControl.inForm) {
@@ -51,12 +62,21 @@ const FormField = <T extends any = any>(props: FormFieldProps<T>) => {
   if (formControl.disabled) {
     cloneProps.disabled = true;
   }
+
+  let finalChildren
   if (util.isFunc(children)) {
-    return children(cloneProps);
+    finalChildren = children(cloneProps)
+  } else if (React.isValidElement(children)) {
+    finalChildren = React.cloneElement(children, cloneProps)
+  } else {
+    finalChildren = children
   }
-  if (React.isValidElement(children)) return React.cloneElement(children, cloneProps);
 
-  return children;
+  return (
+    <FormFieldContext.Provider value={{ fieldId: formFieldId, separator }}>
+      {finalChildren}
+    </FormFieldContext.Provider>
+  );
 };
 
 export default FormField;
diff --git a/packages/base/src/form/form-field.type.ts b/packages/base/src/form/form-field.type.ts
index d9ac3e93e..3dcf0befc 100644
--- a/packages/base/src/form/form-field.type.ts
+++ b/packages/base/src/form/form-field.type.ts
@@ -7,7 +7,6 @@ export interface FieldControlProps<T> {
   status?: 'error';
   disabled?: boolean;
   error?: { message?: string } | string;
-  id?: string;
 }
 
 export type FormFieldChildrenFunc<T> = (props: FieldControlProps<T>) => React.ReactElement;
diff --git a/packages/base/src/form/form.type.ts b/packages/base/src/form/form.type.ts
index 003b45077..c671d9de1 100644
--- a/packages/base/src/form/form.type.ts
+++ b/packages/base/src/form/form.type.ts
@@ -11,14 +11,14 @@ export interface FormClasses {
 
 export interface FormValidateFn<
   FormValue,
-  FieldKey extends KeyType = keyof FormValue,
-  FieldsType = FieldKey | FieldKey[]
+  // FieldKey extends KeyType = keyof FormValue,
+  // FieldsType = FieldKey | FieldKey[]
 > {
   /**
    * 验证所有表单的值，并且返回报错和表单数据
    * @param fields 需要校验的表单字段
    */
-  (fields?: FieldsType): Promise<Partial<FormValue>>;
+  (fields?: string | string[]): Promise<FormValue>;
 }
 
 
@@ -67,7 +67,7 @@ export interface FormRef<FormValue> {
    * @en Scroll to the position of the specified field
    * @cn 滚动到指定字段的位置
    */
-  scrollToField: (name: string) => void;
+  scrollToField: (name: string, scrollIntoViewOptions?: ScrollIntoViewOptions) => void;
 }
 export interface FormProps<V extends ObjectType>
   extends Partial<BaseFormProps<V>>,
diff --git a/packages/base/src/input/simple-input.tsx b/packages/base/src/input/simple-input.tsx
index bec16bf41..79d91dacb 100644
--- a/packages/base/src/input/simple-input.tsx
+++ b/packages/base/src/input/simple-input.tsx
@@ -1,10 +1,10 @@
 import { useInput, useKeyEvent, usePersistFn, util } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React, { KeyboardEvent } from 'react';
+import React, { KeyboardEvent, useContext } from 'react';
 import { SimpleInputProps } from './input.type';
 import Icons from '../icons';
 import { useConfig } from '../config';
-
+import { FormFieldContext } from '../form/form-field-context';
 const Input = (props: SimpleInputProps) => {
   const {
     jssStyle,
@@ -27,6 +27,7 @@ const Input = (props: SimpleInputProps) => {
 
   const inputStyle = jssStyle?.input?.();
   const config = useConfig();
+  const { fieldId } = useContext(FormFieldContext);
   const { getRootProps, getClearProps, getInputProps, showClear, focused, disabled } = useInput({
     ...rest,
     onFocusedChange,
@@ -69,6 +70,7 @@ const Input = (props: SimpleInputProps) => {
 
   return (
     <div
+      id={fieldId}
       {...util.getDataAttribute({ ['input-border']: 'true' })}
       {...getRootProps({
         className: rootClass,
diff --git a/packages/base/src/radio/radio-group.tsx b/packages/base/src/radio/radio-group.tsx
index 2942afd53..20f104431 100644
--- a/packages/base/src/radio/radio-group.tsx
+++ b/packages/base/src/radio/radio-group.tsx
@@ -2,10 +2,11 @@ import { RadioGroupProps } from './radio-group.type';
 import { useInputAble, useListSelectSingle, usePersistFn, util } from '@sheinx/hooks';
 import groupContext from './group-context';
 import Radio from './radio';
-import React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import useWithFormConfig from '../common/use-with-form-config';
 import Button from '../button/button';
+import { FormFieldContext } from '../form/form-field-context';
 
 const defaultFormat = (d: any) => d;
 const defaultRenderItem = (d: any) => d;
@@ -13,6 +14,7 @@ const defaultRenderItem = (d: any) => d;
 const Group = <DataItem, Value>(props0: RadioGroupProps<DataItem, Value>) => {
   const {format = defaultFormat, renderItem = defaultRenderItem} = props0
   const props = useWithFormConfig(props0);
+  const { fieldId } = useContext(FormFieldContext);
 
   const { children, className, button, block, keygen, jssStyle, style, size, disabled  } = props;
   const radioClasses = jssStyle?.radio?.();
@@ -125,13 +127,13 @@ const Group = <DataItem, Value>(props0: RadioGroupProps<DataItem, Value>) => {
     );
   if (button)
     return (
-      <Button.Group jssStyle={jssStyle} className={groupClass} style={style}>
+      <Button.Group jssStyle={jssStyle} className={groupClass} style={style} id={fieldId}>
         {Radios}
       </Button.Group>
     );
 
   return (
-    <div className={groupClass} style={style}>
+    <div className={groupClass} style={style} id={fieldId}>
       {Radios}
     </div>
   );
diff --git a/packages/base/src/radio/simple-radio.tsx b/packages/base/src/radio/simple-radio.tsx
index 0b5f710d7..007e42c6d 100644
--- a/packages/base/src/radio/simple-radio.tsx
+++ b/packages/base/src/radio/simple-radio.tsx
@@ -1,10 +1,12 @@
 import { useCheck } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import { SimpleRadioProps } from './radio.type';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Radio = (props: SimpleRadioProps) => {
   const { jssStyle, className, style, children, renderRadio, size, theme, ...rest } = props;
+  const { fieldId } = useContext(FormFieldContext);
   const radioClasses = jssStyle?.radio?.();
   const { getRootProps, getIndicatorProps, getInputProps, disabled, checked } = useCheck({
     ...rest,
@@ -31,7 +33,7 @@ const Radio = (props: SimpleRadioProps) => {
   const indicatorProps = getIndicatorProps();
 
   const simpleRadio = (
-    <div {...rootProps}>
+    <div id={fieldId} {...rootProps}>
       <input {...inputProps} type='radio' />
       <span className={indicatorClass}>
         <span {...indicatorProps} className={radioClasses?.indicator} />
diff --git a/packages/base/src/rate/rate.tsx b/packages/base/src/rate/rate.tsx
index 8d04b4d2b..4df16b1a8 100644
--- a/packages/base/src/rate/rate.tsx
+++ b/packages/base/src/rate/rate.tsx
@@ -1,14 +1,16 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { RateProps } from './rate.type';
 import Icons from '../icons';
 import { useInputAble } from '@sheinx/hooks';
 import useWithFormConfig from '../common/use-with-form-config';
 import { useConfig } from '../config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Rate = (props0: RateProps) => {
   const props = useWithFormConfig(props0);
   const config = useConfig();
+  const { fieldId } = useContext(FormFieldContext);
   const { size } = props0;
   const { max = 5, repeat = true, clearable = false } = props;
   const [hoverValue, setHoverValue] = useState<null | number>(null);
@@ -115,6 +117,7 @@ const Rate = (props0: RateProps) => {
   const text = Array.isArray(props.text) && props.text[Math.ceil(value - 1)];
   return (
     <div
+      id={fieldId}
       className={classNames(props.className, rateClasses?.wrapper)}
       style={props.style}
       onMouseLeave={() => {
diff --git a/packages/base/src/select/result.tsx b/packages/base/src/select/result.tsx
index 0c9261b62..0a187fe31 100644
--- a/packages/base/src/select/result.tsx
+++ b/packages/base/src/select/result.tsx
@@ -60,7 +60,6 @@ const Result = <DataItem, Value>(props: ResultProps<DataItem, Value>) => {
   const [more, setMore] = useState(-1);
   const [shouldResetMore, setShouldResetMore] = useState(false);
   const render = useRender();
-
   const resultRef = useRef<HTMLDivElement>(null);
   const prevMore = useRef(more);
   const showInput = allowOnFilter;
diff --git a/packages/base/src/select/select.tsx b/packages/base/src/select/select.tsx
index 8d1e8bd1d..7ee219b45 100644
--- a/packages/base/src/select/select.tsx
+++ b/packages/base/src/select/select.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef, useState } from 'react';
+import React, { ReactNode, useContext, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
   util,
@@ -26,6 +26,7 @@ import ColumnsList from './list-columns';
 import useWithFormConfig from '../common/use-with-form-config';
 import useTip from '../common/use-tip';
 import { getLocale, useConfig } from '../config';
+import { FormFieldContext } from '../form/form-field-context';
 
 function Select<DataItem, Value>(props0: SelectPropsBase<DataItem, Value>) {
   const props = useWithFormConfig(props0);
@@ -538,6 +539,7 @@ function Select<DataItem, Value>(props0: SelectPropsBase<DataItem, Value>) {
     );
   };
 
+  const { fieldId } = useContext(FormFieldContext);
   const renderResult = () => {
     const result = (
       <div className={classNames(styles?.result)}>
@@ -585,6 +587,7 @@ function Select<DataItem, Value>(props0: SelectPropsBase<DataItem, Value>) {
     return (
       <PopupProvider value={popupProviderValue}>
         <div
+          id={fieldId}
           className={classNames(
             styles?.resultWrapper,
             styles?.wrapperPaddingBox,
diff --git a/packages/base/src/slider/slider.tsx b/packages/base/src/slider/slider.tsx
index 59b364743..1f647a8f8 100644
--- a/packages/base/src/slider/slider.tsx
+++ b/packages/base/src/slider/slider.tsx
@@ -1,15 +1,17 @@
 import { useSlider, useInputAble } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import { useConfig } from '../config';
 import { SliderProps } from './slider.type';
 import useWithFormConfig from '../common/use-with-form-config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const defaultScale = [0, 100];
 const Slider = <Value extends number | number[]>(props0: SliderProps<Value>) => {
   const props = useWithFormConfig(props0);
   const sliderClasses = props.jssStyle?.slider?.();
   const config = useConfig()
+  const { fieldId } = useContext(FormFieldContext);
 
   const { scale = defaultScale, step = 1, height = 200, valueTipType: tipType = 'always' } = props;
 
@@ -86,6 +88,7 @@ const Slider = <Value extends number | number[]>(props0: SliderProps<Value>) =>
 
   return (
     <div
+      id={fieldId}
       className={classNames(
         sliderClasses?.wrapper,
         props.autoHide && sliderClasses?.autoHide,
diff --git a/packages/base/src/switch/switch.tsx b/packages/base/src/switch/switch.tsx
index d46030525..65a2468e7 100644
--- a/packages/base/src/switch/switch.tsx
+++ b/packages/base/src/switch/switch.tsx
@@ -1,14 +1,16 @@
 import { useCheck, useInputAble } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import { SwitchProps } from './switch.type';
 import { useConfig } from '../config';
 import useWithFormConfig from '../common/use-with-form-config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Switch = (props0: SwitchProps) => {
   const props = useWithFormConfig(props0);
   const { jssStyle, content, size, loading, className, style } = props;
   const config = useConfig();
+  const { fieldId } = useContext(FormFieldContext);
   const switchClasses = jssStyle?.switch?.();
   const disabled = props.disabled || props.loading;
 
@@ -50,7 +52,7 @@ const Switch = (props0: SwitchProps) => {
   const inputProps = getInputProps();
 
   return (
-    <button type={'button'} role={'switch'} {...rootProps}>
+    <button type={'button'} role={'switch'} id={fieldId} {...rootProps}>
       <input {...inputProps} type={'checkbox'} />
       <div className={switchClasses?.indicator} dir={config.direction}>
         {loading ? <div className={switchClasses?.loading} /> : null}
diff --git a/packages/base/src/textarea/simple-textarea.tsx b/packages/base/src/textarea/simple-textarea.tsx
index 8d9c7dd87..30a787a0c 100644
--- a/packages/base/src/textarea/simple-textarea.tsx
+++ b/packages/base/src/textarea/simple-textarea.tsx
@@ -1,7 +1,8 @@
 import { useKeyEvent, usePersistFn, useTextarea, util } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React, { KeyboardEvent, useEffect } from 'react';
+import React, { KeyboardEvent, useContext, useEffect } from 'react';
 import { SimpleTextareaProps } from './textarea.type';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Textarea = (props: SimpleTextareaProps) => {
   const {
@@ -24,6 +25,7 @@ const Textarea = (props: SimpleTextareaProps) => {
   const { getRootProps, getTextAreaProps, focused, disabled } = useTextarea({
     ...rest,
   });
+  const { fieldId } = useContext(FormFieldContext);
 
   const rootClass = classNames(
     className,
@@ -72,6 +74,7 @@ const Textarea = (props: SimpleTextareaProps) => {
 
   return (
     <div
+      id={fieldId}
       {...util.getDataAttribute({ ['input-border']: 'true' })}
       {...getRootProps({
         className: rootClass,
diff --git a/packages/base/src/transfer/transfer.tsx b/packages/base/src/transfer/transfer.tsx
index ef6def1fe..b33d4cefd 100644
--- a/packages/base/src/transfer/transfer.tsx
+++ b/packages/base/src/transfer/transfer.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { TransferProps } from './transfer.type';
 import { TransferClasses } from './transfer.type';
@@ -7,6 +7,7 @@ import TransferList from './transfer-list';
 import TransferOperate from './transfer-operate';
 import Icon from '../icons';
 import { useConfig } from '../config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Transfer = <DataItem, Value extends KeygenResult[]>(
   props: TransferProps<DataItem, Value>,
@@ -186,8 +187,10 @@ const Transfer = <DataItem, Value extends KeygenResult[]>(
     return renderList('target');
   }, [target, size, filterTargetText, targetSelectedKeys]);
 
+  const { fieldId } = useContext(FormFieldContext);
+
   return (
-    <div className={rootClass} style={style}>
+    <div className={rootClass} style={style} id={fieldId}>
       {renderSourceList}
       {!simple && renderOperations()}
       {renderTargetList}
diff --git a/packages/base/src/tree-select/tree-select.tsx b/packages/base/src/tree-select/tree-select.tsx
index 27c96068a..c144a6089 100644
--- a/packages/base/src/tree-select/tree-select.tsx
+++ b/packages/base/src/tree-select/tree-select.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useContext } from 'react';
 import {
   util,
   usePersistFn,
@@ -23,6 +23,7 @@ import Tree from '../tree';
 import useWithFormConfig from '../common/use-with-form-config';
 import useTip from '../common/use-tip';
 import { getLocale, useConfig } from '../config';
+import { FormFieldContext } from '../form/form-field-context';
 
 export type TreeSelectValueType = KeygenResult | KeygenResult[];
 
@@ -644,8 +645,10 @@ const TreeSelect = <DataItem, Value extends TreeSelectValueType>(
     }
   }, []);
 
+  const { fieldId } = useContext(FormFieldContext);
   return (
     <div
+      id={fieldId}
       ref={targetRef}
       tabIndex={disabled === true || showInput ? undefined : 0}
       {...util.getDataAttribute({ ['input-border']: 'true' })}
diff --git a/packages/base/src/tree/tree.tsx b/packages/base/src/tree/tree.tsx
index 2fb7202ac..c855a7ba7 100644
--- a/packages/base/src/tree/tree.tsx
+++ b/packages/base/src/tree/tree.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { KeygenResult, useTree, util, ObjectKey } from '@sheinx/hooks';
 import { TreeClasses } from './tree.type';
 import { TreeProps } from './tree.type';
 import RootTree from './tree-root';
 import { Provider } from './tree-context';
+import { FormFieldContext } from '../form/form-field-context';
 
 const { produce } = util;
 
@@ -217,8 +218,9 @@ const Tree = <DataItem, Value extends KeygenResult[]>(props: TreeProps<DataItem,
     context.mounted = true;
   }, []);
 
+  const { fieldId } = useContext(FormFieldContext);
   return (
-    <div className={rootClass} {...rest}>
+    <div className={rootClass} id={fieldId} {...rest}>
       <Provider value={datum as any}>
         <RootTree
           isControlled={'expanded' in props}
diff --git a/packages/base/src/upload/upload.tsx b/packages/base/src/upload/upload.tsx
index 8d8ef4c6c..33108f8cc 100644
--- a/packages/base/src/upload/upload.tsx
+++ b/packages/base/src/upload/upload.tsx
@@ -1,5 +1,5 @@
 import { useInputAble, usePersistFn, useUpload, util } from '@sheinx/hooks';
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { UploadProps } from './upload.type';
 import Drop from './drop';
 import classNames from 'classnames';
@@ -9,6 +9,7 @@ import { getLocale, useConfig } from '../config';
 import icons from '../icons';
 import { produce } from 'immer';
 import useWithFormConfig from '../common/use-with-form-config';
+import { FormFieldContext } from '../form/form-field-context';
 
 const Upload = <T,>(props0: UploadProps<T>) => {
   const props = useWithFormConfig(props0);
@@ -223,8 +224,10 @@ const Upload = <T,>(props0: UploadProps<T>) => {
   };
   const CustomResult = props.customResult;
   const shouldRenderLeft = listType !== 'image' || leftHandler;
+  const { fieldId } = useContext(FormFieldContext);
   return (
     <div
+      id={fieldId}
       style={props.style}
       className={classNames(
         uploadClasses?.wrapper,
diff --git a/packages/hooks/src/components/use-form/use-form-context.type.ts b/packages/hooks/src/components/use-form/use-form-context.type.ts
index 742de7755..963b3b206 100644
--- a/packages/hooks/src/components/use-form/use-form-context.type.ts
+++ b/packages/hooks/src/components/use-form/use-form-context.type.ts
@@ -43,5 +43,5 @@ export interface FormRef<Value> {
    * @en scroll to field
    * @cn 滚动到指定字段
    */
-  scrollToField: (name: string) => void;
+  scrollToField: (name: string, scrollIntoViewOptions?: ScrollIntoViewOptions) => void;
 }
diff --git a/packages/hooks/src/components/use-form/use-form.ts b/packages/hooks/src/components/use-form/use-form.ts
index fdf7cd7d6..0dd4973cb 100644
--- a/packages/hooks/src/components/use-form/use-form.ts
+++ b/packages/hooks/src/components/use-form/use-form.ts
@@ -21,6 +21,7 @@ import {
   deepClone,
   getAllKeyPaths,
   getFieldId,
+  getClosestScrollContainer,
 } from '../../utils';
 
 const emptyObj = {};
@@ -216,16 +217,42 @@ const useForm = <T extends ObjectType>(props: UseFormProps<T>) => {
     },
   );
 
-  const scrollToField = usePersistFn((name: string) => {
-    if (!name) return;
-    const fieldId = getFieldId(name, formName);
-    const fieldEl = document?.getElementById(fieldId);
-    if (fieldEl) {
-      fieldEl.scrollIntoView();
-    } else {
-      console.warn(`fieldId: ${fieldId} not found`);
-    }
-  });
+  const scrollToField = usePersistFn(
+    (name: string, scrollIntoViewOptions: ScrollIntoViewOptions = {}) => {
+      if (!name) return;
+      const fieldId = getFieldId(name, formName);
+      const element = document?.getElementById(fieldId);
+      if (element) {
+        // 查找可滚动的父元素
+        const parentEl = getClosestScrollContainer(element)
+
+        if (parentEl) {
+          const parentRect = parentEl.getBoundingClientRect();
+          const elementRect = element.getBoundingClientRect();
+
+          // 判断父元素是否在可见范围内
+          const isVisibleY =
+            elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
+          const isVisibleX =
+            elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
+
+          if (!isVisibleY || !isVisibleX) {
+            // 计算元素相对于父元素的偏移量
+            const offsetTop = element.offsetTop - parentEl.offsetTop;
+            const offsetLeft = element.offsetLeft - parentEl.offsetLeft;
+            parentEl.scrollTop = offsetTop;
+            parentEl.scrollLeft = offsetLeft;
+          }
+        } else {
+          // 如果没有找到可滚动的父元素，使用默认行为
+          element.scrollIntoView({ behavior: "smooth", ...scrollIntoViewOptions });
+        }
+      } else {
+        // todo: 统一警告|错误信息(by Tom)
+        console.warn(`[shineout] fieldId: ${fieldId} not found`);
+      }
+    },
+  );
 
   const remove = () => {
     if (!context.removeArr.size) return;
diff --git a/packages/shineout/src/form/__doc__/changelog.cn.md b/packages/shineout/src/form/__doc__/changelog.cn.md
index 17500818c..74b8f7eab 100644
--- a/packages/shineout/src/form/__doc__/changelog.cn.md
+++ b/packages/shineout/src/form/__doc__/changelog.cn.md
@@ -1,5 +1,5 @@
-## 3.5.2-beta.6
-2024-11-22
+## 3.5.3-beta.1
+2024-11-25
 ### 💎 Enhancement
 
 - 增强 `Form` 的 `validate` 方法，校验成功或失败后返回更多的校验信息 ([#812](https://github.com/sheinsight/shineout-next/pull/812))
diff --git a/packages/shineout/src/form/__example__/001-base.tsx b/packages/shineout/src/form/__example__/001-base.tsx
index 15b0cf84b..0f1fcaa52 100644
--- a/packages/shineout/src/form/__example__/001-base.tsx
+++ b/packages/shineout/src/form/__example__/001-base.tsx
@@ -5,74 +5,69 @@
  *    -- The form has built-in two-way binding mechanism, which automatically issues and collects data based on the name attribute of the form element
  */
 
-import { useState } from 'react';
-import { Form, Input, Table, Button, Rule } from 'shineout';
+import { Form, Input, Upload, Radio, Checkbox, DatePicker, Rate, Textarea } from 'shineout';
 
-export default () => {
-  const [form, setForm] = useState({
-    rules: [],
-  });
-
-  const rules = Rule({
-    isSame: (value, form, callback, props) => {
-      const { code } = value;
-      const sameIndex = form.rules.findIndex((item) => {
-        return item.code === code;
-      });
-      console.log('sameIndex', sameIndex);
-      callback(true);
-    },
-  });
+const star = (
+  <svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M8.276 7.825L1.85649 8.7559L1.74278 8.77878C1.00761 8.96968 0.736859 9.90915 1.30093 10.4606L5.953 15.008L4.84231 21.3268L4.82911 21.4327C4.77288 22.2003 5.59415 22.7575 6.29763 22.3824L11.999 19.343L17.7023 22.3825L17.7988 22.4279C18.5105 22.7194 19.2948 22.1128 19.1578 21.3281L18.054 15.008L22.6997 10.46L22.7779 10.3745C23.2586 9.78723 22.9242 8.86973 22.1443 8.75601L15.758 7.825L12.895 2.05544C12.5264 1.31273 11.4661 1.31545 11.1013 2.06004L8.276 7.825Z' />
+  </svg>
+);
 
-  const columns = [
-    {
-      title: 'code',
-      render: (d, i) => {
-        return (
-          <Form.FieldSet name={`rules[${i}]`} rules={[rules.isSame]}>
-            <Input name='code'></Input>
-          </Form.FieldSet>
-        );
-      },
-    },
-    {
-      title: 'hash',
-      render: (d, i) => {
-        return (
-          <Form.FieldSet name={`rules[${i}]`}>
-            <Input name='hash'></Input>
-          </Form.FieldSet>
-        );
-      },
-    },
-  ];
+const StarRate = Rate(star, star);
 
-  const handleAppend = () => {
-    const nextItem = {
-      code: '',
-      hash: '',
-    };
-
-    const nextForm = {
-      rules: [...form.rules, nextItem],
-    };
-    setForm(nextForm);
-  };
+export default () => {
   return (
     <div>
-      <Button onClick={handleAppend}> add </Button>
       <Form
-        value={form}
+        defaultValue={{ name: 'zhangsan', email: 'zhangsan@qq.com', score: 3 }}
         onSubmit={(v) => {
           console.log('form submit', v);
         }}
-        onChange={setForm}
+        onChange={(v) => {
+          console.log('form change', v);
+        }}
         onReset={() => {
           console.log('form reset');
         }}
       >
+        <Form.Item label='Name'>
+          <Input name={'name'} placeholder='please input name' clearable />
+        </Form.Item>
+        <Form.Item label='Password'>
+          <Input name={'password'} placeholder='please input password' clearable />
+        </Form.Item>
+        <Form.Item label='Email'>
+          <Input name={'email'} clearable placeholder='please input email' />
+        </Form.Item>
+        <Form.Item label='Gendar'>
+          <Radio.Group name='gendar' data={['male', 'female']} keygen />
+        </Form.Item>
+        <Form.Item label='Course'>
+          <Checkbox.Group name='course' data={['chinese', 'maths', 'english', 'physics']} keygen />
+        </Form.Item>
+        <Form.Item label='Enrollment date'>
+          <DatePicker name='date' placeholder={'please select date'} clearable showSelNow />
+        </Form.Item>
+        <Form.Item label='Score'>
+          <StarRate name='score'></StarRate>
+        </Form.Item>
+        <Form.Item label='upload avatar'>
+          <Upload.Image
+            action='/api/upload'
+            accept='image/*'
+            name='file'
+            htmlName='file'
+            recoverAble
+            leftHandler
+            removeConfirm='Are you sure to delete it ?'
+            limit={3}
+            onSuccess={(_res, filem, data) => {
+              return data;
+            }}
+          />
+        </Form.Item>
         <Form.Item label='Address'>
-          <Table data={form.rules} keygen={(d, i) => i} columns={columns}></Table>
+          <Textarea name='address' />
         </Form.Item>
 
         <Form.Item label='' style={{ marginTop: 32, marginBottom: 0 }}>
diff --git a/packages/shineout/src/form/__example__/006-validate-05-multi-form.tsx b/packages/shineout/src/form/__example__/006-validate-05-multi-form.tsx
deleted file mode 100644
index 43222d730..000000000
--- a/packages/shineout/src/form/__example__/006-validate-05-multi-form.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * cn - 多表单校验
- *    -- 可以通过 formRef 去获得表单的一些方法集, 包含校验, 清空校验, 提交等
- * en - Form Methods
- *    -- You can use formRef to get some methods of the form, including validation, clear validation, submission, etc
- */
-import React, { useEffect, useState } from 'react';
-import { Form, Input, Button, Tabs } from 'shineout';
-
-type Brand = {
-  name: string;
-  [key: string]: any;
-};
-
-type ValueType = {
-  public: {
-    publicField1: string;
-    publicField2: string;
-  };
-  brands: Brand[];
-};
-
-const App: React.FC = () => {
-  const [activeParentTab, setActiveParentTab] = useState('public-panel');
-  const [activeChildTab, setActiveChildTab] = useState('public-panel');
-  const [form, setForm] = Form.useForm<ValueType>();
-  const [formValue, setFormValue] = useState<ValueType>({
-    public: {
-      publicField1: '',
-      publicField2: '',
-    },
-    brands: [
-      { name: 'brand-1', desc: 'brand-1-desc' },
-      { name: 'brand-2', desc: 'brand-2-desc' },
-      { name: 'brand-3', desc: 'brand-3-desc' },
-    ],
-  });
-
-  useEffect(() => {}, []);
-
-  return (
-    <Form<ValueType>
-      value={formValue}
-      setForm={setForm}
-      onChange={setFormValue}
-      onSubmit={() => console.log('submit:>>', JSON.stringify(formValue, null, 2))}
-      labelWidth={100}
-    >
-      <Tabs active={activeParentTab} onChange={(tab) => setActiveParentTab(tab as string)} lazy={false}>
-        <Tabs.Panel id='public-panel' tab='公共信息' style={{ padding: 12 }}>
-          <Form.FieldSet name='public'>
-            <Form.Item label='public-field1' required>
-              <Input
-                name='public-field1'
-                rules={[{ required: true, message: 'public-field1 is required' }]}
-              />
-            </Form.Item>
-            <Form.Item label='public-field2' required>
-              <Input
-                name='public-field2'
-                rules={[{ required: true, message: 'public-field2 is required' }]}
-              />
-            </Form.Item>
-          </Form.FieldSet>
-        </Tabs.Panel>
-        <Tabs.Panel id='brand-panel' tab='品牌信息' style={{ padding: '12px 0' }}>
-          <Tabs
-            active={activeChildTab}
-            onChange={(tab) => setActiveChildTab(tab as string)}
-            position='left-top'
-            shape='dash'
-          >
-            <Form.FieldSet name='brands'>
-              {({ value }) => (
-                <Tabs.Panel id={`public-${value.name}`} tab={`tab-${value.name}`} style={{ padding: 12 }}>
-                  <Form.FieldSet name={value.name}>
-                    <Form.Item label={`brand-${value.name}`} required>
-                      <Input
-                        name={`brand-${value.name}`}
-                        rules={[{ required: true, message: 'shein-field1 is required' }]}
-                      />
-                    </Form.Item>
-                    <Form.Item label='shein-field2' required>
-                      <Input
-                        name='shein-field2'
-                        rules={[{ required: true, message: 'shein-field2 is required' }]}
-                      />
-                    </Form.Item>
-                  </Form.FieldSet>
-                </Tabs.Panel>
-              )}
-              {/* <Tabs.Panel id='romwe-panel' tab='ROMWE' style={{ padding: 12 }}>
-                <Form.FieldSet name='romwe'>
-                  <Form.Item label='romwe-field1' required>
-                    <Input
-                      name='romwe-field1'
-                      rules={[{ required: true, message: 'romwe-field1 is required' }]}
-                    />
-                  </Form.Item>
-                  <Form.Item label='romwe-field2' required>
-                    <Input
-                      name='romwe-field2'
-                      rules={[{ required: true, message: 'romwe-field2 is required' }]}
-                    />
-                  </Form.Item>
-                </Form.FieldSet>
-              </Tabs.Panel> */}
-            </Form.FieldSet>
-          </Tabs>
-        </Tabs.Panel>
-      </Tabs>
-
-      <Form.Item label='' style={{ marginTop: 32, marginBottom: 0 }}>
-        <Form.Submit>Submit</Form.Submit>
-        <Button
-          onClick={() => {
-            form
-              .validate()
-              .then((values) => {
-                console.log('======================');
-                console.log('validate then values: >>', values);
-                console.log('======================');
-              })
-              .catch((errorInfo) => {
-                if (errorInfo instanceof Error) {
-                }
-                console.log('======================');
-                console.log('errorInfo.message: >>', errorInfo.message);
-                console.log('errorInfo: >>', errorInfo);
-                console.log('======================');
-              });
-          }}
-        >
-          Validate
-        </Button>
-        <Form.Reset>Reset</Form.Reset>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default App;
diff --git a/packages/shineout/src/form/__example__/006-validate-05-scrolltoerror.tsx b/packages/shineout/src/form/__example__/006-validate-05-scrolltoerror.tsx
index a69c1887a..1891633bb 100644
--- a/packages/shineout/src/form/__example__/006-validate-05-scrolltoerror.tsx
+++ b/packages/shineout/src/form/__example__/006-validate-05-scrolltoerror.tsx
@@ -5,232 +5,280 @@
  *    -- You can use formRef to get some methods of the form, including validation, clear validation, submission, etc
  */
 import React, { useState } from 'react';
-import { Form, Input, Button, Tabs, Grid, Select, DatePicker } from 'shineout';
-import testFromValue from './temp/test-form-value';
+import { Form, Input, Button, Tabs, Grid, Select } from 'shineout';
 
-type ValueType = any;
+type ValueType = {
+  public: {
+    config1: {
+      field1: string;
+      field2: string;
+      field3: string;
+      field4: string;
+    };
+    config2: {
+      field1: string;
+      field2: string;
+      field3: string;
+      field4: string;
+    };
+  };
+  child: {
+    [key: string]: any;
+  }[];
+};
 
 const App: React.FC = () => {
   const [activeParentTab, setActiveParentTab] = useState('public-panel');
   const [activeChildTab, setActiveChildTab] = useState('child-panel-0');
   const [form, setForm] = Form.useForm<ValueType>();
-  const [formValue, setFormValue] = useState<ValueType>(testFromValue);
+  const [formValue, setFormValue] = useState<ValueType>({
+    public: {
+      config1: {
+        field1: '',
+        field2: '',
+        field3: '',
+        field4: '',
+      },
+      config2: {
+        field1: '',
+        field2: '',
+        field3: '',
+        field4: '',
+      },
+    },
+    child: [
+      {
+        brandName: 'github',
+        configs: {
+          bussName: '1',
+          mockId: '1',
+          slotId: '1',
+        },
+        childConfig: {
+          liveExperience: '1',
+          childBrand: '1',
+          originPartnerId: '1',
+        },
+      },
+      {
+        brandName: 'gitlab',
+        configs: {
+          bussName: '2',
+          mockId: '2',
+          slotId: '2',
+        },
+        childConfig: {
+          liveExperience: '2',
+          childBrand: '2',
+          originPartnerId: '2',
+        },
+      },
+    ],
+  });
 
   return (
-    <div style={{ display: 'flex', height: '100%', overflow: 'auto' }}>
+    <div>
       <Form<ValueType>
         value={formValue}
         setForm={setForm}
         onChange={setFormValue}
         onSubmit={() => console.log('submit:>>', JSON.stringify(formValue, null, 2))}
-        labelWidth={100}
-        name="my-form"
+        labelWidth={180}
+        name='my-form'
         reserveAble
-        // style={{ width: '60%', position: 'sticky', top: 0 }}
       >
-        <Form.Item label='' style={{ marginTop: 32, marginBottom: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
-          <Form.Submit>Submit</Form.Submit>
-          <Button
-            onClick={() => {
-              form
-                .validate()
-                .then((values) => {
-                  console.log('======================');
-                  console.log('validate success values: >>', values);
-                  console.log('======================');
-                })
-                .catch((errorInfo) => {
-                  console.log('======================');
-                  console.log('validate failed errorInfo: >>', errorInfo);
-                  console.log('validate failed errorInfo.message: >>', errorInfo.message);
-                  console.log('======================');
-                });
-            }}
-          >
-            Validate All fields
-          </Button>
-          <Button
-            onClick={() => {
-              form
-                .validate(['request.commonPartnerUpsertReq.labelRuleInfo[0].ruleEnumList'])
-                .then((values) => {
-                  console.log('======================');
-                  console.log('validate success values: >>', values);
-                  console.log('======================');
-                })
-                .catch((errorInfo) => {
-                  console.log('======================');
-                  console.log('validate failed errorInfo: >>', errorInfo);
-                  console.log('validate failed errorInfo.message: >>', errorInfo.message);
-                  console.log('======================');
-                });
-            }}
-          >
-            Validate `ruleEnumList` only
-          </Button>
-
-          <Button
-            onClick={() => {
-              form.scrollToField('request.brandPartnerUpsertReq[0].brandId')
-            }}
-          >
-            scroll to field
-          </Button>
-
-          <Form.Reset>Reset</Form.Reset>
-        </Form.Item>
-
-
-        <div style={{background: '#f3f4f5', height: 500, borderRadius: 8, marginBottom: 20 }}></div>
-        <Input name="root-field1" defaultValue='root-field1' />
-        <DatePicker range name={['startDate1', 'endDate1']} defaultValue={['2024-01-01', '2024-01-02']} />
-        <div style={{display: 'none'}} id="root-field1">
-          <Input name="root-field2" defaultValue='root-field2' />
-        </div>
-        <Select
-          keygen
-          name='ruleEnumList'
-          data={[1, 2, 3]}
-          rules={[{ required: true, message: 'ruleEnumList is required' }]}
-        />
-        <Form.FieldSet name='request'>
-          <Tabs active={activeParentTab} onChange={(tab) => setActiveParentTab(tab as string)}>
-            <Tabs.Panel id='public-panel' tab='公共信息' style={{ padding: 12 }}>
-              <DatePicker range name={['startDate2', 'endDate2']} defaultValue={['2024-02-01', '2024-02-02']} />
-              <Form.FieldSet name='commonPartnerUpsertReq'>
-                <Form.FieldSet name='updatePartnerRequest'>
-                  <Form.Item label='partnerId' required>
-                    <Input
-                      name='partnerId'
-                      rules={[{ required: true, message: 'partnerId is required' }]}
-                    />
-                  </Form.Item>
-                  <Form.Item label='bodyType' required>
-                    <Input
-                      name='bodyType'
-                      rules={[{ required: true, message: 'bodyType is required' }]}
-                    />
-                  </Form.Item>
-                </Form.FieldSet>
-                <Form.FieldSet
-                  name='labelRuleInfo'
-                  defaultValue={[{ fieldId: 77, ruleFieldId: 231, ruleEnumList: [] }]}
-                >
-                  {() => (
-                    <Grid>
-                      <Grid width={1 / 3}>
-                        <Form.Item label='fieldId' required>
-                          <Input
-                            name='fieldId'
-                            rules={[{ required: true, message: 'fieldId is required' }]}
-                          />
-                        </Form.Item>
-                      </Grid>
-                      <Grid width={1 / 3}>
-                        <Form.Item label='ruleFieldId' required>
+        <Tabs active={activeParentTab} onChange={(tab) => setActiveParentTab(tab as string)} lazy={false}>
+          <Tabs.Panel id='public-panel' tab='Public Config' style={{ padding: 12, height: 200, overflow: 'auto' }}>
+            <Form.FieldSet name='public'>
+              <Form.FieldSet name='config1'>
+                <Form.Item label='public-config1-field1' required>
+                  <Input
+                    name='field1'
+                    rules={[{ required: true, message: 'public-config1-field1 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config1-field2' required>
+                  <Input
+                    name='field2'
+                    rules={[{ required: true, message: 'public-config1-field2 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config1-field3' required>
+                  <Input
+                    name='field3'
+                    rules={[{ required: true, message: 'public-config1-field3 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config1-field4' required>
+                  <Input
+                    name='field4'
+                    rules={[{ required: true, message: 'public-config1-field4 is required' }]}
+                  />
+                </Form.Item>
+              </Form.FieldSet>
+              <Form.FieldSet name='config2'>
+                <Form.Item label='public-config2-field1' required>
+                  <Input
+                    name='field1'
+                    rules={[{ required: true, message: 'public-config2-field1 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config2-field2' required>
+                  <Input
+                    name='field2'
+                    rules={[{ required: true, message: 'public-config2-field2 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config2-field3' required>
+                  <Input
+                    name='field3'
+                    rules={[{ required: true, message: 'public-config2-field3 is required' }]}
+                  />
+                </Form.Item>
+                <Form.Item label='public-config2-field4' required>
+                  <Input
+                    name='field4'
+                    rules={[{ required: true, message: 'public-config2-field4 is required' }]}
+                  />
+                </Form.Item>
+              </Form.FieldSet>
+            </Form.FieldSet>
+          </Tabs.Panel>
+          <Tabs.Panel id='child-panel' tab='Child Config' style={{ padding: '12px 0', height: 200, overflow: 'auto' }}>
+            <Tabs
+              active={activeChildTab}
+              onChange={(tab) => setActiveChildTab(tab as string)}
+              position='left-top'
+              shape='card'
+              lazy={false}
+            >
+              <Form.FieldSet name='child'>
+                {({ index }) => {
+                  return (
+                    <Tabs.Panel
+                      id={`child-panel-${index}`}
+                      tab={`child-panel-${index}`}
+                      style={{ padding: 12 }}
+                    >
+                      <Form.Item label={'brandName'} required>
+                        <Input
+                          name={'brandName'}
+                          rules={[{ required: true, message: 'brandName is required' }]}
+                        />
+                      </Form.Item>
+                      <Form.FieldSet name='detail-configs'>
+                        <Grid>
+                          <Grid width={1 / 3}>
+                            <Form.Item label={'bussId'} required>
+                              <Input
+                                name={'bussId'}
+                                rules={[{ required: true, message: 'bussId is required' }]}
+                              />
+                            </Form.Item>
+                          </Grid>
+                          <Grid width={1 / 3}>
+                            <Form.Item label={'mockId'} required>
+                              <Input
+                                name={'mockId'}
+                                rules={[{ required: true, message: 'mockId is required' }]}
+                              />
+                            </Form.Item>
+                          </Grid>
+                          <Grid width={1 / 3}>
+                            <Form.Item label={'slotId'} required>
+                              <Input
+                                name={'slotId'}
+                                rules={[{ required: true, message: 'slotId is required' }]}
+                              />
+                            </Form.Item>
+                          </Grid>
+                        </Grid>
+                      </Form.FieldSet>
+                      <Form.FieldSet name='child-config'>
+                        <Form.Item label={'liveExperience'} required>
                           <Input
-                            name='ruleFieldId'
-                            rules={[{ required: true, message: 'ruleFieldId is required' }]}
+                            name={'liveExperience'}
+                            rules={[{ required: true, message: 'liveExperience is required' }]}
                           />
                         </Form.Item>
-                      </Grid>
-                      <Grid width={1 / 3}>
-                        <Form.Item label='ruleEnumList' required>
+                        <Form.Item label={'childBrand'} required>
                           <Select
                             keygen
-                            name='ruleEnumList'
+                            name='childBrand'
                             data={[1, 2, 3]}
-                            rules={[{ required: true, message: 'ruleEnumList is required' }]}
+                            rules={[{ required: true, message: 'childBrand is required' }]}
                           />
                         </Form.Item>
-                      </Grid>
-                    </Grid>
-                  )}
-                </Form.FieldSet>
-              </Form.FieldSet>
-            </Tabs.Panel>
-            <Tabs.Panel id='brand-panel' tab='品牌信息' style={{ padding: '12px 0' }}>
-              <Tabs
-                active={activeChildTab}
-                onChange={(tab) => setActiveChildTab(tab as string)}
-                position='left-top'
-                shape='card'
-              >
-                <Form.FieldSet name='brandPartnerUpsertReq'>
-                  {({ list, index }) => {
-                    if (list.length === 0) return <span>暂无brandPartnerUpsertReq</span>;
-                    return (
-                      <Tabs.Panel
-                        id={`child-panel-${index}`}
-                        tab={`child-panel-${index}`}
-                        style={{ padding: 12 }}
-                      >
-                        <Form.Item label={'brandId'} required>
+                        <Form.Item label={'originPartnerId'} required>
                           <Input
-                            name={'brandId'}
-                            rules={[{ required: true, message: 'brandId is required' }]}
+                            name={'originPartnerId'}
+                            rules={[{ required: true, message: 'originPartnerId is required' }]}
                           />
                         </Form.Item>
-                        <Form.FieldSet name='labelBuildRequest'>
-                          <Form.Item label={'busId'} required>
-                            <Input
-                              name={'busId'}
-                              rules={[{ required: true, message: 'busId is required' }]}
-                            />
-                          </Form.Item>
-                          <Form.Item label={'moduleId'} required>
-                            <Input
-                              name={'moduleId'}
-                              rules={[{ required: true, message: 'moduleId is required' }]}
-                            />
-                          </Form.Item>
-                          <Form.Item label={'originalPartnerId'} required>
-                            <Input
-                              name={'originalPartnerId'}
-                              rules={[
-                                {
-                                  required: true,
-                                  message: 'originalPartnerId is required',
-                                },
-                              ]}
-                            />
-                          </Form.Item>
-                        </Form.FieldSet>
-                        <Form.FieldSet name='updateBrandPartnerRequest'>
-                          <Form.Item label={'liveExperience'} required>
-                            <Input
-                              name={'liveExperience'}
-                              rules={[{ required: true, message: 'liveExperience is required' }]}
-                            />
-                          </Form.Item>
-                          <Form.Item label={'childBrand'} required>
-                            <Select
-                              keygen
-                              name='childBrand'
-                              data={[1, 2, 3]}
-                              rules={[{ required: true, message: 'childBrand is required' }]}
-                            />
-                          </Form.Item>
-                          <Form.Item label={'originalPartnerId'} required>
-                            <Input
-                              name={'originalPartnerId'}
-                              rules={[
-                                {
-                                  required: true,
-                                  message: 'originalPartnerId is required',
-                                },
-                              ]}
-                            />
-                          </Form.Item>
-                        </Form.FieldSet>
-                      </Tabs.Panel>
-                    );
-                  }}
-                </Form.FieldSet>
-              </Tabs>
-            </Tabs.Panel>
-          </Tabs>
-        </Form.FieldSet>
+                      </Form.FieldSet>
+                    </Tabs.Panel>
+                  );
+                }}
+              </Form.FieldSet>
+            </Tabs>
+          </Tabs.Panel>
+        </Tabs>
+
+        <Form.Item
+          label=''
+          style={{
+            marginTop: 12,
+            marginBottom: 0,
+          }}
+        >
+          <Grid>
+            <Grid width={1 / 2}>
+              <Button
+                onClick={() => {
+                  form
+                    .validate()
+                    .then((values) => {
+                      console.log('validate success values: >>', values);
+                    })
+                    .catch((errorInfo) => {
+                      console.log('validate failed errorInfo: >>', errorInfo);
+                      console.log('validate failed errorInfo.message: >>', errorInfo.message);
+                    });
+                }}
+              >
+                Validate All fields
+              </Button>
+              <Button
+                onClick={() => {
+                  form
+                    .validate(['public.config1.field4'])
+                    .then((values) => {
+                      console.log('validate success values: >>', values);
+                    })
+                    .catch((errorInfo) => {
+                      console.log('validate failed errorInfo: >>', errorInfo);
+                      console.log('validate failed errorInfo.message: >>', errorInfo.message);
+                    });
+                }}
+              >
+                Validate `public.config1.field4` only
+              </Button>
+
+              <Button
+                onClick={() => {
+                  form.scrollToField('public.config1.field4');
+                }}
+              >
+                Scroll to error field
+              </Button>
+            </Grid>
+
+            <Grid width={1 / 2} style={{ textAlign: 'right' }}>
+              <Form.Reset>Reset</Form.Reset>
+              <Form.Submit>Submit</Form.Submit>
+            </Grid>
+          </Grid>
+        </Form.Item>
       </Form>
 
       {/* <pre style={{ marginLeft: 12 }}>{JSON.stringify(formValue, null, 2)}</pre> */}
diff --git a/packages/shineout/src/form/__example__/test-002-validate-scrolltoerror.tsx b/packages/shineout/src/form/__example__/test-002-validate-scrolltoerror.tsx
new file mode 100644
index 000000000..91d9ed15c
--- /dev/null
+++ b/packages/shineout/src/form/__example__/test-002-validate-scrolltoerror.tsx
@@ -0,0 +1,241 @@
+/**
+ * cn - scrollToField
+ *    -- 滚动到指定字段
+ * en - Form Methods
+ *    -- You can use formRef to get some methods of the form, including validation, clear validation, submission, etc
+ */
+import React, { useState } from 'react';
+import { Form, Input, Button, Tabs, Grid, Select, DatePicker } from 'shineout';
+import testFromValue from './temp/test-form-value';
+
+type ValueType = any;
+
+const App: React.FC = () => {
+  const [activeParentTab, setActiveParentTab] = useState('public-panel');
+  const [activeChildTab, setActiveChildTab] = useState('child-panel-0');
+  const [form, setForm] = Form.useForm<ValueType>();
+  const [formValue, setFormValue] = useState<ValueType>(testFromValue);
+
+  return (
+    <div style={{ display: 'flex', height: '100%', overflow: 'auto' }}>
+      <Form<ValueType>
+        value={formValue}
+        setForm={setForm}
+        onChange={setFormValue}
+        onSubmit={() => console.log('submit:>>', JSON.stringify(formValue, null, 2))}
+        labelWidth={100}
+        name="my-form"
+        reserveAble
+        // style={{ width: '60%', position: 'sticky', top: 0 }}
+      >
+        <Form.Item label='' style={{ marginTop: 32, marginBottom: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <Form.Submit>Submit</Form.Submit>
+          <Button
+            onClick={() => {
+              form
+                .validate()
+                .then((values) => {
+                  console.log('======================');
+                  console.log('validate success values: >>', values);
+                  console.log('======================');
+                })
+                .catch((errorInfo) => {
+                  console.log('======================');
+                  console.log('validate failed errorInfo: >>', errorInfo);
+                  console.log('validate failed errorInfo.message: >>', errorInfo.message);
+                  console.log('======================');
+                });
+            }}
+          >
+            Validate All fields
+          </Button>
+          <Button
+            onClick={() => {
+              form
+                .validate(['request.commonPartnerUpsertReq.labelRuleInfo[0].ruleEnumList'])
+                .then((values) => {
+                  console.log('======================');
+                  console.log('validate success values: >>', values);
+                  console.log('======================');
+                })
+                .catch((errorInfo) => {
+                  console.log('======================');
+                  console.log('validate failed errorInfo: >>', errorInfo);
+                  console.log('validate failed errorInfo.message: >>', errorInfo.message);
+                  console.log('======================');
+                });
+            }}
+          >
+            Validate `ruleEnumList` only
+          </Button>
+
+          <Button
+            onClick={() => {
+              form.scrollToField('request.endDate2')
+            }}
+          >
+            scroll to field
+          </Button>
+
+          <Form.Reset>Reset</Form.Reset>
+        </Form.Item>
+
+
+        {/* <div style={{background: '#f3f4f5', height: 50, borderRadius: 8, marginBottom: 20 }}></div> */}
+        {/* <Input name="root-field1" defaultValue='root-field1' />
+        <DatePicker range name={['startDate1', 'endDate1']} defaultValue={['2024-01-01', '2024-01-02']} />
+        <div style={{display: 'none'}} id="root-field1">
+          <Input name="root-field2" defaultValue='root-field2' />
+        </div>
+        <Select
+          keygen
+          name='ruleEnumList'
+          data={[1, 2, 3]}
+          rules={[{ required: true, message: 'ruleEnumList is required' }]}
+        /> */}
+        <Form.FieldSet name='request'>
+          <Tabs active={activeParentTab} onChange={(tab) => setActiveParentTab(tab as string)}>
+            <Tabs.Panel id='public-panel' tab='公共信息' style={{ padding: 12 }}>
+              <DatePicker range name={['startDate2', 'endDate2']} defaultValue={['2024-02-01', '2024-02-02']} />
+              <Form.FieldSet name='commonPartnerUpsertReq'>
+                <Form.FieldSet name='updatePartnerRequest'>
+                  <Form.Item label='partnerId' required>
+                    <Input
+                      name='partnerId'
+                      rules={[{ required: true, message: 'partnerId is required' }]}
+                    />
+                  </Form.Item>
+                  <Form.Item label='bodyType' required>
+                    <Input
+                      name='bodyType'
+                      rules={[{ required: true, message: 'bodyType is required' }]}
+                    />
+                  </Form.Item>
+                </Form.FieldSet>
+                <Form.FieldSet
+                  name='labelRuleInfo'
+                  defaultValue={[{ fieldId: 77, ruleFieldId: 231, ruleEnumList: [] }]}
+                >
+                  {() => (
+                    <Grid>
+                      <Grid width={1 / 3}>
+                        <Form.Item label='fieldId' required>
+                          <Input
+                            name='fieldId'
+                            rules={[{ required: true, message: 'fieldId is required' }]}
+                          />
+                        </Form.Item>
+                      </Grid>
+                      <Grid width={1 / 3}>
+                        <Form.Item label='ruleFieldId' required>
+                          <Input
+                            name='ruleFieldId'
+                            rules={[{ required: true, message: 'ruleFieldId is required' }]}
+                          />
+                        </Form.Item>
+                      </Grid>
+                      <Grid width={1 / 3}>
+                        <Form.Item label='ruleEnumList' required>
+                          <Select
+                            keygen
+                            name='ruleEnumList'
+                            data={[1, 2, 3]}
+                            rules={[{ required: true, message: 'ruleEnumList is required' }]}
+                          />
+                        </Form.Item>
+                      </Grid>
+                    </Grid>
+                  )}
+                </Form.FieldSet>
+              </Form.FieldSet>
+            </Tabs.Panel>
+            <Tabs.Panel id='brand-panel' tab='品牌信息' style={{ padding: '12px 0' }}>
+              <Tabs
+                active={activeChildTab}
+                onChange={(tab) => setActiveChildTab(tab as string)}
+                position='left-top'
+                shape='card'
+              >
+                <Form.FieldSet name='brandPartnerUpsertReq'>
+                  {({ list, index }) => {
+                    if (list.length === 0) return <span>暂无brandPartnerUpsertReq</span>;
+                    return (
+                      <Tabs.Panel
+                        id={`child-panel-${index}`}
+                        tab={`child-panel-${index}`}
+                        style={{ padding: 12 }}
+                      >
+                        <Form.Item label={'brandId'} required>
+                          <Input
+                            name={'brandId'}
+                            rules={[{ required: true, message: 'brandId is required' }]}
+                          />
+                        </Form.Item>
+                        <Form.FieldSet name='labelBuildRequest'>
+                          <Form.Item label={'busId'} required>
+                            <Input
+                              name={'busId'}
+                              rules={[{ required: true, message: 'busId is required' }]}
+                            />
+                          </Form.Item>
+                          <Form.Item label={'moduleId'} required>
+                            <Input
+                              name={'moduleId'}
+                              rules={[{ required: true, message: 'moduleId is required' }]}
+                            />
+                          </Form.Item>
+                          <Form.Item label={'originalPartnerId'} required>
+                            <Input
+                              name={'originalPartnerId'}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: 'originalPartnerId is required',
+                                },
+                              ]}
+                            />
+                          </Form.Item>
+                        </Form.FieldSet>
+                        <Form.FieldSet name='updateBrandPartnerRequest'>
+                          <Form.Item label={'liveExperience'} required>
+                            <Input
+                              name={'liveExperience'}
+                              rules={[{ required: true, message: 'liveExperience is required' }]}
+                            />
+                          </Form.Item>
+                          <Form.Item label={'childBrand'} required>
+                            <Select
+                              keygen
+                              name='childBrand'
+                              data={[1, 2, 3]}
+                              rules={[{ required: true, message: 'childBrand is required' }]}
+                            />
+                          </Form.Item>
+                          <Form.Item label={'originalPartnerId'} required>
+                            <Input
+                              name={'originalPartnerId'}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: 'originalPartnerId is required',
+                                },
+                              ]}
+                            />
+                          </Form.Item>
+                        </Form.FieldSet>
+                      </Tabs.Panel>
+                    );
+                  }}
+                </Form.FieldSet>
+              </Tabs>
+            </Tabs.Panel>
+          </Tabs>
+        </Form.FieldSet>
+      </Form>
+
+      {/* <pre style={{ marginLeft: 12 }}>{JSON.stringify(formValue, null, 2)}</pre> */}
+    </div>
+  );
+};
+
+export default App;