diff --git a/packages/cdk/forms/__tests__/formArray.spec.ts b/packages/cdk/forms/__tests__/formArray.spec.ts
index 9da4fa7d1..46340f4a9 100644
--- a/packages/cdk/forms/__tests__/formArray.spec.ts
+++ b/packages/cdk/forms/__tests__/formArray.spec.ts
@@ -25,7 +25,7 @@ const basicValue = { control: '', array: ['', ''], group: { control: '' } }
 
 describe('formArray.ts', () => {
   describe('basic work', () => {
-    let array: FormArray<BasicGroup[]>
+    let array: FormArray<BasicGroup>
 
     beforeEach(() => {
       array = new FormArray([newFormGroup()])
@@ -192,7 +192,7 @@ describe('formArray.ts', () => {
   })
 
   describe('trigger work', () => {
-    let array: FormArray<BasicGroup[]>
+    let array: FormArray<BasicGroup>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _validator = (value: any) => {
       return value[0].control === 'test' ? undefined : ({ test: {} } as ValidateErrors)
@@ -305,7 +305,7 @@ describe('formArray.ts', () => {
   })
 
   describe('disabled work', () => {
-    let array: FormArray<BasicGroup[]>
+    let array: FormArray<BasicGroup>
 
     test('default disabled work', async () => {
       array = new FormArray(
diff --git a/packages/cdk/forms/__tests__/formGroup.spec.ts b/packages/cdk/forms/__tests__/formGroup.spec.ts
index 2231472a0..7efbc2ba5 100644
--- a/packages/cdk/forms/__tests__/formGroup.spec.ts
+++ b/packages/cdk/forms/__tests__/formGroup.spec.ts
@@ -145,9 +145,9 @@ describe('formGroup.ts', () => {
       expect(group.get('control')).toEqual(control)
       expect(group.get('array')).toEqual(array)
       expect(group.get('group')).toEqual(groupChild)
-      expect(group.get('group.control')).toEqual((groupChild as FormGroup<{ control: string }>).controls.value.control)
-      expect(group.get(['array', 0])).toEqual((array as FormArray<string[]>).controls.value[0])
-      expect(group.get('array')!.get(0)).toEqual((array as FormArray<string[]>).controls.value[0])
+      expect(group.get('group.control')).toEqual(groupChild.controls.value.control)
+      expect(group.get(['array', 0])).toEqual(array.controls.value[0])
+      expect(group.get('array')!.get(0)).toEqual(array.controls.value[0])
 
       expect(group.get(undefined as never)).toBeUndefined()
       expect(group.get('')).toBeUndefined()
diff --git a/packages/cdk/forms/__tests__/useForms.spec.ts b/packages/cdk/forms/__tests__/useForms.spec.ts
index ae4cbdbd4..87676ad8c 100644
--- a/packages/cdk/forms/__tests__/useForms.spec.ts
+++ b/packages/cdk/forms/__tests__/useForms.spec.ts
@@ -6,21 +6,36 @@ import { Validators } from '../src/validators'
 interface BasicGroup {
   control1: string
   control2?: number
-  array: (string | number)[]
-  group: {
+  array1: (string | number)[]
+  array2: { control: string }[]
+  group1: {
+    control: string | number
+  }
+  group2: {
     control: string | number
   }
 }
 
-const basicValue: BasicGroup = { control1: '', control2: undefined, array: ['', 1], group: { control: '' } }
+const basicValue: BasicGroup = {
+  control1: '',
+  control2: undefined,
+  array1: ['', 1],
+  array2: [{ control: '0' }, { control: '1' }],
+  group1: { control: 1 },
+  group2: { control: '2' },
+}
 
 describe('useForms.ts', () => {
   test('basic work', async () => {
     const group = useFormGroup<BasicGroup>({
       control1: ['', Validators.required],
       control2: [undefined, { trigger: 'blur', validators: Validators.required }],
-      array: useFormArray([[''], [1]]),
-      group: useFormGroup({ control: useFormControl<string | number>('') }),
+      array1: useFormArray<string | number>([[''], [1]]),
+      array2: useFormArray([{ control: ['0'] }, { control: ['1'] }]),
+      group1: useFormGroup({ control: useFormControl<string | number>(1) }),
+      group2: {
+        control: ['2'],
+      },
     })
 
     expect(group.getValue()).toEqual(basicValue)
diff --git a/packages/cdk/forms/demo/Basic.vue b/packages/cdk/forms/demo/Basic.vue
index 829a51d1f..bfe3109f8 100644
--- a/packages/cdk/forms/demo/Basic.vue
+++ b/packages/cdk/forms/demo/Basic.vue
@@ -22,19 +22,17 @@ import CustomInput from './CustomInput.vue'
 
 const { required, min, max, email } = Validators
 
-const address = useFormGroup({
-  city: ['', required],
-  street: ['', required],
-  zip: [''],
-})
-
-const remarks = useFormArray<string[]>([['remark0'], ['remark1'], ['remark2']])
+const remarks = useFormArray([['remark0'], ['remark1'], ['remark2']])
 
 const formGroup = useFormGroup({
   name: ['tom', required],
   age: [18, [required, min(1), max(30)]],
   email: ['', [email]],
-  address: address,
+  address: {
+    city: ['', required],
+    street: ['', required],
+    zip: [''],
+  },
   remarks: remarks,
 })
 
diff --git a/packages/cdk/forms/docs/Index.zh.md b/packages/cdk/forms/docs/Index.zh.md
index 03a70dfba..2070f232c 100644
--- a/packages/cdk/forms/docs/Index.zh.md
+++ b/packages/cdk/forms/docs/Index.zh.md
@@ -22,19 +22,19 @@ export function useFormGroup<T>(
 | 名称 | 说明 | 类型 | 默认值 | 备注 |
 | --- | --- | --- | --- | --- |
 | `config` | 控件组配置项 | `GroupConfig<T>` | - | 每个子控件的 `key` 就是配置项的 `key` |
+| `validatorOptions` | 控件组验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 | `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | 只针对当前控件组的值进行验证 |
 | `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | 只针对当前控件组的值进行验证 |
-| `validatorOptions` | 控件组验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 
 ```ts
 type ControlConfig<T> =
   | [T]
+  | [T, ValidatorOptions]
   | [T, ValidatorFn | ValidatorFn[]]
   | [T, ValidatorFn | ValidatorFn[], AsyncValidatorFn | AsyncValidatorFn[]]
-  | [T, ValidatorOptions]
 
 type GroupConfig<T> = {
-  [K in keyof T]: ControlConfig<T[K]> | AbstractControl<T[K]> | FormGroup<T[K]>
+  [K in keyof T]: ControlConfig<T[K]> | GroupConfig<T[K]> | AbstractControl<T[K]>
 }
 ```
 
@@ -54,12 +54,12 @@ export function useFormArray<T>(
 | 名称 | 说明 | 类型 | 默认值 | 备注 |
 | --- | --- | --- | --- | --- |
 | `config` | 控件数组配置项 | `ArrayConfig<T>` | - | 每个子控件的 `key` 就是配置项的 `index` |
+| `validatorOptions` | 控件数组验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 | `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | 只针对当前控件数组的值进行验证 |
 | `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | 只针对当前控件数组的值进行验证 |
-| `validatorOptions` | 控件数组验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 
 ```ts
-type ArrayConfig<T> = Array<AbstractControl<ArrayElement<T>> | ControlConfig<ArrayElement<T>> | ArrayElement<T>>
+type ArrayConfig<T> = Array<ControlConfig<T> | GroupConfig<T> | AbstractControl<T>>
 ```
 
 ### useFormControl
@@ -78,9 +78,9 @@ export function useFormControl<T>(
 | 名称 | 说明 | 类型 | 默认值 | 备注 |
 | --- | --- | --- | --- | --- |
 | `initValue` | 控件初始值 | `any` | - | - |
+| `validatorOptions` | 控件验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 | `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | - |
 | `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | - |
-| `validatorOptions` | 控件验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |
 
 ### ValidatorOptions
 
diff --git a/packages/cdk/forms/docs/Overview.zh.md b/packages/cdk/forms/docs/Overview.zh.md
index 63c574915..4e9b01462 100644
--- a/packages/cdk/forms/docs/Overview.zh.md
+++ b/packages/cdk/forms/docs/Overview.zh.md
@@ -108,7 +108,7 @@ const address = useFormGroup({
   zip: [''],
 })
 
-const remarks = useFormArray<string[]>([['remark0'], ['remark1'], ['remark2']])
+const remarks = useFormArray([['remark0'], ['remark1'], ['remark2']])
 
 const formGroup = useFormGroup({
   name: ['tom', required],
diff --git a/packages/cdk/forms/src/controls.ts b/packages/cdk/forms/src/controls.ts
index 119855de6..18b4f3adb 100644
--- a/packages/cdk/forms/src/controls.ts
+++ b/packages/cdk/forms/src/controls.ts
@@ -27,7 +27,6 @@ import { hasOwnProperty } from '@idux/cdk/utils'
 
 import {
   type AsyncValidatorFn,
-  type TriggerType,
   type ValidateError,
   type ValidateErrors,
   type ValidateStatus,
@@ -151,7 +150,7 @@ export abstract class AbstractControl<T = any> {
    * Possible values: `'change'` | `'blur'` | `'submit'`
    * Default value: `'change'`
    */
-  get trigger(): TriggerType {
+  get trigger(): 'change' | 'blur' | 'submit' {
     return this._trigger ?? this._parent?.trigger ?? 'change'
   }
 
@@ -181,7 +180,7 @@ export abstract class AbstractControl<T = any> {
   private _validators: ValidatorFn | undefined
   private _asyncValidators: AsyncValidatorFn | undefined
   private _parent: AbstractControl<T> | undefined
-  private _trigger?: TriggerType
+  private _trigger?: 'change' | 'blur' | 'submit'
   private _trim?: boolean
 
   constructor(
@@ -205,7 +204,10 @@ export abstract class AbstractControl<T = any> {
    * * `dirty`: Marks it dirty, default is false.
    * * `blur`: Marks it blurred, default is false.
    */
-  abstract setValue(value: T | Partial<T>, options?: { dirty?: boolean; blur?: boolean }): void
+  abstract setValue(
+    value: T | Partial<T> | Partial<ArrayElement<T>>[],
+    options?: { dirty?: boolean; blur?: boolean },
+  ): void
 
   /**
    * The aggregate value of the control.
@@ -756,9 +758,9 @@ export class FormGroup<T extends object = object> extends AbstractControl<T> {
   }
 }
 
-export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
-  readonly controls!: ComputedRef<AbstractControl<ArrayElement<T>>[]>
-  protected _controls!: ShallowRef<AbstractControl<ArrayElement<T>>[]>
+export class FormArray<T = any> extends AbstractControl<T[]> {
+  readonly controls!: ComputedRef<AbstractControl<T>[]>
+  protected _controls!: ShallowRef<AbstractControl<T>[]>
 
   /**
    * Length of the control array.
@@ -769,7 +771,7 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
     /**
      * An array of child controls. Each child control is given an index where it is registered.
      */
-    controls: AbstractControl<ArrayElement<T>>[],
+    controls: AbstractControl<T>[],
     validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions,
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[],
   ) {
@@ -784,27 +786,27 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
     this._watchDirty()
   }
 
-  setValue(value: Partial<ArrayElement<T>>[], options?: { dirty?: boolean; blur?: boolean }): void {
+  setValue(value: T extends object ? Partial<T>[] : T[], options?: { dirty?: boolean; blur?: boolean }): void {
     value.forEach((item, index) => {
       const control = this.at(index)
       if (control) {
-        control.setValue(item, options)
+        control.setValue(item!, options)
       }
     })
   }
 
-  getValue(options: { skipDisabled?: boolean } = {}): T {
+  getValue(options: { skipDisabled?: boolean } = {}): T[] {
     const { skipDisabled } = options
     return this._controls.value
       .filter(control => !skipDisabled || !control.disabled.value)
-      .map(control => control.getValue(options)) as T
+      .map(control => control.getValue(options))
   }
 
-  protected _calculateInitValue(): T {
+  protected _calculateInitValue(): T[] {
     return this.getValue()
   }
 
-  protected _forEachControls(cb: (v: AbstractControl, k: keyof T) => void): void {
+  protected _forEachControls(cb: (v: AbstractControl, k: number) => void): void {
     this._controls.value.forEach(cb)
   }
 
@@ -813,7 +815,7 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
    *
    * @param index Index in the array to retrieve the control
    */
-  at(index: number): AbstractControl<ArrayElement<T>> | undefined {
+  at(index: number): AbstractControl<T> | undefined {
     return this._controls.value[index]
   }
 
@@ -822,7 +824,7 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
    *
    * @param control Form control to be inserted
    */
-  push(control: AbstractControl<ArrayElement<T>>): void {
+  push(control: AbstractControl<T>): void {
     control.setParent(this as AbstractControl)
     this._controls.value = [...this._controls.value, control]
   }
@@ -833,7 +835,7 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
    * @param index Index in the array to insert the control
    * @param control Form control to be inserted
    */
-  insert(index: number, control: AbstractControl<ArrayElement<T>>): void {
+  insert(index: number, control: AbstractControl<T>): void {
     control.setParent(this as AbstractControl)
     const controls = [...this._controls.value]
     controls.splice(index, 0, control)
@@ -857,7 +859,7 @@ export class FormArray<T extends any[] = any[]> extends AbstractControl<T> {
    * @param index Index in the array to replace the control
    * @param control The `AbstractControl` control to replace the existing control
    */
-  setControl(index: number, control: AbstractControl<ArrayElement<T>>): void {
+  setControl(index: number, control: AbstractControl<T>): void {
     control.setParent(this as AbstractControl)
     const controls = [...this._controls.value]
     controls.splice(index, 1, control)
diff --git a/packages/cdk/forms/src/types.ts b/packages/cdk/forms/src/types.ts
index 5d7787689..8022d965c 100644
--- a/packages/cdk/forms/src/types.ts
+++ b/packages/cdk/forms/src/types.ts
@@ -34,13 +34,11 @@ export interface AsyncValidatorFn {
   (value: any, control: AbstractControl): Promise<ValidateErrors | undefined>
 }
 
-export type TriggerType = 'change' | 'blur' | 'submit'
-
 export interface ValidatorOptions {
   disabled?: boolean
   name?: string
   example?: string
-  trigger?: TriggerType
+  trigger?: 'change' | 'blur' | 'submit'
   validators?: ValidatorFn | ValidatorFn[]
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[]
   /**
diff --git a/packages/cdk/forms/src/useForms.ts b/packages/cdk/forms/src/useForms.ts
index 603075724..65d18b7d9 100644
--- a/packages/cdk/forms/src/useForms.ts
+++ b/packages/cdk/forms/src/useForms.ts
@@ -7,32 +7,32 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { AbstractControl, ArrayElement, GroupControls } from './controls'
-import type { AsyncValidatorFn, ValidatorFn, ValidatorOptions } from './types'
-
-import { FormArray, FormControl, FormGroup } from './controls'
+import { type AbstractControl, FormArray, FormControl, FormGroup, type GroupControls } from './controls'
 import { isAbstractControl } from './typeof'
+import { type AsyncValidatorFn, type ValidatorFn, type ValidatorOptions } from './types'
 
 type ControlConfig<T> =
   | [T]
+  | [T, ValidatorOptions]
   | [T, ValidatorFn | ValidatorFn[]]
   | [T, ValidatorFn | ValidatorFn[], AsyncValidatorFn | AsyncValidatorFn[]]
-  | [T, ValidatorOptions]
 
 type GroupConfig<T> = {
-  [K in keyof T]: ControlConfig<T[K]> | AbstractControl<T[K]> | FormGroup<T[K]>
+  [K in keyof T]: ControlConfig<T[K]> | GroupConfig<T[K]> | AbstractControl<T[K]>
 }
 
-export function useFormGroup<T extends Record<string, any> = Record<string, any>>(
+type ArrayConfig<T> = Array<ControlConfig<T> | GroupConfig<T> | AbstractControl<T>>
+
+export function useFormGroup<T extends object = object>(
   config: GroupConfig<T>,
   validatorOptions?: ValidatorOptions,
 ): FormGroup<T>
-export function useFormGroup<T extends Record<string, any> = Record<string, any>>(
+export function useFormGroup<T extends object = object>(
   config: GroupConfig<T>,
   validators?: ValidatorFn | ValidatorFn[],
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[],
 ): FormGroup<T>
-export function useFormGroup<T extends Record<string, any> = Record<string, any>>(
+export function useFormGroup<T extends object = object>(
   config: GroupConfig<T>,
   validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions,
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[],
@@ -41,18 +41,13 @@ export function useFormGroup<T extends Record<string, any> = Record<string, any>
   return new FormGroup(controls, validatorOrOptions, asyncValidators)
 }
 
-type ArrayConfig<T> = Array<AbstractControl<ArrayElement<T>> | ControlConfig<ArrayElement<T>>>
-
-export function useFormArray<T extends any[] = any[]>(
-  config: ArrayConfig<T>,
-  validatorOptions?: ValidatorOptions,
-): FormArray<T>
-export function useFormArray<T extends any[] = any[]>(
+export function useFormArray<T = any>(config: ArrayConfig<T>, validatorOptions?: ValidatorOptions): FormArray<T>
+export function useFormArray<T = any>(
   config: ArrayConfig<T>,
   validators?: ValidatorFn | ValidatorFn[],
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[],
 ): FormArray<T>
-export function useFormArray<T extends any[] = any[]>(
+export function useFormArray<T = any>(
   config: ArrayConfig<T>,
   validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions,
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[],
@@ -83,11 +78,16 @@ function reduceControls<T>(config: GroupConfig<T>): GroupControls<T> {
   return controls
 }
 
-function createControl<T>(config: AbstractControl<T> | ControlConfig<T>): AbstractControl<T> {
+function createControl<T>(config: AbstractControl<T> | ControlConfig<T> | GroupConfig<T>): AbstractControl<T> {
   if (isAbstractControl(config)) {
     return config
-  } else {
-    const [initValue, validatorOrOptions, asyncValidator] = config as ControlConfig<T>
+  }
+
+  if (Array.isArray(config)) {
+    const [initValue, validatorOrOptions, asyncValidator] = config
     return new FormControl(initValue, validatorOrOptions, asyncValidator)
   }
+
+  const controls = reduceControls(config as GroupConfig<T>)
+  return new FormGroup(controls) as unknown as AbstractControl<T>
 }
diff --git a/packages/components/form/__tests__/form.spec.ts b/packages/components/form/__tests__/form.spec.ts
index 566ee12d2..d1d044c17 100644
--- a/packages/components/form/__tests__/form.spec.ts
+++ b/packages/components/form/__tests__/form.spec.ts
@@ -334,29 +334,29 @@ describe('Form', () => {
       expect(wrapper.find('.ix-form-item-control-tooltip .ix-icon-up').exists()).toBe(true)
     })
 
-    test('extraMessage work', async () => {
-      let extraMessage = 'extraMessage'
+    test('description work', async () => {
+      let description = 'extraMessage'
       const wrapper = FormItemMount({
-        props: { label: 'Username', extraMessage },
+        props: { label: 'Username', description },
         slots: { default: () => h(IxInput) },
       })
 
-      expect(wrapper.find('.ix-form-item-extra-message').text()).toBe(extraMessage)
+      expect(wrapper.find('.ix-form-item-description').text()).toBe(description)
 
-      extraMessage = 'extraMessage2'
-      await wrapper.setProps({ extraMessage })
+      description = 'extraMessage2'
+      await wrapper.setProps({ description })
 
-      expect(wrapper.find('.ix-form-item-extra-message').text()).toBe(extraMessage)
+      expect(wrapper.find('.ix-form-item-description').text()).toBe(description)
     })
 
     test('extraMessage slot work', async () => {
-      const extraMessage = 'extraMessage'
+      const description = 'extraMessage'
       const wrapper = FormItemMount({
-        props: { label: 'Username', extraMessage },
-        slots: { default: () => h(IxInput), extraMessage: () => 'extraMessage slot' },
+        props: { label: 'Username', description },
+        slots: { default: () => h(IxInput), description: () => 'description slot' },
       })
 
-      expect(wrapper.find('.ix-form-item-extra-message').text()).toBe('extraMessage slot')
+      expect(wrapper.find('.ix-form-item-description').text()).toBe('description slot')
     })
 
     test('label work', async () => {
diff --git a/packages/components/form/demo/Basic.vue b/packages/components/form/demo/Basic.vue
index 6a673fa8a..4ce34ed5c 100644
--- a/packages/components/form/demo/Basic.vue
+++ b/packages/components/form/demo/Basic.vue
@@ -28,34 +28,28 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
 import { Validators, useFormGroup } from '@idux/cdk/forms'
 
-export default defineComponent({
-  setup() {
-    const { required, minLength, maxLength } = Validators
+const { required, minLength, maxLength } = Validators
 
-    const formGroup = useFormGroup({
-      username: ['', required],
-      password: ['', [required, minLength(6), maxLength(18)]],
-      remember: [true],
-    })
-
-    const login = () => {
-      if (formGroup.valid.value) {
-        console.log('login', formGroup.getValue())
-      } else {
-        formGroup.markAsDirty()
-      }
-    }
+const formGroup = useFormGroup({
+  username: ['', required],
+  password: ['', [required, minLength(6), maxLength(18)]],
+  remember: [true],
+})
 
-    const passwordVisible = ref(false)
+const login = () => {
+  if (formGroup.valid.value) {
+    console.log('login', formGroup.getValue())
+  } else {
+    formGroup.markAsDirty()
+  }
+}
 
-    return { formGroup, login, passwordVisible }
-  },
-})
+const passwordVisible = ref(false)
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/Coordinated.vue b/packages/components/form/demo/Coordinated.vue
index 070ca9bc6..8664ea539 100644
--- a/packages/components/form/demo/Coordinated.vue
+++ b/packages/components/form/demo/Coordinated.vue
@@ -18,9 +18,7 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script setup lang="ts">
 import { AbstractControl, Validators, useFormGroup } from '@idux/cdk/forms'
 
 const mobilePhoneValidator = (value: string) => {
@@ -30,58 +28,52 @@ const mobilePhoneValidator = (value: string) => {
   return { mobilePhone: { message: 'Mobile phone number is not valid!' } }
 }
 
-export default defineComponent({
-  setup() {
-    const { required, email } = Validators
-
-    const formGroup = useFormGroup({
-      method: ['email', required],
-      contact: ['', [required, email]],
-      subscribe: [true],
-    })
+const { required, email } = Validators
 
-    const methodControl = formGroup.get<string>('method')!
-    const contactControl = formGroup.get<string>('contact')!
-    const subscribeControl = formGroup.get<boolean>('subscribe')!
+const formGroup = useFormGroup({
+  method: ['email', required],
+  contact: ['', [required, email]],
+  subscribe: [true],
+})
 
-    methodControl.watchValue(value => {
-      if (value === 'mobilePhone') {
-        subscribeControl.disable()
-        subscribeControl.setValue(false)
-        contactControl.setValidator([required, mobilePhoneValidator])
-      } else {
-        subscribeControl.enable()
-        subscribeControl.setValue(true)
-        contactControl.setValidator([required, email])
-      }
+const methodControl = formGroup.get('method')
+const contactControl = formGroup.get('contact')
+const subscribeControl = formGroup.get('subscribe')
 
-      contactControl.reset()
-    })
+methodControl.watchValue(value => {
+  if (value === 'mobilePhone') {
+    subscribeControl.disable()
+    subscribeControl.setValue(false)
+    contactControl.setValidator([required, mobilePhoneValidator])
+  } else {
+    subscribeControl.enable()
+    subscribeControl.setValue(true)
+    contactControl.setValidator([required, email])
+  }
 
-    const getContactMessage = (control: AbstractControl) => {
-      if (control.hasError('required')) {
-        return 'Please input your contact number!'
-      }
-      if (control.hasError('email')) {
-        return 'The input is not valid email!'
-      }
-      if (control.hasError('mobilePhone')) {
-        return control.getError('mobilePhone')!.message as string
-      }
-      return ''
-    }
+  contactControl.reset()
+})
 
-    const onSubmit = () => {
-      if (formGroup.valid.value) {
-        console.log('submit', formGroup.getValue())
-      } else {
-        formGroup.markAsDirty()
-      }
-    }
+const getContactMessage = (control: AbstractControl) => {
+  if (control.hasError('required')) {
+    return 'Please input your contact number!'
+  }
+  if (control.hasError('email')) {
+    return 'The input is not valid email!'
+  }
+  if (control.hasError('mobilePhone')) {
+    return control.getError('mobilePhone')!.message as string
+  }
+  return ''
+}
 
-    return { formGroup, getContactMessage, onSubmit }
-  },
-})
+const onSubmit = () => {
+  if (formGroup.valid.value) {
+    console.log('submit', formGroup.getValue())
+  } else {
+    formGroup.markAsDirty()
+  }
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/CustomizedValidation.vue b/packages/components/form/demo/CustomizedValidation.vue
index ce401ec8f..2d30db828 100644
--- a/packages/components/form/demo/CustomizedValidation.vue
+++ b/packages/components/form/demo/CustomizedValidation.vue
@@ -18,8 +18,10 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, ref, watch } from 'vue'
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+
+import { ValidateStatus } from '@idux/cdk/forms'
 
 interface FormValue {
   valid?: string
@@ -28,32 +30,26 @@ interface FormValue {
   dynamic?: string
 }
 
-export default defineComponent({
-  setup() {
-    const formValue = reactive<FormValue>({})
-    watch(formValue, value => console.log('formValue', value), { deep: true })
-
-    const status = ref('valid')
-    const messageMap = {
-      valid: 'This is valid field!',
-      validating: 'This is validating field!',
-      invalid: 'This is invalid field!',
-    }
+const formValue = reactive<FormValue>({})
+watch(formValue, value => console.log('formValue', value), { deep: true })
 
-    const changeStatus = () => {
-      const currStatus = status.value
-      if (currStatus === 'valid') {
-        status.value = 'validating'
-      } else if (currStatus === 'validating') {
-        status.value = 'invalid'
-      } else {
-        status.value = 'valid'
-      }
-    }
+const status = ref<ValidateStatus>('valid')
+const messageMap = {
+  valid: 'This is valid field!',
+  validating: 'This is validating field!',
+  invalid: 'This is invalid field!',
+}
 
-    return { formValue, status, messageMap, changeStatus }
-  },
-})
+const changeStatus = () => {
+  const currStatus = status.value
+  if (currStatus === 'valid') {
+    status.value = 'validating'
+  } else if (currStatus === 'validating') {
+    status.value = 'invalid'
+  } else {
+    status.value = 'valid'
+  }
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/DynamicItem.vue b/packages/components/form/demo/DynamicItem.vue
index 76f7cd7ef..54b0479d1 100644
--- a/packages/components/form/demo/DynamicItem.vue
+++ b/packages/components/form/demo/DynamicItem.vue
@@ -13,7 +13,7 @@
         <IxIcon name="minus-circle" @click="removeGroupItem(key)"></IxIcon>
       </IxFormItem>
     </template>
-    <template v-for="(control, index) in arrayControl.controls.value" :key="control.uid">
+    <template v-for="(control, index) in formArray.controls.value" :key="control.uid">
       <IxFormItem :label="'Array-' + control.uid">
         <IxInput :control="control"></IxInput>
         <IxIcon name="minus-circle" @click="removeArrayItem(index)"></IxIcon>
@@ -22,51 +22,39 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { useFormArray, useFormControl, useFormGroup } from '@idux/cdk/forms'
 
-import { FormArray, useFormArray, useFormControl, useFormGroup } from '@idux/cdk/forms'
-
-export default defineComponent({
-  setup() {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const formGroup = useFormGroup<any>({
-      array: useFormArray([]),
-    })
+interface FormValue {
+  array: string[]
+  [key: string]: any
+}
 
-    const arrayControl = formGroup.get('array') as FormArray<string[]>
+const formArray = useFormArray([['']])
 
-    let uid = 0
-    const addGroupItem = () => {
-      const itemKey = `Group-${uid++}`
-      formGroup.addControl(itemKey, useFormControl())
-    }
+const formGroup = useFormGroup<FormValue>({
+  array: formArray,
+})
 
-    const removeGroupItem = (key: string) => {
-      formGroup.removeControl(key)
-    }
+let uid = 0
+const addGroupItem = () => {
+  const itemKey = `Group-${uid++}`
+  formGroup.addControl(itemKey, useFormControl())
+}
 
-    const addArrayItem = () => {
-      arrayControl.push(useFormControl())
-    }
+const removeGroupItem = (key: string) => {
+  formGroup.removeControl(key)
+}
 
-    const removeArrayItem = (index: number) => {
-      arrayControl.removeAt(index)
-    }
+const addArrayItem = () => {
+  formArray.push(useFormControl(''))
+}
 
-    const onSubmit = () => console.log('submit', formGroup.getValue())
+const removeArrayItem = (index: number) => {
+  formArray.removeAt(index)
+}
 
-    return {
-      formGroup,
-      arrayControl,
-      addGroupItem,
-      removeGroupItem,
-      addArrayItem,
-      removeArrayItem,
-      onSubmit,
-    }
-  },
-})
+const onSubmit = () => console.log('submit', formGroup.getValue())
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/Layout.vue b/packages/components/form/demo/Layout.vue
index 8be870f13..ef4afbfa7 100644
--- a/packages/components/form/demo/Layout.vue
+++ b/packages/components/form/demo/Layout.vue
@@ -19,16 +19,12 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
-export default defineComponent({
-  setup() {
-    const layout = ref('horizontal')
+import { FormLayout } from '@idux/components/form'
 
-    return { layout }
-  },
-})
+const layout = ref<FormLayout>('horizontal')
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/Message.vue b/packages/components/form/demo/Message.vue
index 5cb4c4d82..7492367dd 100644
--- a/packages/components/form/demo/Message.vue
+++ b/packages/components/form/demo/Message.vue
@@ -25,7 +25,7 @@
     <IxFormItem label="Website">
       <IxInput control="website"> </IxInput>
     </IxFormItem>
-    <IxFormItem label="Captcha" required extra="We must make sure that your are a human.">
+    <IxFormItem label="Captcha" required description="We must make sure that your are a human.">
       <IxRow gutter="8">
         <IxCol span="12">
           <IxInput control="captcha"> </IxInput>
@@ -50,7 +50,8 @@ import { defineComponent } from 'vue'
 import { AbstractControl, ValidateErrors, Validators, useFormGroup } from '@idux/cdk/forms'
 
 Validators.setMessages({
-  required: (_err, _control) => '必填项/Input is required',
+  required: '必填项/Input is required',
+  mobilePhone: (_err, _control) => '手机号码格式不正确/Mobile phone number is not valid',
   passwordRequired: {
     'zh-CN': '请确认你的密码',
     'en-US': 'Please confirm your password',
@@ -59,10 +60,6 @@ Validators.setMessages({
     'zh-CN': '两次密码输入不一致',
     'en-US': 'Two passwords that you enter is inconsistent',
   },
-  mobilePhone: {
-    'zh-CN': '手机号码格式不正确',
-    'en-US': 'Mobile phone number is not valid',
-  },
 })
 
 const confirmPasswordValidator = (value: string, control: AbstractControl): ValidateErrors | undefined => {
diff --git a/packages/components/form/demo/Nest.vue b/packages/components/form/demo/Nest.vue
index 3e4782fcb..348f16c08 100644
--- a/packages/components/form/demo/Nest.vue
+++ b/packages/components/form/demo/Nest.vue
@@ -39,51 +39,41 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script setup lang="ts">
 import { Validators, useFormGroup } from '@idux/cdk/forms'
 
-interface Name {
-  firstName: string
-  lastName: string
-}
-
-interface Address {
-  city: string
-  street: string
-  zip?: number
-}
-
-export default defineComponent({
-  setup() {
-    const { required } = Validators
+const { required } = Validators
 
-    const nameGroup = useFormGroup<Name>({
-      firstName: ['', required],
-      lastName: ['', required],
-    })
+// const nameGroup = useFormGroup({
+//   firstName: ['', required],
+//   lastName: ['', required],
+// })
 
-    const addressGroup = useFormGroup<Address>({
-      city: ['', required],
-      street: ['', required],
-      zip: [undefined],
-    })
+// const addressGroup = useFormGroup({
+//   city: ['', required],
+//   street: ['', required],
+//   zip: [''],
+// })
 
-    const formGroup = useFormGroup({
-      name: nameGroup,
-      address: addressGroup,
-    })
-
-    const onSubmit = () => {
-      if (formGroup.valid.value) {
-        console.log('submit', formGroup.getValue())
-      } else {
-        formGroup.markAsDirty()
-      }
-    }
-
-    return { formGroup, onSubmit }
+const formGroup = useFormGroup({
+  // name: nameGroup,
+  // address: addressGroup,
+  name: {
+    firstName: ['', required],
+    lastName: ['', required],
+  },
+  address: {
+    city: ['', required],
+    street: ['', required],
+    zip: [''],
   },
 })
+
+const onSubmit = () => {
+  if (formGroup.valid.value) {
+    console.log('submit', formGroup.getValue())
+  } else {
+    formGroup.markAsDirty()
+  }
+}
 </script>
diff --git a/packages/components/form/demo/Register.vue b/packages/components/form/demo/Register.vue
index 7675ba025..80725d519 100644
--- a/packages/components/form/demo/Register.vue
+++ b/packages/components/form/demo/Register.vue
@@ -42,7 +42,7 @@
       labelFor="captcha"
       required
       message="Please input the captcha you got!"
-      extra="We must make sure that your are a human."
+      description="We must make sure that your are a human."
     >
       <IxRow gutter="8">
         <IxCol span="12">
@@ -65,9 +65,7 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script setup lang="ts">
 import { AbstractControl, ValidateErrors, Validators, useFormGroup } from '@idux/cdk/forms'
 
 const confirmPasswordValidator = (value: string, control: AbstractControl): ValidateErrors | undefined => {
@@ -79,51 +77,45 @@ const confirmPasswordValidator = (value: string, control: AbstractControl): Vali
   return undefined
 }
 
-export default defineComponent({
-  setup() {
-    const labelCol = { sm: 8, xs: 24 }
-    const controlCol = { sm: 16, xs: 24 }
-    const noLabelControlCol = { sm: { offset: 8, span: 16 }, xs: 24 }
-
-    const { required, email } = Validators
+const labelCol = { sm: 8, xs: 24 }
+const controlCol = { sm: 16, xs: 24 }
+const noLabelControlCol = { sm: { offset: 8, span: 16 }, xs: 24 }
 
-    const formGroup = useFormGroup({
-      email: ['', [required, email]],
-      password: ['', required],
-      confirmPassword: ['', [required, confirmPasswordValidator]],
-      nickname: ['', required],
-      phoneNumberPrefix: ['+86', required],
-      phoneNumber: ['', required],
-      website: [''],
-      time: [Date.now(), required],
-      captcha: ['', { validators: [required], disabled: true }],
-      agree: [false],
-    })
+const { required, email } = Validators
 
-    const passwordControl = formGroup.get('password')
-    const confirmPasswordControl = formGroup.get('confirmPassword')
-    passwordControl.watchValue(() => confirmPasswordControl.validate())
+const formGroup = useFormGroup({
+  email: ['', [required, email]],
+  password: ['', required],
+  confirmPassword: ['', [required, confirmPasswordValidator]],
+  nickname: ['', required],
+  phoneNumberPrefix: ['+86', required],
+  phoneNumber: ['', required],
+  website: [''],
+  time: [Date.now(), required],
+  captcha: ['', { validators: [required], disabled: true }],
+  agree: [false],
+})
 
-    const captchaControl = formGroup.get('captcha')
-    const agreeControl = formGroup.get('agree')
+const passwordControl = formGroup.get('password')
+const confirmPasswordControl = formGroup.get('confirmPassword')
+passwordControl.watchValue(() => confirmPasswordControl.validate())
 
-    agreeControl.watchValue(value => {
-      value ? captchaControl.enable() : captchaControl.disable()
-    })
+const captchaControl = formGroup.get('captcha')
+const agreeControl = formGroup.get('agree')
 
-    const register = () => {
-      if (formGroup.valid.value) {
-        console.log('register', formGroup.getValue())
-      } else {
-        formGroup.markAsDirty()
-      }
-    }
+agreeControl.watchValue(value => {
+  value ? captchaControl.enable() : captchaControl.disable()
+})
 
-    const getCaptcha = () => console.log('getCaptcha')
+const register = () => {
+  if (formGroup.valid.value) {
+    console.log('register', formGroup.getValue())
+  } else {
+    formGroup.markAsDirty()
+  }
+}
 
-    return { labelCol, controlCol, noLabelControlCol, formGroup, register, getCaptcha }
-  },
-})
+const getCaptcha = () => console.log('getCaptcha')
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/demo/Search.vue b/packages/components/form/demo/Search.vue
index 6f0ce4e5e..52cc56b79 100644
--- a/packages/components/form/demo/Search.vue
+++ b/packages/components/form/demo/Search.vue
@@ -19,28 +19,22 @@
   </IxForm>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
 import { useFormControl, useFormGroup } from '@idux/cdk/forms'
 
-export default defineComponent({
-  setup() {
-    const controlLength = 12
-    const showMore = ref(false)
-    const formGroup = useFormGroup({})
+const controlLength = 12
+const showMore = ref(false)
+const formGroup = useFormGroup<Record<string, unknown>>({})
 
-    for (let index = 1; index <= controlLength; index++) {
-      const control = useFormControl()
-      formGroup.addControl(`field${index}`, control)
-    }
-
-    const onSearch = () => console.log('search', formGroup.getValue())
-    const onClear = () => formGroup.reset()
+for (let index = 1; index <= controlLength; index++) {
+  const control = useFormControl()
+  formGroup.addControl(`field${index}`, control)
+}
 
-    return { controlLength, showMore, formGroup, onSearch, onClear }
-  },
-})
+const onSearch = () => console.log('search', formGroup.getValue())
+const onClear = () => formGroup.reset()
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/components/form/docs/Index.zh.md b/packages/components/form/docs/Index.zh.md
index 8b59dc93c..4e96955e0 100644
--- a/packages/components/form/docs/Index.zh.md
+++ b/packages/components/form/docs/Index.zh.md
@@ -23,7 +23,6 @@ order: 0
 | `labelTooltipIcon` | 配置表单文本的提示信息icon | `string` | `'question-circle'` | ✅ | - |
 | `layout` | 表单布局 | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | ✅ | - |
 | `size` | 表单大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
-| `statusIcon` |  配置 `IxFormItem` 的 `statusIcon` 默认值 | `boolean \| Record<ValidateStatus, string>` | `false` | - | - |
 
 ### IxFormItem
 
@@ -40,7 +39,7 @@ order: 0
 | `controlCol` | 配置表单控件的布局配置，可参考 `IxCol` 组件 | `number \| ColProps` | - | - | 传入 `string` 或者 `number` 时，为 `IxCol` 的 `span` 配置 |
 | `controlTooltip` | 配置表单控件的提示信息 | `string \| #controlTooltip` | - | - | 通常用于对输入规则的详细说明 |
 | `controlTooltipIcon` | 配置表单控件的提示信息icon | `string` | - | - | - |
-| `extraMessage` | 额外的提示信息 | `string \| #extraMessage` | - | - | 当需要错误信息和提示文案同时出现时使用 |
+| `description` | 额外的提示信息 | `string \| #description` | - | - | 当需要错误信息和提示文案同时出现时使用 |
 | `label` | `label` 标签的文本| `string \| #label` | - | - | - |
 | `labelAlign` | `label` 标签文本对齐方式 | `'start' \| 'end'` | - | - | - |
 | `labelCol` | `label` 标签布局配置，可参考 `IxCol` 组件  | `number \| ColProps` | - | - | 传入 `string` 或者 `number` 时，为 `IxCol` 的 `span` 配置 |
@@ -50,7 +49,6 @@ order: 0
 | `required` | 必填样式设置 | `boolean` | `false` | - | 仅控制样式 |
 | `message` | 手动指定表单项的校验提示 | `string \| (control?: AbstractControl) => string \| FormValidateMessage` | - | - | 传入 `string` 时，为 `invalid` 状态的提示 |
 | `status` | 手动指定表单项的校验状态 | `valid \| invalid \| validating` | - | - | - |
-| `statusIcon` | 自定义校验状态图标 | `boolean \| Record<ValidateStatus, string> \| #statusIcon={status}` | - | - | 为 `true` 时，显示默认的图标 |
 
 ### IxFormWrapper
 
diff --git a/packages/components/form/src/FormItem.tsx b/packages/components/form/src/FormItem.tsx
index b2e4b48e8..65a173300 100644
--- a/packages/components/form/src/FormItem.tsx
+++ b/packages/components/form/src/FormItem.tsx
@@ -109,10 +109,18 @@ function renderControl(
   message: ComputedRef<string | undefined>,
   prefixCls: string,
 ) {
-  const { controlTooltip, extra, extraMessage } = props
-  const { controlTooltip: controlTooltipSlot, extra: extraSlot, extraMessage: extraMessageSlot } = slots
+  const { controlTooltip, description, extra, extraMessage } = props
+  const {
+    controlTooltip: controlTooltipSlot,
+    extra: extraSlot,
+    extraMessage: extraMessageSlot,
+    description: descriptionSlot,
+  } = slots
   if (__DEV__ && (extra || extraSlot)) {
-    Logger.warn('components/form', '`extra` was deprecated, please use `extraMessage` instead.')
+    Logger.warn('components/form', '`extra` was deprecated, please use `description` instead.')
+  }
+  if (__DEV__ && (extraMessage || extraMessageSlot)) {
+    Logger.warn('components/form', '`extraMessage` was deprecated, please use `description` instead.')
   }
   const statusNode = statusIcon.value && (
     <span class={`${prefixCls}-status-icon`}>
@@ -120,8 +128,9 @@ function renderControl(
     </span>
   )
   const messageNode = message.value && <div class={`${prefixCls}-message`}>{message.value}</div>
-  const extraNode = extraSlot ? extraSlot() : extraMessageSlot ? extraMessageSlot() : extra || extraMessage
-  const extraWrapper = extraNode && <div class={`${prefixCls}-extra-message`}>{extraNode}</div>
+  const _descriptionSlot = extraSlot || extraMessageSlot || descriptionSlot
+  const descriptionNode = _descriptionSlot ? _descriptionSlot() : extra || extraMessage || description
+  const descriptionWrapper = descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>
   const tooltipNode = renderTooltip(controlTooltipSlot, controlTooltip, controlTooltipIcon.value)
   return (
     <IxCol class={`${prefixCls}-control`} {...controlColConfig.value}>
@@ -131,7 +140,7 @@ function renderControl(
         {tooltipNode && <span class={`${prefixCls}-control-tooltip`}>{tooltipNode}</span>}
       </div>
       {messageNode}
-      {extraWrapper}
+      {descriptionWrapper}
     </IxCol>
   )
 }
diff --git a/packages/components/form/src/composables/useFormItem.ts b/packages/components/form/src/composables/useFormItem.ts
index f382a0cc5..7bdf62f61 100644
--- a/packages/components/form/src/composables/useFormItem.ts
+++ b/packages/components/form/src/composables/useFormItem.ts
@@ -120,7 +120,10 @@ function useStatusIcon(
 
     const icon = props.hasFeedback ?? props.statusIcon ?? formProps?.hasFeedback ?? formProps?.statusIcon
     if (__DEV__ && (props.hasFeedback || formProps?.hasFeedback)) {
-      Logger.warn('components/form', '`hasFeedback` was deprecated, please use `statusIcon` instead.')
+      Logger.warn('components/form', '`hasFeedback` was deprecated.')
+    }
+    if (__DEV__ && (props.statusIcon || formProps?.statusIcon)) {
+      Logger.warn('components/form', '`statusIcon` was deprecated.')
     }
     if (!icon) {
       return undefined
diff --git a/packages/components/form/src/types.ts b/packages/components/form/src/types.ts
index 8d4851f51..efb81c16e 100644
--- a/packages/components/form/src/types.ts
+++ b/packages/components/form/src/types.ts
@@ -20,6 +20,9 @@ export const formProps = {
   },
   controlCol: colProp,
   controlTooltipIcon: String,
+  /**
+   * @deprecated
+   */
   hasFeedback: {
     type: Boolean,
     default: undefined,
@@ -29,6 +32,9 @@ export const formProps = {
   labelTooltipIcon: String,
   layout: String as PropType<FormLayout>,
   size: String as PropType<FormSize>,
+  /**
+   * @deprecated
+   */
   statusIcon: {
     type: [Boolean, Object] as PropType<boolean | Record<ValidateStatus, string>>,
     default: false,
@@ -36,7 +42,7 @@ export const formProps = {
 } as const
 
 export type FormProps = ExtractInnerPropTypes<typeof formProps>
-export type FormPublicProps = ExtractPublicPropTypes<typeof formProps>
+export type FormPublicProps = Omit<ExtractPublicPropTypes<typeof formProps>, 'hasFeedback' | 'statusIcon'>
 export type FormComponent = DefineComponent<Omit<HTMLAttributes, keyof FormPublicProps> & FormPublicProps>
 export type FormInstance = InstanceType<DefineComponent<FormProps>>
 
@@ -55,11 +61,21 @@ export const formItemProps = {
   controlCol: colProp,
   controlTooltip: String,
   controlTooltipIcon: String,
+  description: String,
+  /**
+   * @deprecated
+   */
   hasFeedback: {
     type: Boolean,
     default: undefined,
   },
+  /**
+   * @deprecated Use `description` instead.
+   */
   extra: String,
+  /**
+   * @deprecated Use `description` instead.
+   */
   extraMessage: String,
   label: String,
   labelAlign: String as PropType<FormLabelAlign>,
@@ -75,6 +91,9 @@ export const formItemProps = {
     string | ((control: AbstractControl) => string) | FormValidateMessage
   >,
   status: String as PropType<ValidateStatus>,
+  /**
+   * @deprecated
+   */
   statusIcon: {
     type: [Boolean, Object] as PropType<boolean | Record<ValidateStatus, string>>,
     default: undefined,
@@ -82,7 +101,10 @@ export const formItemProps = {
 } as const
 
 export type FormItemProps = ExtractInnerPropTypes<typeof formItemProps>
-export type FormItemPublicProps = ExtractPublicPropTypes<typeof formItemProps>
+export type FormItemPublicProps = Omit<
+  ExtractPublicPropTypes<typeof formItemProps>,
+  'extra' | 'extraMessage' | 'hasFeedback' | 'statusIcon'
+>
 export type FormItemComponent = DefineComponent<Omit<HTMLAttributes, keyof FormItemPublicProps> & FormItemPublicProps>
 export type FormItemInstance = InstanceType<DefineComponent<FormItemProps>>
 
diff --git a/packages/components/form/style/index.less b/packages/components/form/style/index.less
index cd1e7de01..dbf6d148d 100644
--- a/packages/components/form/style/index.less
+++ b/packages/components/form/style/index.less
@@ -110,7 +110,7 @@
   }
 
   &-message,
-  &-extra-message {
+  &-description {
     clear: both;
     min-height: @form-item-margin-bottom;
     color: @form-color-secondary;