diff --git a/package.json b/package.json
index 6ce5bec62..e868f23cd 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "@vueuse/core": "^8.2.5",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.1.3"
+    "tdesign-icons-vue-next": "^0.1.8"
   },
   "peerDependencies": {
     "vue": "^3.2.6"
@@ -159,7 +159,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
-    "tdesign-icons-view": "^0.1.0",
+    "tdesign-icons-view": "^0.1.6",
     "tdesign-publish-cli": "^0.0.10",
     "tdesign-site-components": "^0.11.19",
     "tslib": "^2.3.1",
diff --git a/src/checkbox/checkbox-group.en-US.md b/src/checkbox/checkbox-group.en-US.md
new file mode 100644
index 000000000..b7e902094
--- /dev/null
+++ b/src/checkbox/checkbox-group.en-US.md
@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+
+### CheckboxGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | - | \- | N
+max | Number | undefined | \- | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
diff --git a/src/checkbox/checkbox-group.md b/src/checkbox/checkbox-group.md
new file mode 100644
index 000000000..c203fa63f
--- /dev/null
+++ b/src/checkbox/checkbox-group.md
@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | N
+options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
diff --git a/src/checkbox/group.vue b/src/checkbox/checkbox-group.vue
similarity index 82%
rename from src/checkbox/group.vue
rename to src/checkbox/checkbox-group.vue
index 5e9132225..e60cef3a5 100644
--- a/src/checkbox/group.vue
+++ b/src/checkbox/checkbox-group.vue
@@ -5,10 +5,21 @@
       <checkbox
         v-for="(item, idx) in optionList"
         :key="idx"
-        :name="item.name"
-        :label="item.label"
+        :name="item.name || ''"
+        :label="item.label || item.text || ''"
         :value="item.value"
         :check-all="item.checkAll"
+        :block="item.block || true"
+        :checked="item.checked || false"
+        :content="item.content || ''"
+        :content-disabled="item.contentDisabled || false"
+        :icon="item.icon || 'circle'"
+        :indeterminate="item.indeterminate || false"
+        :disabled="item.disabled"
+        :max-content-row="item.maxContentRow || 5"
+        :max-label-row="item.maxLabelRow || 3"
+        :readonly="item.readonly || false"
+        :placement="item.placement || 'left'"
       />
     </span>
   </div>
@@ -20,7 +31,7 @@ import config from '../config';
 import CheckboxProps from './checkbox-group-props';
 import Checkbox from './checkbox.vue';
 import { CheckboxGroupValue, TdCheckboxGroupProps, TdCheckboxProps } from './type';
-import { useDefault } from '../shared';
+import { useDefault } from '@/shared';
 import { getOptions, setCheckAllStatus } from './hooks';
 
 const { prefix } = config;
@@ -39,7 +50,7 @@ export default defineComponent({
   emits: ['update:value', 'update:modelValue', 'change'],
   setup(props: any, context) {
     const { isArray } = Array;
-    const [innerValue, setinnerValue] = useDefault<CheckboxGroupValue, TdCheckboxGroupProps>(
+    const [innerValue, setInnerValue] = useDefault<CheckboxGroupValue, TdCheckboxGroupProps>(
       props,
       context.emit,
       'value',
@@ -80,7 +91,7 @@ export default defineComponent({
           const i = val.indexOf(currentValue);
           val.splice(i, 1);
         }
-        setinnerValue(val, {
+        setInnerValue(val, {
           e: data.e,
           current: data.option.value,
           type: data.checked ? 'check' : 'uncheck',
@@ -102,7 +113,7 @@ export default defineComponent({
     };
     const onCheckAllChange = (checked: boolean, context: { e: Event; source?: 't-checkbox' }) => {
       const value = checked ? getAllCheckboxValue() : [];
-      setinnerValue(value, {
+      setInnerValue(value, {
         e: context.e,
         type: checked ? 'check' : 'uncheck',
         current: undefined,
diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md
index fd62f588b..97c9fb3e0 100644
--- a/src/checkbox/checkbox.en-US.md
+++ b/src/checkbox/checkbox.en-US.md
@@ -13,7 +13,7 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 contentDisabled | Boolean | - | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | undefined | \- | N
-icon | Array | - | Typescript：`Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 indeterminate | Boolean | false | \- | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 maxContentRow | Number | 5 | \- | N
diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
index 0126a58c8..2cd8091f2 100644
--- a/src/checkbox/checkbox.md
+++ b/src/checkbox/checkbox.md
@@ -13,7 +13,7 @@ content | String / Slot / Function | - | 多选框内容。TS 类型：`string \
 contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 default | String / Slot / Function | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled | N
-icon | Array | - | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。TS 类型：`Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。。TS 类型：`'circle' \| 'line' \| 'rectangle' \| Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 maxContentRow | Number | 5 | 内容最大行数限制 | N
diff --git a/src/checkbox/checkbox.vue b/src/checkbox/checkbox.vue
index 325c8e291..5fc0e122e 100644
--- a/src/checkbox/checkbox.vue
+++ b/src/checkbox/checkbox.vue
@@ -1,70 +1,81 @@
 <template>
-  <div :class="componentClass">
-    <div :class="`${flagName}__content-wrap`">
-      <span v-if="placement === 'left'" :class="`${flagName}__icon-left`">
-        <input
-          type="checkbox"
-          :name="name"
-          :class="`${flagName}__original-left`"
-          :value="value"
-          :disabled="isDisabled"
-          :readonly="readonly"
-          :checked="isChecked"
-          :indeterminate="indeterminate"
-          @click="handleChange"
-        />
-        <t-node v-if="!indeterminate" :content="checkIcons[isChecked ? 0 : 1]" />
-        <minus-circle-filled-icon v-else />
-      </span>
-      <span
-        v-if="labelContent || checkboxContent"
-        :class="{ [`${flagName}__label`]: true, [`${flagName}__label-left`]: placement === 'right' }"
-        @click="(e) => handleChange(e, 'content')"
+  <div
+    :class="{
+      [`${name}`]: true,
+      [`${name}--${placement}`]: true,
+      [`${name}--checked`]: isChecked,
+      [`${name}--block`]: block,
+    }"
+    @click="handleChange"
+  >
+    <div
+      :class="{
+        [`${name}__icon`]: true,
+        [`${name}__icon--${placement}`]: true,
+        [`${name}__icon--checked`]: isChecked,
+        [`${name}__icon--disabled`]: isDisabled,
+      }"
+    >
+      <div v-if="isIconArray" :class="`${name}__icon`">
+        <t-node :content="checkIcons[isChecked ? 0 : 1]" :class="`${name}__icon-wrapper`" />
+      </div>
+      <template v-else>
+        <t-node v-if="isChecked" :content="checkedIcon" :class="`${name}__icon-wrapper`" />
+        <template v-else>
+          <div
+            v-if="icon === 'circle' || icon === 'rectangle'"
+            :class="{ [`${name}__icon-${icon}`]: true, [`${name}__icon-${icon}--disabled`]: isDisabled }"
+          />
+          <div v-if="icon === 'line'" class="placeholder" />
+        </template>
+      </template>
+    </div>
+    <div :class="`${name}__content`" @click.stop="(e) => handleChange(e, 'text')">
+      <div
+        :class="{
+          [`${name}__title`]: true,
+          [`${name}__title--checked`]: isChecked,
+          [`${name}__title--disabled`]: isDisabled,
+        }"
+        :style="{ '-webkit-line-clamp': maxLabelRow }"
       >
-        <span v-if="labelContent" :style="labelStyle">
-          <t-node :content="labelContent" />
-        </span>
-        <span v-if="checkboxContent" :class="`${flagName}__description`" :style="contentStyle">
-          <t-node :content="checkboxContent" />
-        </span>
-      </span>
-
-      <span v-if="placement === 'right'" :class="`${flagName}__icon-right`">
-        <input
-          type="checkbox"
-          :name="name"
-          :class="`${flagName}__original-right`"
-          :value="value"
-          :disabled="isDisabled"
-          :readonly="readonly"
-          :checked="isChecked"
-          :indeterminate="indeterminate"
-          @click="handleChange"
-        />
-        <t-node v-if="!indeterminate" :content="checkIcons[isChecked ? 0 : 1]" />
-        <minus-circle-filled-icon v-else />
-      </span>
+        <t-node :content="labelContent" />
+      </div>
+      <div
+        :class="{
+          [`${name}__description`]: true,
+          [`${name}__description--disabled`]: isDisabled,
+        }"
+        :style="{ '-webkit-line-clamp': maxContentRow }"
+      >
+        <t-node :content="checkboxContent" />
+      </div>
     </div>
-    <!--下边框 -->
-    <div v-if="!borderless" :class="`${flagName}__border ${flagName}__border--${placement}`"></div>
+    <div v-if="!borderless" :class="`${name}__border ${name}__border--${placement}`" />
   </div>
 </template>
 
 <script lang="ts">
-import { inject, computed, defineComponent, getCurrentInstance, h, toRefs, CSSProperties } from 'vue';
-import { MinusCircleFilledIcon, CheckCircleFilledIcon, CircleIcon } from 'tdesign-icons-vue-next';
-import config from '../config';
+import { defineComponent, h, toRefs, computed, inject, getCurrentInstance } from 'vue';
+import {
+  CheckCircleFilledIcon,
+  CircleIcon,
+  MinusCircleFilledIcon,
+  MinusRectangleFilledIcon,
+  CheckRectangleFilledIcon,
+  CheckIcon,
+} from 'tdesign-icons-vue-next';
+import config from '@/config';
 import CheckboxProps from './props';
-import { renderContent, renderTNode, TNode, useDefault, useVModel } from '../shared';
-import { TdCheckboxProps } from './type';
-import ClASSNAMES from '../shared/constants';
+import { renderContent, renderTNode, TNode, useDefault } from '@/shared';
+import { TdCheckboxProps } from '@/checkbox/type';
 
 const { prefix } = config;
 const name = `${prefix}-checkbox`;
 
 export default defineComponent({
   name,
-  components: { TNode, MinusCircleFilledIcon },
+  components: { TNode },
   props: {
     ...CheckboxProps,
     borderless: {
@@ -74,8 +85,6 @@ export default defineComponent({
   },
   emits: ['update:checked', 'update:modelValue', 'change'],
   setup(props, context) {
-    const flagName = name;
-    const checkIcons = props.icon || [h(CheckCircleFilledIcon), h(CircleIcon)];
     const [innerChecked, setInnerChecked] = useDefault<boolean, TdCheckboxProps>(
       props,
       context.emit,
@@ -85,18 +94,37 @@ export default defineComponent({
 
     const internalInstance = getCurrentInstance();
     const checkboxGroup: any = inject('checkboxGroup', undefined);
+
     const labelContent = computed(() => renderContent(internalInstance, 'label', 'default'));
     const checkboxContent = computed(() => renderTNode(internalInstance, 'content'));
     const indeterminate = computed<boolean>(() => {
       if (props.checkAll && checkboxGroup != null) return checkboxGroup.checkAllStatus.value === 'indeterminate';
       return props.indeterminate;
     });
+
+    const isIconArray = Array.isArray(props.icon);
+    const checkIcons = computed(() => {
+      if (isIconArray && props.icon.length > 1) {
+        return props.icon.map((icon) =>
+          typeof icon === 'string' ? h('img', { class: `${name}__icon-image`, src: icon }) : icon,
+        );
+      }
+      return [h(CheckCircleFilledIcon), h(CircleIcon)];
+    });
+
+    const checkedIcon = computed(() => {
+      if (props.icon === 'circle') return indeterminate.value ? h(MinusCircleFilledIcon) : h(CheckCircleFilledIcon);
+      if (props.icon === 'rectangle')
+        return indeterminate.value ? h(MinusRectangleFilledIcon) : h(CheckRectangleFilledIcon);
+      if (props.icon === 'line') return indeterminate.value ? h(MinusCircleFilledIcon) : h(CheckIcon);
+      return null;
+    });
+
     const isChecked = computed(() => {
       if (props.checkAll) return checkboxGroup?.checkAllStatus.value === 'checked';
       if (checkboxGroup != null && props.value != null) {
         return !!checkboxGroup.checkedSet.value?.has(props.value);
       }
-
       return innerChecked.value;
     });
 
@@ -107,34 +135,9 @@ export default defineComponent({
       return !!checkboxGroup?.disabled.value;
     });
 
-    const componentClass = computed(() => [
-      `${flagName}`,
-      {
-        [ClASSNAMES.STATUS.checked]: isChecked.value,
-        [ClASSNAMES.STATUS.disabled]: isDisabled.value,
-        [ClASSNAMES.STATUS.indeterminate]: indeterminate.value,
-      },
-    ]);
-
-    const getLimitRowStyle = (row: number): CSSProperties => ({
-      display: '-webkit-box',
-      overflow: 'hidden',
-      WebkitBoxOrient: 'vertical',
-      WebkitLineClamp: row,
-    });
-
-    const labelStyle = computed(() => ({
-      color: isDisabled.value ? '#dcdcdc' : 'inherit',
-      ...getLimitRowStyle(props.maxLabelRow),
-    }));
-
-    const contentStyle = computed(() => ({
-      ...getLimitRowStyle(props.maxContentRow),
-    }));
-
     const handleChange = (e: Event, source?: string) => {
       if (isDisabled.value) return;
-      if (source === 'content' && props.contentDisabled) return;
+      if (source === 'text' && props.contentDisabled) return;
 
       const value = !isChecked.value;
       setInnerChecked(value, { e });
@@ -143,18 +146,16 @@ export default defineComponent({
         checkboxGroup.onCheckedChange({ checked: value, checkAll: props.checkAll, e, option: props });
       }
     };
-
     return {
       ...toRefs(props),
-      isChecked,
+      name,
+      checkedIcon,
+      isIconArray,
       checkIcons,
       labelContent,
-      labelStyle,
       checkboxContent,
-      contentStyle,
+      isChecked,
       isDisabled,
-      flagName,
-      componentClass,
       indeterminate,
       handleChange,
     };
diff --git a/src/checkbox/demos/all.vue b/src/checkbox/demos/all.vue
new file mode 100644
index 000000000..58d99ef92
--- /dev/null
+++ b/src/checkbox/demos/all.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <t-checkbox-group v-model="checkBox" :options="options" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const checkBox = ref([1, 2, 3]);
+const options = [
+  { label: '全选', checkAll: true },
+  { label: '多选', value: 1 },
+  { label: '多选', value: 2 },
+  {
+    label: '多选',
+    value: 3,
+    content: '单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息',
+  },
+];
+</script>
diff --git a/src/checkbox/demos/base.vue b/src/checkbox/demos/base.vue
index 1efec42c8..369e998bd 100644
--- a/src/checkbox/demos/base.vue
+++ b/src/checkbox/demos/base.vue
@@ -1,44 +1,35 @@
 <template>
-  <div>
-    <t-checkbox-group v-model:value="checkBox" class="checkbox-group-demo" @change="checkgroupChange">
-      <t-checkbox name="checkbox1" value="1" label="多选"></t-checkbox>
-      <t-checkbox name="checkbox1" value="2" label="多选"></t-checkbox>
-      <t-checkbox name="checkbox1" value="3" label="多选"></t-checkbox>
-      <t-checkbox
-        name="checkbox1"
-        value="4"
-        :max-label-row="2"
-        label="多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多"
-      ></t-checkbox>
-      <t-checkbox
-        name="checkbox1"
-        value="5"
-        label="多选"
-        :max-content-row="2"
-        content="多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多"
-      ></t-checkbox>
-    </t-checkbox-group>
-  </div>
+  <t-checkbox-group v-model:value="current" :options="options" @change="checkboxGroupChange" />
 </template>
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-const checkBox = ref(['2', '3']);
+const current = ref(['checkbox1', 'checkbox2']);
+const options = ref([
+  { label: '多选', value: 'checkbox1' },
+  { label: '多选', value: 'checkbox2' },
+  {
+    label: '多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行',
+    value: 'checkbox3',
+    maxLabelRow: 2,
+  },
+  {
+    label: '多选',
+    value: 'checkbox4',
+    content: '描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息',
+    maxContentRow: 2,
+  },
+]);
 
 watch(
-  () => checkBox.value,
+  () => current.value,
   (val) => {
-    console.log('checkBox:', val);
+    console.log('current:', val);
   },
 );
 
-const checkgroupChange = (value: any, context: { e: Event }) => {
+const checkboxGroupChange = (value: any, context: { e: Event }) => {
   console.log('value:', value);
   console.log('Event:', context);
 };
 </script>
-<style lang="less" scoped>
-.checkbox-group-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/card.vue b/src/checkbox/demos/card.vue
new file mode 100644
index 000000000..6a4e5ae0b
--- /dev/null
+++ b/src/checkbox/demos/card.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-checkbox-group class="theme-card" :default-value="['1', '2']">
+    <t-checkbox value="1" label="多选" />
+    <t-checkbox value="2" label="多选" />
+    <t-checkbox value="3" label="多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题" />
+  </t-checkbox-group>
+</template>
+<style lang="less" scoped>
+.theme-card {
+  border-radius: 12px;
+  margin: 0 16px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/checkbox/demos/disable.vue b/src/checkbox/demos/disable.vue
deleted file mode 100644
index 4a8463641..000000000
--- a/src/checkbox/demos/disable.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="checkbox-demo">
-    <t-checkbox label="多选" disabled />
-    <t-checkbox label="多选" default-checked disabled />
-    <t-checkbox label="多选" align="right" disabled />
-    <t-checkbox label="多选" align="right" checked disabled />
-    <t-checkbox label="半选" indeterminate disabled></t-checkbox>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.checkbox-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/group.vue b/src/checkbox/demos/group.vue
deleted file mode 100644
index 9a3e33356..000000000
--- a/src/checkbox/demos/group.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <t-checkbox-group v-model="checkBox" class="checkbox-group-demo" :options="options"></t-checkbox-group>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const checkBox = ref(['1', '2']);
-const options = [
-  {
-    label: '全选',
-    checkAll: true,
-    indeterminate: true,
-  },
-  {
-    label: '多选1',
-    value: '1',
-  },
-  {
-    label: '多选2',
-    value: '2',
-  },
-  {
-    label: '多选3',
-    value: '3',
-  },
-];
-</script>
-<style lang="less" scoped>
-.checkbox-group-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/horizontal.vue b/src/checkbox/demos/horizontal.vue
new file mode 100644
index 000000000..ecd2bdcec
--- /dev/null
+++ b/src/checkbox/demos/horizontal.vue
@@ -0,0 +1,25 @@
+<template>
+  <t-checkbox-group class="box" borderless :default-value="demoCheckboxMax" @change="checkboxGroupChange">
+    <t-checkbox :block="false" value="checkbox1" label="多选标题" />
+    <t-checkbox :block="false" value="checkbox2" label="多选标题" />
+    <t-checkbox :block="false" value="checkbox3" label="上限四字" />
+  </t-checkbox-group>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const demoCheckboxMax = ref(['checkbox1', 'checkbox2']);
+
+const checkboxGroupChange = (value: any, context: { e: Event }) => {
+  console.log('value:', value);
+  console.log('Event:', context);
+};
+</script>
+<style lang="less" scoped>
+.box {
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+}
+</style>
diff --git a/src/checkbox/demos/icon.vue b/src/checkbox/demos/icon.vue
deleted file mode 100644
index e9ff2dd83..000000000
--- a/src/checkbox/demos/icon.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <t-checkbox-group v-model="checkBox" class="checkbox-group-demo" @change="checkgroupChange">
-      <t-checkbox
-        name="checkbox6"
-        value="1"
-        label="多选"
-        :icon="CheckRectangleFilledIcons"
-        :on-change="checkboxChange"
-      ></t-checkbox>
-      <t-checkbox
-        name="checkbox6"
-        value="2"
-        label="多选"
-        :icon="CheckRectangleFilledIcons"
-        :on-change="checkboxChange"
-      ></t-checkbox>
-      <t-checkbox
-        name="checkbox6"
-        value="3"
-        label="多选"
-        :icon="CheckRectangleFilledIcons"
-        :on-change="checkboxChange"
-      ></t-checkbox>
-    </t-checkbox-group>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, h } from 'vue';
-import { CheckRectangleFilledIcon, RectangleIcon } from 'tdesign-icons-vue-next';
-
-const checkBox = ref(['2', '3']);
-const TCheckRectangleFilledIcon = h(CheckRectangleFilledIcon);
-const TRectangleIcon = h(RectangleIcon);
-const CheckRectangleFilledIcons = [TCheckRectangleFilledIcon, TRectangleIcon];
-
-const checkgroupChange = (value: any, context: { e: Event }) => {
-  console.log('value:', value);
-  console.log('Event:', context);
-};
-const checkboxChange = (check: boolean, context: { e: Event }) => {
-  console.log('check: ', check);
-  console.log('context: ', context);
-};
-</script>
-<style lang="less" scoped>
-.checkbox-group-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/indeterminate.vue b/src/checkbox/demos/indeterminate.vue
deleted file mode 100644
index bdcbcfaa1..000000000
--- a/src/checkbox/demos/indeterminate.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="checkbox-demo">
-    <t-checkbox label="多选" indeterminate></t-checkbox>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.checkbox-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/max.vue b/src/checkbox/demos/max.vue
deleted file mode 100644
index 9b641b80d..000000000
--- a/src/checkbox/demos/max.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <t-checkbox-group :default-value="checkBox" class="checkbox-group-demo" :max="2">
-      <t-checkbox name="checkbox1" value="1" label="多选" />
-      <t-checkbox name="checkbox1" value="2" label="多选" />
-      <t-checkbox name="checkbox1" value="3" label="多选" />
-    </t-checkbox-group>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const checkBox = ref(['1', '2']);
-</script>
-<style lang="less" scoped>
-.checkbox-group-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/mobile.vue b/src/checkbox/demos/mobile.vue
index fd5a50e22..f8085c3af 100644
--- a/src/checkbox/demos/mobile.vue
+++ b/src/checkbox/demos/mobile.vue
@@ -2,37 +2,41 @@
   <div>
     <div class="tdesign-mobile-demo">
       <h1 class="title">Checkbox 多选框</h1>
-      <p class="summary">描述文字</p>
-      <tdesign-demo-block title="01 类型" summary="基础多选框">
+      <p class="summary">用于预设的一组选项中执行多项选择，并呈现选择结果。</p>
+      <tdesign-demo-block title="01 组件类型" summary="纵向多选框">
         <BaseDemo />
       </tdesign-demo-block>
-      <tdesign-demo-block summary="右侧多选框">
-        <RightDemo />
+      <tdesign-demo-block summary="横向多选框">
+        <HorizontalDemo />
       </tdesign-demo-block>
       <tdesign-demo-block summary="带全选多选框">
-        <GroupDemo />
+        <AllDemo />
+      </tdesign-demo-block>
+      <tdesign-demo-block title="02 组件状态" summary="多选框状态">
+        <StatusDemo />
       </tdesign-demo-block>
-      <tdesign-demo-block summary="限制最多可选数量">
-        <MaxDemo />
+      <tdesign-demo-block title="03 组件样式" summary="勾选样式">
+        <TypeDemo />
       </tdesign-demo-block>
-      <tdesign-demo-block title="02 状态" summary="多选框禁用态">
-        <DisableDemo />
+      <tdesign-demo-block summary="勾选显示位置">
+        <RightDemo />
       </tdesign-demo-block>
-      <tdesign-demo-block title="03 特殊类型" summary="自定义图标多选框">
-        <IconDemo />
+      <tdesign-demo-block summary="非通栏多选样式">
+        <CardDemo />
       </tdesign-demo-block>
-      <tdesign-demo-block title="04 规格" summary="多选框尺寸规格">
-        <SizeDemo />
+      <tdesign-demo-block title="04 组件规格" summary="多选框尺寸规格">
+        <SpecialDemo />
       </tdesign-demo-block>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import BaseDemo from './base.vue';
-import GroupDemo from './group.vue';
+import HorizontalDemo from './horizontal.vue';
+import AllDemo from './all.vue';
+import StatusDemo from './status.vue';
+import TypeDemo from './type.vue';
 import RightDemo from './right.vue';
-import DisableDemo from './disable.vue';
-import IconDemo from './icon.vue';
-import MaxDemo from './max.vue';
-import SizeDemo from './size.vue';
+import CardDemo from './card.vue';
+import SpecialDemo from './special.vue';
 </script>
diff --git a/src/checkbox/demos/right.vue b/src/checkbox/demos/right.vue
index f66a6f933..1dad33caa 100644
--- a/src/checkbox/demos/right.vue
+++ b/src/checkbox/demos/right.vue
@@ -1,37 +1,5 @@
 <template>
-  <div>
-    <t-checkbox-group v-model:value="checkBox" class="checkbox-group-demo" @change="checkgroupChange">
-      <t-checkbox name="checkbox2" value="1" label="多选" align="right" :icon="circleFilledIcons"></t-checkbox>
-      <t-checkbox name="checkbox2" value="2" label="多选" align="right" :icon="circleFilledIcons"></t-checkbox>
-      <t-checkbox name="checkbox2" value="3" label="多选" align="right" :icon="circleFilledIcons"></t-checkbox>
-      <t-checkbox
-        name="checkbox2"
-        value="4"
-        :max-label-row="1"
-        label="多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多"
-        align="right"
-        :icon="circleFilledIcons"
-      ></t-checkbox>
-    </t-checkbox-group>
-  </div>
+  <t-checkbox value="1" label="多选" default-checked />
+  <view class="box" style="height: 16px" />
+  <t-checkbox value="2" label="多选" placement="right" default-checked />
 </template>
-<script lang="ts" setup>
-import { ref, h } from 'vue';
-import { CheckCircleFilledIcon, CircleIcon, CheckRectangleFilledIcon, RectangleIcon } from 'tdesign-icons-vue-next';
-
-const checkBox = ref(['2', '3']);
-
-const TIconCircleFilled = h(CheckCircleFilledIcon);
-const TIconCircle = h(CircleIcon);
-const circleFilledIcons = [TIconCircleFilled, TIconCircle];
-
-const checkgroupChange = (value: any, context: { e: Event }) => {
-  console.log('value:', value);
-  console.log('Event:', context);
-};
-</script>
-<style lang="less" scoped>
-.checkbox-group-demo {
-  background: #fff;
-}
-</style>
diff --git a/src/checkbox/demos/size.vue b/src/checkbox/demos/size.vue
deleted file mode 100644
index d2f60013c..000000000
--- a/src/checkbox/demos/size.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <t-checkbox
-      class="checkbox-demo checkbox-demo--size-small space"
-      name="checkbox7"
-      label="多选 H48"
-      value="1"
-      checked
-      >多选 H48</t-checkbox
-    >
-    <t-checkbox class="checkbox-demo" name="checkbox7" label="多选 H56" value="2" checked>多选 H56</t-checkbox>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.checkbox-demo {
-  background: #fff;
-
-  &--size-small {
-    padding: 12px 16px;
-  }
-}
-.space {
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/checkbox/demos/special.vue b/src/checkbox/demos/special.vue
new file mode 100644
index 000000000..e1a2e21f2
--- /dev/null
+++ b/src/checkbox/demos/special.vue
@@ -0,0 +1,79 @@
+<template>
+  <t-checkbox-group v-model:value="value">
+    <div v-for="n in 3" :key="n" :class="`card ${value.indexOf(n) > -1 ? 'card--active' : value.indexOf(n)}`">
+      <t-icon v-if="value.indexOf(n) > -1" name="check" class="card__icon" :aria-hidden="true" />
+      <t-checkbox :value="n" label="多选" content="描述信息描述信息描述信息描述信息描述信息" icon="none" borderless />
+    </div>
+  </t-checkbox-group>
+
+  <div class="demo-desc" style="margin: 24px 16px 16px">横向卡片多选框</div>
+
+  <t-checkbox-group v-model:value="value1" class="horizontal-box">
+    <div v-for="n in 3" :key="n" :class="`card ${value1.indexOf(n) > -1 ? 'card--active' : value1.indexOf(n)}`">
+      <t-icon v-if="value1.indexOf(n) > -1" name="check" class="card__icon" :aria-hidden="true" />
+      <t-checkbox :value="n" label="多选" icon="none" borderless />
+    </div>
+  </t-checkbox-group>
+</template>
+<script setup lang="ts">
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+import { ref } from 'vue';
+
+const value = ref([1, 2]);
+const value1 = ref([1, 2]);
+</script>
+<style lang="less" scoped>
+.card {
+  position: relative;
+  margin: 16px;
+  border-radius: 6px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1.5px solid #fff;
+}
+.card--active {
+  border-color: #0052d9;
+}
+.card--active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  border: 14px solid #0052d9;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+.card__icon {
+  color: #fff;
+  position: absolute;
+  left: 1.5px;
+  top: 1.5px;
+  z-index: 1;
+}
+/* 横向布局 */
+.horizontal-box {
+  width: calc(100% - 32px);
+  display: flex;
+  align-items: center;
+  margin: 16px;
+}
+
+.horizontal-box .card {
+  flex: 1;
+  margin: 0;
+}
+
+.horizontal-box .card + .card {
+  margin-left: 12px;
+}
+
+.horizontal-box .card::after {
+  border-width: 12px;
+}
+
+.horizontal-box .card__icon {
+  font-size: 12px;
+}
+</style>
diff --git a/src/checkbox/demos/status.vue b/src/checkbox/demos/status.vue
new file mode 100644
index 000000000..8ae782588
--- /dev/null
+++ b/src/checkbox/demos/status.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-checkbox-group :default-value="['checkbox1']" disabled>
+    <t-checkbox value="checkbox1" label="选项禁用-已选" />
+    <t-checkbox value="checkbox2" label="选项禁用-默认" />
+  </t-checkbox-group>
+</template>
diff --git a/src/checkbox/demos/type.vue b/src/checkbox/demos/type.vue
new file mode 100644
index 000000000..fb32450dd
--- /dev/null
+++ b/src/checkbox/demos/type.vue
@@ -0,0 +1,11 @@
+<template>
+  <t-checkbox label="多选" icon="line" default-checked />
+  <div style="height: 16px" />
+  <t-checkbox label="多选" icon="rectangle" default-checked />
+  <div style="height: 16px" />
+  <t-checkbox value="checkbox1" label="图片图标" :icon="[activeImage, inActiveImage]" />
+</template>
+<script setup lang="ts">
+const activeImage = 'https://tdesign.gtimg.com/miniprogram/checkbox-checked.png';
+const inActiveImage = 'https://tdesign.gtimg.com/miniprogram/checkbox.png';
+</script>
diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts
index 363c3c6bd..8800e5795 100644
--- a/src/checkbox/index.ts
+++ b/src/checkbox/index.ts
@@ -1,5 +1,5 @@
 import _CheckBox from './checkbox.vue';
-import _CheckBoxGroup from './group.vue';
+import _CheckBoxGroup from './checkbox-group.vue';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts
index f83f33568..8fcd43a6e 100644
--- a/src/checkbox/props.ts
+++ b/src/checkbox/props.ts
@@ -41,9 +41,10 @@ export default {
     type: Boolean,
     default: undefined,
   },
-  /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标] */
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。 */
   icon: {
-    type: Array as PropType<TdCheckboxProps['icon']>,
+    type: [String, Array] as PropType<TdCheckboxProps['icon']>,
+    default: 'circle',
   },
   /** 是否为半选 */
   indeterminate: Boolean,
diff --git a/src/checkbox/style/index.js b/src/checkbox/style/index.js
index c137486ef..341027bae 100644
--- a/src/checkbox/style/index.js
+++ b/src/checkbox/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/checkbox/_index.less';
+import '../../_common/style/mobile/components/checkbox/v2/_index.less';
diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
index f2b2e196a..219d090a2 100644
--- a/src/checkbox/type.ts
+++ b/src/checkbox/type.ts
@@ -49,9 +49,10 @@ export interface TdCheckboxProps {
    */
   disabled?: boolean;
   /**
-   * 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]
+   * 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。
+   * @default 'circle'
    */
-  icon?: Array<TNode>;
+  icon?: 'circle' | 'line' | 'rectangle' | Array<TNode>;
   /**
    * 是否为半选
    * @default false
@@ -137,12 +138,8 @@ export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
 
 export type CheckboxOption = string | number | CheckboxOptionObj;
 
-export interface CheckboxOptionObj {
-  label?: string | TNode;
-  value?: string | number;
-  disabled?: boolean;
-  name?: string;
-  checkAll?: true;
+export interface CheckboxOptionObj extends TdCheckboxProps {
+  text?: string;
 }
 
 export type CheckboxGroupValue = Array<string | number | boolean>;