diff --git a/README.md b/README.md
index 37c032295..5fbb4c036 100644
--- a/README.md
+++ b/README.md
@@ -58,9 +58,9 @@ See [Getting Started](https://idux.site/docs/getting-started/en) for more detail
 ## ⌨️ Development
 
 ```bash
-npm install
+pnpm install
 
-npm start
+pnpm start
 ```
 
 Open a browser: `http://localhost:3000`
diff --git a/packages/components/checkbox/__tests__/checkboxGroup.spec.ts b/packages/components/checkbox/__tests__/checkboxGroup.spec.ts
index f9c3e38f9..bb1fe64ae 100644
--- a/packages/components/checkbox/__tests__/checkboxGroup.spec.ts
+++ b/packages/components/checkbox/__tests__/checkboxGroup.spec.ts
@@ -14,10 +14,10 @@ describe('CheckboxGroup', () => {
 
   const CheckboxGroupMount = (groupOptions?: MountingOptions<Partial<CheckboxGroupProps>>) => {
     const { props, ...rest } = groupOptions || {}
-    return mount(CheckboxGroup, { props: { options: defaultOptions, ...props }, ...rest })
+    return mount(CheckboxGroup, { props: { dataSource: defaultOptions, ...props }, ...rest })
   }
 
-  renderWork<CheckboxGroupProps>(CheckboxGroup, { props: { options: defaultOptions } })
+  renderWork<CheckboxGroupProps>(CheckboxGroup, { props: { dataSource: defaultOptions } })
 
   test('v-model:value work', async () => {
     const onUpdateValue = jest.fn()
@@ -68,31 +68,31 @@ describe('CheckboxGroup', () => {
     await wrapper.findAll('input')[0].setValue(false)
 
     expect(onChange).toBeCalledTimes(1)
-    expect(onChange).toBeCalledWith([])
+    expect(onChange).toBeCalledWith([], ['option1'])
   })
 
-  test('options work', async () => {
-    let options = [
+  test('dataSource work', async () => {
+    let dataSource = [
       { label: 'option1', value: 'option1' },
       { label: 'option2', value: 'option2' },
     ]
-    const wrapper = CheckboxGroupMount({ props: { options } })
+    const wrapper = CheckboxGroupMount({ props: { dataSource } })
 
     expect(wrapper.findAll('.ix-checkbox').length).toBe(2)
 
-    options = [
+    dataSource = [
       { label: 'option1', value: 'option1' },
       { label: 'option2', value: 'option2' },
       { label: 'option3', value: 'option3' },
     ]
 
-    await wrapper.setProps({ options })
+    await wrapper.setProps({ dataSource })
 
     expect(wrapper.findAll('.ix-checkbox').length).toBe(3)
   })
 
   test('name work', async () => {
-    const options = [
+    const dataSource = [
       { label: 'option1', value: 'option1', name: 'child' },
       { label: 'option2', value: 'option2' },
       { label: 'option3', value: 'option3' },
@@ -100,7 +100,7 @@ describe('CheckboxGroup', () => {
     const wrapper = CheckboxGroupMount({
       props: {
         name: 'group',
-        options,
+        dataSource,
       },
     })
 
diff --git a/packages/components/checkbox/demo/Button.vue b/packages/components/checkbox/demo/Button.vue
index 774083432..bc54cd2ef 100644
--- a/packages/components/checkbox/demo/Button.vue
+++ b/packages/components/checkbox/demo/Button.vue
@@ -1,22 +1,21 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" buttoned>
-      <IxCheckbox value="beijing">Beijing</IxCheckbox>
-      <IxCheckbox value="shanghai">Shanghai</IxCheckbox>
-      <IxCheckbox value="guangzhou">Guangzhou</IxCheckbox>
-      <IxCheckbox value="shenzhen">Shenzhen</IxCheckbox>
-    </IxCheckboxGroup>
-    <IxCheckboxGroup v-model:value="value" buttoned disabled>
-      <IxCheckbox value="beijing">Beijing</IxCheckbox>
-      <IxCheckbox value="shanghai">Shanghai</IxCheckbox>
-      <IxCheckbox value="guangzhou">Guangzhou</IxCheckbox>
-      <IxCheckbox value="shenzhen">Shenzhen</IxCheckbox>
-    </IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" buttoned :dataSource="dataSource"></IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" buttoned :dataSource="dataSource" disabled></IxCheckboxGroup>
   </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import { CheckboxData } from '@idux/components/checkbox'
+
 const value = ref(['beijing'])
+
+const dataSource: CheckboxData[] = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
 </script>
diff --git a/packages/components/checkbox/demo/Gap.vue b/packages/components/checkbox/demo/Gap.vue
index ed5b41094..9e79d9c4c 100644
--- a/packages/components/checkbox/demo/Gap.vue
+++ b/packages/components/checkbox/demo/Gap.vue
@@ -1,7 +1,7 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" />
-    <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" buttoned />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" :gap="16" />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" :gap="16" buttoned />
   </IxSpace>
 </template>
 
@@ -10,7 +10,7 @@ import { ref } from 'vue'
 
 const value = ref(['beijing'])
 
-const options = [
+const dataSource = [
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Guangzhou', value: 'guangzhou' },
diff --git a/packages/components/checkbox/demo/Group.vue b/packages/components/checkbox/demo/Group.vue
index 7a321b894..0f9154322 100644
--- a/packages/components/checkbox/demo/Group.vue
+++ b/packages/components/checkbox/demo/Group.vue
@@ -1,15 +1,21 @@
 <template>
-  <IxCheckboxGroup v-model:value="value" @Change="onChang">
-    <IxCheckbox value="a">A</IxCheckbox>
-    <IxCheckbox value="b">B</IxCheckbox>
-    <IxCheckbox value="c">C</IxCheckbox>
-    <IxCheckbox value="d">D</IxCheckbox>
-  </IxCheckboxGroup>
+  <IxSpace vertical>
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource"></IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned></IxCheckboxGroup>
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const value = ref(['a'])
-const onChang = console.log
+import { CheckboxData } from '@idux/components/checkbox'
+
+const value = ref(['beijing'])
+
+const dataSource: CheckboxData[] = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
 </script>
diff --git a/packages/components/checkbox/demo/Indeterminate.vue b/packages/components/checkbox/demo/Indeterminate.vue
index c898108bf..8aa3c6ab4 100644
--- a/packages/components/checkbox/demo/Indeterminate.vue
+++ b/packages/components/checkbox/demo/Indeterminate.vue
@@ -3,7 +3,7 @@
     <IxCheckbox v-model:checked="isCheckAll" :indeterminate="indeterminate" @change="onCheckAllChange">
       Check all
     </IxCheckbox>
-    <IxCheckboxGroup v-model:value="groupValue" :options="options" />
+    <IxCheckboxGroup v-model:value="groupValue" :dataSource="dataSource" />
   </IxSpace>
 </template>
 
@@ -15,7 +15,7 @@ const list = ['Apple', 'Pear', 'Orange']
 const isCheckAll = ref(false)
 const indeterminate = ref(true)
 const groupValue = ref(['Apple', 'Orange'])
-const options = list.map(item => {
+const dataSource = list.map(item => {
   return { label: item, value: item }
 })
 
diff --git a/packages/components/checkbox/demo/Options.md b/packages/components/checkbox/demo/Options.md
deleted file mode 100644
index 9a33ff5c6..000000000
--- a/packages/components/checkbox/demo/Options.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-order: 5
-title:
-  zh: Options 配置
-  en: Use Options
----
-
-## zh
-
-通过设置 `options` 参数来渲染多选框组。
-
-## en
-
-Render checkbox group by setting `options`.
diff --git a/packages/components/checkbox/demo/Options.vue b/packages/components/checkbox/demo/Options.vue
deleted file mode 100644
index 60d2c07e4..000000000
--- a/packages/components/checkbox/demo/Options.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" :options="options"></IxCheckboxGroup>
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned></IxCheckboxGroup>
-  </IxSpace>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import { CheckboxOption } from '@idux/components/checkbox'
-
-const value = ref(['beijing'])
-
-const options: CheckboxOption[] = [
-  { label: 'Beijing', value: 'beijing' },
-  { label: 'Shanghai', value: 'shanghai' },
-  { label: 'Guangzhou', value: 'guangzhou' },
-  { label: 'Shenzhen', value: 'shenzhen' },
-]
-</script>
diff --git a/packages/components/checkbox/demo/Size.vue b/packages/components/checkbox/demo/Size.vue
index 3ac1f527d..8cd77c6c5 100644
--- a/packages/components/checkbox/demo/Size.vue
+++ b/packages/components/checkbox/demo/Size.vue
@@ -1,8 +1,8 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="sm" />
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned />
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="lg" />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned size="sm" />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned size="lg" />
   </IxSpace>
 </template>
 
@@ -11,7 +11,7 @@ import { ref } from 'vue'
 
 const value = ref(['beijing'])
 
-const options = [
+const dataSource = [
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Guangzhou', value: 'guangzhou' },
diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
index 0df3fe157..a6c23f41d 100644
--- a/packages/components/checkbox/docs/Index.zh.md
+++ b/packages/components/checkbox/docs/Index.zh.md
@@ -16,20 +16,18 @@ cover:
 
 | 名称 | 说明 |  类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
 | `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
 | `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
 | `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时，此配置无效 |
 | `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时，按钮样式处于半选状态，且不受`checked`影响 |
 | `label` | 勾选框的文本 | `string \| #default` | - | - | - |
-| `trueValue` | 勾选框选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
-| `falseValue` | 勾选框不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
+| `trueValue` | 选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
+| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
 | `value` | 设置勾选框的值，与 `IxCheckboxGroup` 配合使用 | `any`| - | - | - |
 | `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
-| `onBlur` | 失去焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
-| `onChange` | 选中状态发生变化后的回调 | `(checked: boolean \| string \| number) => void`| - | - | - |
-| `onFocus` | 获取焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
+| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
 
 #### CheckboxMethods
 
@@ -44,51 +42,51 @@ cover:
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `buttoned` | 子`IxCheckbox`的`buttoned`属性 | `boolean` | `false` | - | - |
-| `disabled` | 子`IxCheckbox`的`disabled`属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
-| `gap` | 子`IxCheckbox` 的间隔 | `number \| string` | - | - | - |
-| `name` | 子`IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
-| `options` | 以配置形式设置子元素 | `CheckboxOption[]`| - | - | 优先级高于 `default` 插槽 |
-| `size` | 子`IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
-| `onChange` | 选中值发生变化后的回调 | `(value: Array<string \| number>) => void`| - | - | - |
-
-<!--- insert less variable begin  --->
-## 主题变量
-
-| 名称 | `default` | `dark` | 备注 |
-| --- | --- | --- | --- |
-| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
-| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
-| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@checkbox-line-height` | `@form-line-height` | - | - |
-| `@checkbox-height-sm` | `@form-height-sm` | - | - |
-| `@checkbox-height-md` | `@form-height-md` | - | - |
-| `@checkbox-height-lg` | `@form-height-lg` | - | - |
-| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
-| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
-| `@checkbox-border-width` | `@form-border-width` | - | - |
-| `@checkbox-border-style` | `@form-border-style` | - | - |
-| `@checkbox-border-color` | `@form-border-color` | - | - |
-| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-color` | `@form-color` | - | - |
-| `@checkbox-background-color` | `@form-background-color` | - | - |
-| `@checkbox-hover-color` | `@form-hover-color` | - | - |
-| `@checkbox-active-color` | `@form-active-color` | - | - |
-| `@checkbox-focus-color` | `@form-focus-color` | - | - |
-| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
-| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
-| `@checkbox-font-size` | `@font-size-md` | - | - |
-| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
-| `@checkbox-box-size` | `16px` | - | - |
-| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-indeterminate-width` | `8px` | - | - |
-| `@checkbox-indeterminate-height` | `2px` | - | - |
-| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
-| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
-| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
-| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
-| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
-<!--- insert less variable end  --->
\ No newline at end of file
+| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
+| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
+| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
+| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
+| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
+| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
+| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
+
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | `default` | `dark` | 备注 |
+| --- | --- | --- | --- |
+| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
+| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
+| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
+| `@checkbox-line-height` | `@form-line-height` | - | - |
+| `@checkbox-height-sm` | `@form-height-sm` | - | - |
+| `@checkbox-height-md` | `@form-height-md` | - | - |
+| `@checkbox-height-lg` | `@form-height-lg` | - | - |
+| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
+| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
+| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
+| `@checkbox-border-width` | `@form-border-width` | - | - |
+| `@checkbox-border-style` | `@form-border-style` | - | - |
+| `@checkbox-border-color` | `@form-border-color` | - | - |
+| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-color` | `@form-color` | - | - |
+| `@checkbox-background-color` | `@form-background-color` | - | - |
+| `@checkbox-hover-color` | `@form-hover-color` | - | - |
+| `@checkbox-active-color` | `@form-active-color` | - | - |
+| `@checkbox-focus-color` | `@form-focus-color` | - | - |
+| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
+| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
+| `@checkbox-font-size` | `@font-size-md` | - | - |
+| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
+| `@checkbox-box-size` | `16px` | - | - |
+| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-indeterminate-width` | `8px` | - | - |
+| `@checkbox-indeterminate-height` | `2px` | - | - |
+| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
+| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
+| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
+| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
+| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
+<!--- insert less variable end  --->
diff --git a/packages/components/checkbox/index.ts b/packages/components/checkbox/index.ts
index 4cf179132..2eb8e410d 100644
--- a/packages/components/checkbox/index.ts
+++ b/packages/components/checkbox/index.ts
@@ -22,5 +22,5 @@ export type {
   CheckboxGroupInstance,
   CheckboxGroupComponent,
   CheckboxGroupPublicProps as CheckboxGroupProps,
-  CheckboxOption,
+  CheckboxData,
 } from './src/types'
diff --git a/packages/components/checkbox/src/Checkbox.tsx b/packages/components/checkbox/src/Checkbox.tsx
index 2f0325a29..b40042a3a 100644
--- a/packages/components/checkbox/src/Checkbox.tsx
+++ b/packages/components/checkbox/src/Checkbox.tsx
@@ -5,19 +5,15 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CheckboxGroupContext } from './token'
-import type { CheckValue, CheckboxProps } from './types'
-import type { ComputedRef, StyleValue } from 'vue'
-
-import { computed, defineComponent, inject, normalizeClass, ref } from 'vue'
+import { type ComputedRef, computed, defineComponent, inject, normalizeClass, ref } from 'vue'
 
 import { callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { FORM_TOKEN } from '@idux/components/form'
-import { useFormAccessor, useFormElement } from '@idux/components/utils'
+import { covertStringVNode, useFormAccessor, useFormElement } from '@idux/components/utils'
 
-import { checkboxGroupToken } from './token'
-import { checkboxProps } from './types'
+import { type CheckboxGroupContext, checkboxGroupToken } from './token'
+import { type CheckValue, type CheckboxProps, checkboxProps } from './types'
 
 export default defineComponent({
   name: 'IxCheckbox',
@@ -57,15 +53,14 @@ export default defineComponent({
     })
 
     return () => {
-      const prefixCls = mergedPrefixCls.value
       const { autofocus, value, label } = props
-      const labelNode = slots.default?.() ?? label
-      const labelWrapper = labelNode && <span class={`${prefixCls}-label`}>{labelNode}</span>
       const { class: className, style, type, tabindex, ...restAttrs } = attrs
+      const prefixCls = mergedPrefixCls.value
+      const labelNode = covertStringVNode(slots.default, label)
       return (
         <label
           class={classes.value}
-          style={style as StyleValue}
+          style={style as string}
           role="checkbox"
           aria-checked={isChecked.value}
           aria-disabled={isDisabled.value}
@@ -88,7 +83,7 @@ export default defineComponent({
             />
             {!isButtoned.value && <span class={`${prefixCls}-input-box`} tabindex={tabindex as number} />}
           </span>
-          {labelWrapper}
+          {labelNode && <span class={`${prefixCls}-label`}>{labelNode}</span>}
           {isButtoned.value && <span class={`${prefixCls}-button-tick`} tabindex={tabindex as number} />}
         </label>
       )
@@ -111,27 +106,31 @@ const useCheckbox = (props: CheckboxProps, checkboxGroup: CheckboxGroupContext |
   if (checkboxGroup) {
     const { props: groupProps, accessor } = checkboxGroup
     isChecked = computed(() => (accessor.valueRef.value ?? []).includes(props.value ?? props.trueValue))
-    isDisabled = computed(() => accessor.disabled.value)
+    isDisabled = computed(() => accessor.disabled.value ?? !!props.disabled)
 
     handleBlur = (evt: FocusEvent) => {
       isFocused.value = false
       callEmit(props.onBlur, evt)
       accessor.markAsBlurred()
     }
+
     handleChange = (evt: Event) => {
       const checked = (evt.target as HTMLInputElement).checked
-      const checkValue = checked ? props.trueValue : props.falseValue
-      const value = props.value
-      const groupCheckedValue = [...(accessor.valueRef.value ?? [])]
-      const checkValueIndex = groupCheckedValue.indexOf(value)
+      const { trueValue, falseValue, value } = props
+      const checkValue = checked ? trueValue : falseValue
+
+      const oldValue = accessor.valueRef.value ?? []
+      const newValue = [...oldValue]
+      const checkValueIndex = newValue.indexOf(value)
       if (checkValueIndex === -1) {
-        groupCheckedValue.push(value)
+        newValue.push(value)
       } else {
-        groupCheckedValue.splice(checkValueIndex, 1)
+        newValue.splice(checkValueIndex, 1)
       }
-      accessor.setValue(groupCheckedValue)
-      callEmit(props.onChange, checkValue)
-      callEmit(groupProps.onChange, groupCheckedValue)
+
+      accessor.setValue(newValue)
+      callEmit(props.onChange, checkValue, !checkValue)
+      callEmit(groupProps.onChange, newValue, oldValue)
     }
   } else {
     const accessor = useFormAccessor<CheckValue>('checked')
@@ -144,11 +143,13 @@ const useCheckbox = (props: CheckboxProps, checkboxGroup: CheckboxGroupContext |
       callEmit(props.onBlur, evt)
       accessor.markAsBlurred()
     }
+
     handleChange = (evt: Event) => {
       const checked = (evt.target as HTMLInputElement).checked
-      const checkValue = checked ? props.trueValue : props.falseValue
-      accessor.setValue(checkValue)
-      callEmit(props.onChange, checkValue)
+      const { trueValue, falseValue } = props
+      const newChecked = checked ? trueValue : falseValue
+      accessor.setValue(newChecked)
+      callEmit(props.onChange, newChecked, !newChecked)
     }
   }
 
diff --git a/packages/components/checkbox/src/CheckboxGroup.tsx b/packages/components/checkbox/src/CheckboxGroup.tsx
index b2ae3c403..356d62106 100644
--- a/packages/components/checkbox/src/CheckboxGroup.tsx
+++ b/packages/components/checkbox/src/CheckboxGroup.tsx
@@ -5,11 +5,9 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, provide } from 'vue'
+import { computed, defineComponent, normalizeClass, provide } from 'vue'
 
-import { isNil } from 'lodash-es'
-
-import { convertCssPixel } from '@idux/cdk/utils'
+import { Logger, convertCssPixel } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useFormAccessor } from '@idux/components/utils'
 
@@ -21,32 +19,35 @@ export default defineComponent({
   name: 'IxCheckboxGroup',
   props: checkboxGroupProps,
   setup(props, { slots }) {
-    const accessor = useFormAccessor()
-
-    provide(checkboxGroupToken, { props, accessor })
-
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-checkbox-group`)
+    const accessor = useFormAccessor()
+    provide(checkboxGroupToken, { props, accessor })
 
     const classes = computed(() => {
       const { gap } = props
       const prefixCls = mergedPrefixCls.value
-      return {
+      return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-with-gap`]: !isNil(gap),
-      }
+        [`${prefixCls}-with-gap`]: gap != null,
+      })
     })
 
     const style = computed(() => {
       const { gap } = props
-      return gap !== 0 ? `gap: ${convertCssPixel(gap)};` : undefined
+      return gap != null ? `gap: ${convertCssPixel(gap)};` : undefined
     })
 
     return () => {
-      const child = props.options ? props.options.map(option => <Checkbox {...option} />) : slots.default?.()
+      const { options, dataSource } = props
+      if (options) {
+        Logger.warn('components/checkbox', '`options` was deprecated, please use `dataSource` instead')
+      }
+      const data = options ?? dataSource
+      const children = data ? data.map(item => <Checkbox {...item} />) : slots.default?.()
       return (
         <div class={classes.value} style={style.value}>
-          {child}
+          {children}
         </div>
       )
     }
diff --git a/packages/components/checkbox/src/types.ts b/packages/components/checkbox/src/types.ts
index 9fcb0f6c8..7862d0784 100644
--- a/packages/components/checkbox/src/types.ts
+++ b/packages/components/checkbox/src/types.ts
@@ -7,19 +7,17 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { IxInnerPropTypes, IxPublicPropTypes } from '@idux/cdk/utils'
+import type { IxInnerPropTypes, IxPublicPropTypes, VKey } from '@idux/cdk/utils'
 import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes } from 'vue'
 
 import { controlPropDef } from '@idux/cdk/forms'
 import { IxPropTypes } from '@idux/cdk/utils'
 import { FormSize } from '@idux/components/form'
 
-export type CheckValue = string | number | boolean
-export type CheckboxOption = Omit<CheckboxPublicProps, 'checked' | 'onUpdate:checked' | 'onChange' | 'indeterminate'>
-
 export const checkboxProps = {
-  checked: IxPropTypes.oneOfType([String, Number, Boolean]),
   control: controlPropDef,
+  checked: IxPropTypes.oneOfType([String, Number, Boolean]),
+
   autofocus: IxPropTypes.bool.def(false),
   buttoned: IxPropTypes.bool,
   disabled: IxPropTypes.bool,
@@ -32,7 +30,7 @@ export const checkboxProps = {
 
   // events
   'onUpdate:checked': IxPropTypes.emit<(checked: CheckValue) => void>(),
-  onChange: IxPropTypes.emit<(checked: CheckValue) => void>(),
+  onChange: IxPropTypes.emit<(newChecked: CheckValue, oldChecked: CheckValue) => void>(),
   onBlur: IxPropTypes.emit<(evt: FocusEvent) => void>(),
   onFocus: IxPropTypes.emit<(evt: FocusEvent) => void>(),
 }
@@ -50,18 +48,20 @@ export type CheckboxComponent = DefineComponent<
 export type CheckboxInstance = InstanceType<DefineComponent<CheckboxProps, CheckboxBindings>>
 
 export const checkboxGroupProps = {
-  value: IxPropTypes.array(),
   control: controlPropDef,
+  value: IxPropTypes.array(),
+
   buttoned: IxPropTypes.bool.def(false),
+  dataSource: IxPropTypes.array<CheckboxData>(),
   disabled: IxPropTypes.bool.def(false),
   gap: IxPropTypes.oneOfType([Number, String]),
   name: IxPropTypes.string,
-  options: IxPropTypes.array<CheckboxOption>(),
+  options: IxPropTypes.array<CheckboxData>(),
   size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
 
   // events
   'onUpdate:value': IxPropTypes.emit<(value: any[]) => void>(),
-  onChange: IxPropTypes.emit<(value: any[]) => void>(),
+  onChange: IxPropTypes.emit<(newValue: any[], oldValue: any[]) => void>(),
 }
 
 export type CheckboxGroupProps = IxInnerPropTypes<typeof checkboxGroupProps>
@@ -70,3 +70,8 @@ export type CheckboxGroupComponent = DefineComponent<
   Omit<HTMLAttributes, keyof CheckboxGroupPublicProps> & CheckboxGroupPublicProps
 >
 export type CheckboxGroupInstance = InstanceType<DefineComponent<CheckboxGroupProps>>
+
+export type CheckValue = string | number | boolean
+export interface CheckboxData extends CheckboxPublicProps {
+  key?: VKey
+}
diff --git a/packages/components/divider/src/Divider.tsx b/packages/components/divider/src/Divider.tsx
index 9acaefdf5..baf842702 100644
--- a/packages/components/divider/src/Divider.tsx
+++ b/packages/components/divider/src/Divider.tsx
@@ -9,7 +9,7 @@ import { computed, defineComponent, normalizeClass } from 'vue'
 
 import { Logger } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
-import { covertLabelVNode } from '@idux/components/utils'
+import { covertStringVNode } from '@idux/components/utils'
 
 import { dividerProps } from './types'
 
@@ -54,7 +54,7 @@ export default defineComponent({
 
     return () => {
       const prefixCls = mergedPrefixCls.value
-      const labelNode = covertLabelVNode(slots.default, props.label)
+      const labelNode = covertStringVNode(slots.default, props.label)
       return <div class={classes.value}>{labelNode && <span class={`${prefixCls}-label`}>{labelNode}</span>}</div>
     }
   },
diff --git a/packages/components/header/src/Header.tsx b/packages/components/header/src/Header.tsx
index eb8da2008..0e7286e19 100644
--- a/packages/components/header/src/Header.tsx
+++ b/packages/components/header/src/Header.tsx
@@ -14,7 +14,7 @@ import { isString } from 'lodash-es'
 import { callEmit } from '@idux/cdk/utils'
 import { IxAvatar } from '@idux/components/avatar'
 import { useGlobalConfig } from '@idux/components/config'
-import { covertIconVNode, covertLabelVNode } from '@idux/components/utils'
+import { covertIconVNode, covertStringVNode } from '@idux/components/utils'
 
 import { headerProps } from './types'
 
@@ -52,9 +52,9 @@ export default defineComponent({
 
       const prefixIconNode = covertIconVNode(slots, props, 'prefix')
       const suffixIconNode = covertIconVNode(slots, props, 'suffix')
-      const titleNode = covertLabelVNode(slots.default, props.title)
-      const subTitleNode = covertLabelVNode(slots, props, 'subTitle')
-      const descriptionNode = covertLabelVNode(slots, props, 'description')
+      const titleNode = covertStringVNode(slots.default, props.title)
+      const subTitleNode = covertStringVNode(slots, props, 'subTitle')
+      const descriptionNode = covertStringVNode(slots, props, 'description')
 
       return (
         <div class={classes.value}>
diff --git a/packages/components/menu/src/contents/MenuItem.tsx b/packages/components/menu/src/contents/MenuItem.tsx
index 85ae97e13..9661eb744 100644
--- a/packages/components/menu/src/contents/MenuItem.tsx
+++ b/packages/components/menu/src/contents/MenuItem.tsx
@@ -65,7 +65,7 @@ export default defineComponent({
       if (__DEV__ && (slots.icon || slots.label)) {
         Logger.warn(
           'components/menu',
-          '`slots` of `MenuItem` is deprecated, please use `customIcon` and `customLabel` instead',
+          '`slots` of `MenuItem` was deprecated, please use `customIcon` and `customLabel` instead',
         )
       }
       const iconRender = customIcon ?? slots.icon ?? 'itemIcon'
diff --git a/packages/components/menu/src/contents/MenuItemGroup.tsx b/packages/components/menu/src/contents/MenuItemGroup.tsx
index 75bb6d216..06e2307e3 100644
--- a/packages/components/menu/src/contents/MenuItemGroup.tsx
+++ b/packages/components/menu/src/contents/MenuItemGroup.tsx
@@ -44,7 +44,7 @@ export default defineComponent({
       if (__DEV__ && (slots.icon || slots.label)) {
         Logger.warn(
           'components/menu',
-          '`slots` of `MenuItemGroup` is deprecated, please use `customIcon` and `customLabel` instead',
+          '`slots` of `MenuItemGroup` was deprecated, please use `customIcon` and `customLabel` instead',
         )
       }
       const iconRender = customIcon ?? slots.icon ?? 'itemGroupIcon'
diff --git a/packages/components/menu/src/contents/menu-sub/Label.tsx b/packages/components/menu/src/contents/menu-sub/Label.tsx
index 09a62a318..002ec0789 100644
--- a/packages/components/menu/src/contents/menu-sub/Label.tsx
+++ b/packages/components/menu/src/contents/menu-sub/Label.tsx
@@ -53,7 +53,7 @@ export default defineComponent({
       if (__DEV__ && (slots.icon || slots.label || slots.suffix)) {
         Logger.warn(
           'components/menu',
-          '`slots` of `MenuSub` is deprecated, please use `customIcon`, `customLabel` and `customSuffix` instead',
+          '`slots` of `MenuSub` was deprecated, please use `customIcon`, `customLabel` and `customSuffix` instead',
         )
       }
       const iconRender = customIcon ?? slots.icon ?? 'subIcon'
diff --git a/packages/components/select/src/trigger/Selector.tsx b/packages/components/select/src/trigger/Selector.tsx
index d831b2983..cf232c04f 100644
--- a/packages/components/select/src/trigger/Selector.tsx
+++ b/packages/components/select/src/trigger/Selector.tsx
@@ -88,13 +88,16 @@ export default defineComponent({
         let labelNode: VNodeChild | undefined
         if (isMax) {
           if (__DEV__ && slots.maxLabel) {
-            Logger.warn('components/select', 'slot `maxLabel` is deprecated, please use slot `overflowedLabel` instead')
+            Logger.warn(
+              'components/select',
+              'slot `maxLabel` was deprecated, please use slot `overflowedLabel` instead',
+            )
           }
           const overflowedLabelSlot = slots.overflowedLabel ?? slots.maxLabel
           labelNode = overflowedLabelSlot?.(item.value) ?? label
         } else {
           if (__DEV__ && slots.label) {
-            Logger.warn('components/select', 'slots `label` is deprecated, please use slots `selectedLabel` instead')
+            Logger.warn('components/select', 'slots `label` was deprecated, please use slots `selectedLabel` instead')
           }
           const selectedLabelSlot = slots.label ?? slots.selectedLabel
           labelNode = selectedLabelSlot ? selectedLabelSlot(rawOption) : renderOptionLabel(slots, rawOption, label)
diff --git a/packages/components/space/src/Space.tsx b/packages/components/space/src/Space.tsx
index 5a5bbabc2..1b4f7b237 100644
--- a/packages/components/space/src/Space.tsx
+++ b/packages/components/space/src/Space.tsx
@@ -11,7 +11,7 @@ import { supportsFlexGap } from '@idux/cdk/platform'
 import { Logger, convertCssPixel, flattenNode } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { type FormSize } from '@idux/components/form'
-import { covertLabelVNode } from '@idux/components/utils'
+import { covertStringVNode } from '@idux/components/utils'
 
 import { spaceProps } from './types'
 
@@ -77,11 +77,11 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const children: VNode[] = []
 
-      let separatorNode = covertLabelVNode(slots, props, 'split')
+      let separatorNode = covertStringVNode(slots, props, 'split')
       if (separatorNode) {
         __DEV__ && Logger.warn('components/space', '`split` was deprecated, please use `separator` instead')
       } else {
-        separatorNode = covertLabelVNode(slots, props, 'separator')
+        separatorNode = covertStringVNode(slots, props, 'separator')
       }
 
       const lastIndex = nodes.length - 1
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 6807cf88b..316a98214 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -136,7 +136,7 @@ function renderChildren(props: TableBodyCellProps, slots: Slots, value: string)
   const { record, rowIndex, column } = props
   const { customRender, customCell } = column
   if (__DEV__ && customRender) {
-    Logger.warn('components/table', '`customRender` is deprecated, please use `customCell` instead')
+    Logger.warn('components/table', '`customRender` was deprecated, please use `customCell` instead')
   }
 
   const cellRender = customRender ?? customCell
diff --git a/packages/components/utils/src/covertVNode.ts b/packages/components/utils/src/covertVNode.ts
index 3d0817f88..8ba76d347 100644
--- a/packages/components/utils/src/covertVNode.ts
+++ b/packages/components/utils/src/covertVNode.ts
@@ -34,9 +34,9 @@ export function covertIconVNode(slots: Slot | Slots | undefined, props: unknown,
   return isString(iconName) ? createVNode(IxIcon, { name: iconName }, null) : iconName
 }
 
-export function covertLabelVNode(slot: Slot | undefined, prop: string | VNode | undefined): VNodeChild
-export function covertLabelVNode(slots: Slots | undefined, props: unknown, key: string): VNodeChild
-export function covertLabelVNode(slots: Slot | Slots | undefined, props: unknown, key?: string): VNodeChild {
+export function covertStringVNode(slot: Slot | undefined, prop: string | VNode | undefined): VNodeChild
+export function covertStringVNode(slots: Slots | undefined, props: unknown, key: string): VNodeChild
+export function covertStringVNode(slots: Slot | Slots | undefined, props: unknown, key?: string): VNodeChild {
   let labelSlot: Slot | undefined
   let label: string | VNode | undefined
   if (key) {