diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/basic.vue
new file mode 100644
index 0000000000..3d8523a655
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1"> Right </nut-checkbox>
+    <nut-checkbox v-model="val2" text-position="left"> Left </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/disabled.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/disabled.vue
new file mode 100644
index 0000000000..7d0450deb6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/disabled.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" disabled> checked </nut-checkbox>
+    <nut-checkbox v-model="val2" disabled> unchecked </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/event.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/event.vue
new file mode 100644
index 0000000000..029638c15c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/event.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val" @change="change"> Change </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const change = (state) => {
+  console.log(state);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/group-disabled.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/group-disabled.vue
new file mode 100644
index 0000000000..26852c24fe
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/group-disabled.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val" disabled>
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/group.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/group.vue
new file mode 100644
index 0000000000..6c556f2649
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/group.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+  <nut-cell> {{ val }} </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/icon.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/icon.vue
new file mode 100644
index 0000000000..66a541b5ac
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/icon.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val">
+      Icon
+      <template #icon> <Checklist /> </template>
+      <template #checkedIcon> <Checklist color="red" /> </template>
+    </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue-taro';
+const val = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/indeterminate.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/indeterminate.vue
new file mode 100644
index 0000000000..6742a9d107
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/indeterminate.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val" indeterminate> Indeterminate </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
index f22ae25b9e..66b667ee9a 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
@@ -1,209 +1,85 @@
 <template>
   <Demo>
-    <nut-cell-group title="基础用法-左右">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox1" label="复选框" @change="changeBox1">复选框</nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox2" text-position="left" @change="changeBox2">复选框</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="半选状态">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="禁用状态">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox3" disabled>未选时禁用状态</nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox4" disabled>选中时禁用状态</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="自定义尺寸">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="自定义图标">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox7"
-          >自定义图标
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="点击触发change事件">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox8" @change="changeBox3">change复选框</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="checkboxGroup使用">
-      <nut-cell>
-        <nut-checkbox-group v-model="data.checkboxgroup1">
-          <nut-checkbox label="1">组合复选框</nut-checkbox>
-          <nut-checkbox label="2">组合复选框</nut-checkbox>
-          <nut-checkbox label="3">组合复选框</nut-checkbox>
-          <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ data.checkboxgroup1 }}</div>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="checkboxGroup禁用">
-      <nut-cell>
-        <nut-checkbox-group v-model="data.checkboxgroup2" disabled>
-          <nut-checkbox label="1">组合复选框</nut-checkbox>
-          <nut-checkbox label="2">组合复选框</nut-checkbox>
-          <nut-checkbox label="3">组合复选框</nut-checkbox>
-          <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="checkboxGroup 全选/取消">
-      <nut-cell>
-        <nut-checkbox-group ref="group" v-model="data.checkboxgroup3" @change="changeBox4">
-          <nut-checkbox v-for="item in data.checkboxsource" :key="item.label" :label="item.label">{{
-            item.value
-          }}</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-button type="primary" style="margin: 0 10px 0 0" @click="toggleAll(true)">全选</nut-button>
-        <nut-button type="info" style="margin: 0 10px 0 0" @click="toggleAll(false)">取消</nut-button>
-        <nut-button type="warning" @click="toggleReverse()">反选</nut-button>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
-      <nut-cell>
-        <nut-checkbox-group v-model="data.checkboxgroup4" :max="2">
-          <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-          <nut-checkbox label="2">组合复选框</nut-checkbox>
-          <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-          <nut-checkbox label="4">组合复选框</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ data.checkboxgroup4 }}</div>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="全选/半选/取消">
-      <nut-cell>
-        <nut-checkbox v-model="data.checkbox10" :indeterminate="data.indeterminate" @change="changeBox5"
-          >全选</nut-checkbox
-        >
-      </nut-cell>
-      <nut-checkbox-group ref="group2" v-model="data.checkboxgroup5" @change="changeBox6">
-        <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
-        <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
-        <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
-        <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
-      </nut-checkbox-group>
-    </nut-cell-group>
-    <nut-cell-group title="按钮形状">
-      <nut-cell>
-        <nut-checkbox-group v-model="data.checkboxgroup6">
-          <nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
-          <nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-    </nut-cell-group>
-  </Demo>
-</template>
-<script setup lang="ts">
-import { reactive, ref, Ref } from 'vue';
-import { Checklist } from '@nutui/icons-vue-taro';
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-const group = ref(null) as Ref;
-const group2 = ref(null) as Ref;
-const data = reactive({
-  checkbox1: true,
-  checkbox2: false,
-  checkbox3: false,
-  checkbox4: true,
-  checkbox5: false,
-  checkbox6: false,
-  checkbox7: false,
-  checkbox8: false,
-  checkbox9: true,
-  checkbox10: false,
-  checkboxgroup1: ['2', '3'],
-  checkboxgroup2: ['2'],
-  checkboxgroup3: ['2'],
-  checkboxgroup4: ['2'],
-  checkboxgroup5: [],
-  checkboxgroup6: [],
-  checkboxsource: [
-    { label: '1', value: '组合复选框' },
-    { label: '2', value: '组合复选框' },
-    { label: '3', value: '组合复选框' },
-    { label: '4', value: '组合复选框' },
-    { label: '5', value: '组合复选框' },
-    { label: '6', value: '组合复选框' }
-  ],
-  indeterminate: false
-});
-const changeBox1 = (state: boolean, label: string) => {
-  console.log(state, label);
-};
+    <h2>{{ t('indeterminate') }}</h2>
+    <Indeterminate />
 
-const changeBox2 = (state: boolean, label: string) => {
-  console.log(state, label);
-};
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
 
-const changeBox3 = (state: boolean, label: string) => {
-  console.log(`${state ? '选中' : '取消'} ${label}`);
-};
+    <h2>{{ t('size') }}</h2>
+    <Size />
 
-const changeBox4 = (label: any[]) => {
-  console.log(label);
-};
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
 
-const changeBox5 = (value: boolean) => {
-  group2.value.toggleAll(value);
-};
+    <h2>{{ t('event') }}</h2>
+    <Event />
 
-const changeBox6 = (label: string[]) => {
-  if (label.length === 4) {
-    data.indeterminate = false;
-    data.checkbox10 = true;
-  } else if (label.length && label.length < 4) {
-    data.indeterminate = true;
-  } else {
-    data.indeterminate = false;
-    data.checkbox10 = false;
-  }
-};
+    <h2>{{ t('group') }}</h2>
+    <Group />
 
-const toggleAll = (f: boolean) => {
-  console.log(`${f ? '全选' : '取消'}`);
-  group.value.toggleAll(f);
-};
+    <h2>{{ t('groupDisabled') }}</h2>
+    <GroupDisabled />
 
-const toggleReverse = () => {
-  console.log(`反选`);
-  group.value.toggleReverse();
-};
-</script>
-<style lang="scss">
-.demo-check {
-  margin-right: 10px;
-}
-.nut-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-.nut-checkbox {
-  .nut-checkbox__label {
-    margin-left: 10px;
+    <h2>{{ t('methods') }}</h2>
+    <Methods />
+
+    <h2>{{ t('max') }}</h2>
+    <Max />
+
+    <h2>{{ t('methods2') }}</h2>
+    <Methods2 />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Indeterminate from './indeterminate.vue';
+import Disabled from './disabled.vue';
+import Size from './size.vue';
+import IconDemo from './icon.vue';
+import Event from './event.vue';
+import Group from './group.vue';
+import GroupDisabled from './group-disabled.vue';
+import Methods from './methods.vue';
+import Max from './max.vue';
+import Methods2 from './methods2.vue';
+import Shape from './shape.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    indeterminate: '半选状态',
+    disabled: '禁用状态',
+    size: '自定义尺寸',
+    icon: '自定义图标',
+    event: 'Change 事件',
+    group: 'CheckboxGroup',
+    groupDisabled: 'CheckboxGroup 禁用',
+    methods: 'CheckboxGroup 方法',
+    max: 'CheckboxGroup 限制最大可选数',
+    methods2: '全选/半选/取消',
+    shape: '按钮形状'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    indeterminate: 'Indeterminate',
+    disabled: 'Disabled',
+    size: 'Custom Size',
+    icon: 'Custom Icon',
+    event: 'Change Event',
+    group: 'CheckboxGroup',
+    groupDisabled: 'Disabled CheckboxGroup',
+    methods: 'Checkboxgroup Methods',
+    max: 'CheckboxGroup Limit the maximum number of options',
+    methods2: 'Select all / half / cancel',
+    shape: 'Button Shape'
   }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/max.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/max.vue
new file mode 100644
index 0000000000..ede505e89f
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/max.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val" :max="2">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods.vue
new file mode 100644
index 0000000000..67c7e063a7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods.vue
@@ -0,0 +1,44 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group ref="group" v-model="state.checkboxgroup3" @change="changeBox4">
+      <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
+        item.value
+      }}</nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+  <nut-cell>
+    <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(true)"> All </nut-button>
+    <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(false)"> Cancel </nut-button>
+    <nut-button type="warning" @click="toggleReverse"> Reverse </nut-button>
+  </nut-cell>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  checkboxgroup3: ['2'],
+  checkboxsource: [
+    { label: '1', value: 'A' },
+    { label: '2', value: 'B' },
+    { label: '3', value: 'C' },
+    { label: '4', value: 'D' },
+    { label: '5', value: 'E' },
+    { label: '6', value: 'F' },
+    { label: '7', value: 'G' },
+    { label: '8', value: 'H' }
+  ]
+});
+
+const group = ref(null);
+const changeBox4 = (label) => {
+  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+};
+
+const toggleAll = (f) => {
+  group.value.toggleAll(f);
+};
+
+const toggleReverse = () => {
+  console.log(`反选`);
+  group.value.toggleReverse();
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods2.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods2.vue
new file mode 100644
index 0000000000..ff66c99654
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/methods2.vue
@@ -0,0 +1,36 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" :indeterminate="indeterminate" @change="change1"> State </nut-checkbox>
+  </nut-cell>
+  <nut-cell>
+    <nut-checkbox-group ref="group" v-model="val2" @change="change2">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const group = ref(null);
+const val1 = ref(false);
+const val2 = ref([]);
+const indeterminate = ref(false);
+
+const change1 = (value) => {
+  group.value.toggleAll(value);
+};
+
+const change2 = (label) => {
+  if (label.length === 4) {
+    indeterminate.value = false;
+    val1.value = true;
+  } else if (label.length && label.length < 4) {
+    indeterminate.value = true;
+  } else {
+    indeterminate.value = false;
+    val1.value = false;
+  }
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/shape.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/shape.vue
new file mode 100644
index 0000000000..1332214cc6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/shape.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" shape="button"> Button </nut-checkbox>
+    <nut-checkbox v-model="val2" shape="button"> Button </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/size.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/size.vue
new file mode 100644
index 0000000000..c1595fe7b8
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/checkbox/size.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" icon-size="25"> size 25 </nut-checkbox>
+    <nut-checkbox v-model="val2" icon-size="10"> size 10 </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(false);
+const val2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue
deleted file mode 100644
index 6ae4138a2c..0000000000
--- a/src/packages/__VUE/checkbox/demo.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-  <div class="demo">
-    <nut-cell-group :title="translate('basic')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox1" :label="translate('checkbox')" @change="changeBox1">
-          {{ translate('checkbox') }}
-        </nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox2" text-position="left" @change="changeBox2">
-          {{ translate('checkbox') }}
-        </nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('semi')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox9" :indeterminate="true" :label="translate('checkbox')">
-          {{ translate('checkbox') }}
-        </nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('disable')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox3" disabled>{{ translate('unselectDisable') }}</nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox4" disabled>{{ translate('selectedDisable') }}</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('size')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox5" icon-size="25">{{ translate('size') }}25</nut-checkbox>
-      </nut-cell>
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox6" icon-size="10">{{ translate('size') }} 10</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('icon')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox7">
-          {{ translate('icon') }}
-          <template #icon>
-            <Checklist />
-          </template>
-          <template #checkedIcon>
-            <Checklist color="red" />
-          </template>
-        </nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('change')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox8" @change="changeBox3">change {{ translate('checkbox') }}</nut-checkbox>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('useGroup')">
-      <nut-cell>
-        <nut-checkbox-group v-model="state.checkboxgroup1">
-          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <div class="demo-check">{{ translate('selected') }}</div>
-        <div>{{ state.checkboxgroup1 }}</div>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('disableGroup')">
-      <nut-cell>
-        <nut-checkbox-group v-model="state.checkboxgroup2" disabled>
-          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('selectGroup')">
-      <nut-cell>
-        <nut-checkbox-group ref="group" v-model="state.checkboxgroup3" @change="changeBox4">
-          <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">
-            {{ item.value }}
-          </nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(true)">
-          {{ translate('selectAll') }}
-        </nut-button>
-        <nut-button type="info" style="margin: 0 20px 0 0" @click="toggleAll(false)">
-          {{ translate('cancel') }}
-        </nut-button>
-        <nut-button type="warning" @click="toggleReverse()">{{ translate('selectReverse') }}</nut-button>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('useGroupLimit')">
-      <nut-cell>
-        <nut-checkbox-group v-model="state.checkboxgroup4" :max="2">
-          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="3" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-          <nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-      <nut-cell>
-        <div class="demo-check">{{ translate('selected') }}</div>
-        <div>{{ state.checkboxgroup4 }}</div>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('useGroupInte')">
-      <nut-cell>
-        <nut-checkbox v-model="state.checkbox10" :indeterminate="state.indeterminate" @change="changeBox5">{{
-          translate('selectAll')
-        }}</nut-checkbox>
-      </nut-cell>
-      <nut-checkbox-group ref="group2" v-model="state.checkboxgroup5" @change="changeBox6">
-        <nut-cell>
-          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
-        </nut-cell>
-        <nut-cell
-          ><nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
-        </nut-cell>
-        <nut-cell
-          ><nut-checkbox label="3">{{ translate('combine') }}</nut-checkbox>
-        </nut-cell>
-        <nut-cell
-          ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
-        </nut-cell>
-      </nut-checkbox-group>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('useShape')">
-      <nut-cell>
-        <nut-checkbox-group v-model="state.checkboxgroup6">
-          <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
-          <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
-        </nut-checkbox-group>
-      </nut-cell>
-    </nut-cell-group>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref, Ref } from 'vue';
-import { showToast } from '@/packages/nutui.vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Checklist } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法-左右',
-    semi: '半选状态',
-    disable: '禁用状态',
-    size: '自定义尺寸',
-    icon: '自定义图标',
-    change: '点击触发change事件',
-    useGroup: 'checkboxGroup使用',
-    useGroupLimit: 'checkboxGroup使用，限制最大可选数（2个）',
-    disableGroup: 'checkboxGroup禁用',
-    selectGroup: 'checkboxGroup 全选/取消',
-    selectAll: '全选',
-    cancel: '取消',
-    selectReverse: '反选',
-    combine: '组合复选框',
-    selected: '当前选中值',
-    select: '选中',
-    checkbox: '复选框',
-    selectedDisable: '选中时禁用状态',
-    unselectDisable: '未选时禁用状态',
-    useGroupInte: '全选/半选/取消',
-    useShape: '按钮形状'
-  },
-  'en-US': {
-    basic: 'Basic usage - left and right',
-    semi: 'Semi selective',
-    disable: 'Disabled state',
-    size: 'Custom size',
-    icon: 'Custom icon',
-    change: 'Click to trigger the change event',
-    useGroup: 'use checkboxGroup',
-    useGroupLimit: 'use checkboxGroup, Limit the maximum number of options (2)',
-    disableGroup: 'disable checkboxGroup',
-    selectGroup: 'Checkboxgroup select all / cancel',
-    selectAll: 'selectAll',
-    cancel: 'cancel',
-    selectReverse: 'reverse',
-    combine: 'Combined check box',
-    selected: 'Currently selected value',
-    select: 'selected value',
-    checkbox: 'check box',
-    selectedDisable: 'Disabled when selected',
-    unselectDisable: 'Disabled when not selected',
-    useGroupInte: 'Select all / half / cancel',
-    useShape: 'Button shape'
-  }
-});
-const group = ref(null) as Ref;
-const group2 = ref(null) as Ref;
-const state = reactive({
-  checkbox1: true,
-  checkbox2: false,
-  checkbox3: false,
-  checkbox4: true,
-  checkbox5: false,
-  checkbox6: false,
-  checkbox7: false,
-  checkbox8: false,
-  checkbox9: true,
-  checkbox10: false,
-  checkboxgroup1: ['2', '3'],
-  checkboxgroup2: ['2'],
-  checkboxgroup3: ['2'],
-  checkboxgroup4: ['2'],
-  checkboxgroup5: [],
-  checkboxgroup6: [],
-  checkboxsource: [
-    { label: '1', value: translate('combine') },
-    { label: '2', value: translate('combine') },
-    { label: '3', value: translate('combine') },
-    { label: '4', value: translate('combine') },
-    { label: '5', value: translate('combine') },
-    { label: '6', value: translate('combine') }
-  ],
-  indeterminate: false
-});
-const changeBox1 = (state: boolean, label: string) => {
-  console.log(state, label);
-};
-
-const changeBox2 = (state: boolean, label: string) => {
-  console.log(state, label);
-};
-
-const changeBox3 = (state: boolean, label: string) => {
-  showToast.text(`${state ? translate('select') : translate('cancel')} ${label}`);
-};
-
-const changeBox4 = (label: any[]) => {
-  console.log(label);
-};
-
-const changeBox5 = (value: boolean) => {
-  group2.value.toggleAll(value);
-};
-
-const changeBox6 = (label: string[]) => {
-  if (label.length === 4) {
-    state.indeterminate = false;
-    state.checkbox10 = true;
-  } else if (label.length && label.length < 4) {
-    state.indeterminate = true;
-  } else {
-    state.indeterminate = false;
-    state.checkbox10 = false;
-  }
-};
-
-const toggleAll = (f: boolean) => {
-  showToast.text(`${f ? translate('selectAll') : translate('cancel')}`);
-  group.value.toggleAll(f);
-};
-
-const toggleReverse = () => {
-  showToast.text(`反选`);
-  group.value.toggleReverse();
-};
-</script>
-<style lang="scss" scoped>
-.demo-check {
-  margin-right: 10px;
-}
-
-.nut-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.nut-checkbox {
-  .nut-checkbox__label {
-    margin-left: 10px;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/checkbox/demo/basic.vue b/src/packages/__VUE/checkbox/demo/basic.vue
new file mode 100644
index 0000000000..3d8523a655
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1"> Right </nut-checkbox>
+    <nut-checkbox v-model="val2" text-position="left"> Left </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/disabled.vue b/src/packages/__VUE/checkbox/demo/disabled.vue
new file mode 100644
index 0000000000..7d0450deb6
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/disabled.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" disabled> checked </nut-checkbox>
+    <nut-checkbox v-model="val2" disabled> unchecked </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/event.vue b/src/packages/__VUE/checkbox/demo/event.vue
new file mode 100644
index 0000000000..029638c15c
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/event.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val" @change="change"> Change </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const change = (state) => {
+  console.log(state);
+};
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/group-disabled.vue b/src/packages/__VUE/checkbox/demo/group-disabled.vue
new file mode 100644
index 0000000000..26852c24fe
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/group-disabled.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val" disabled>
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/group.vue b/src/packages/__VUE/checkbox/demo/group.vue
new file mode 100644
index 0000000000..6c556f2649
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/group.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+  <nut-cell> {{ val }} </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/icon.vue b/src/packages/__VUE/checkbox/demo/icon.vue
new file mode 100644
index 0000000000..29e4ac604e
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/icon.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val">
+      Icon
+      <template #icon> <Checklist /> </template>
+      <template #checkedIcon> <Checklist color="red" /> </template>
+    </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue';
+const val = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/indeterminate.vue b/src/packages/__VUE/checkbox/demo/indeterminate.vue
new file mode 100644
index 0000000000..6742a9d107
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/indeterminate.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val" indeterminate> Indeterminate </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/index.vue b/src/packages/__VUE/checkbox/demo/index.vue
new file mode 100644
index 0000000000..8accf72d8c
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('indeterminate') }}</h2>
+    <Indeterminate />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+
+    <h2>{{ t('group') }}</h2>
+    <Group />
+
+    <h2>{{ t('groupDisabled') }}</h2>
+    <GroupDisabled />
+
+    <h2>{{ t('methods') }}</h2>
+    <Methods />
+
+    <h2>{{ t('max') }}</h2>
+    <Max />
+
+    <h2>{{ t('methods2') }}</h2>
+    <Methods2 />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Indeterminate from './indeterminate.vue';
+import Disabled from './disabled.vue';
+import Size from './size.vue';
+import IconDemo from './icon.vue';
+import Event from './event.vue';
+import Group from './group.vue';
+import GroupDisabled from './group-disabled.vue';
+import Methods from './methods.vue';
+import Max from './max.vue';
+import Methods2 from './methods2.vue';
+import Shape from './shape.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    indeterminate: '半选状态',
+    disabled: '禁用状态',
+    size: '自定义尺寸',
+    icon: '自定义图标',
+    event: 'Change 事件',
+    group: 'CheckboxGroup',
+    groupDisabled: 'CheckboxGroup 禁用',
+    methods: 'CheckboxGroup 方法',
+    max: 'CheckboxGroup 限制最大可选数',
+    methods2: '全选/半选/取消',
+    shape: '按钮形状'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    indeterminate: 'Indeterminate',
+    disabled: 'Disabled',
+    size: 'Custom Size',
+    icon: 'Custom Icon',
+    event: 'Change Event',
+    group: 'CheckboxGroup',
+    groupDisabled: 'Disabled CheckboxGroup',
+    methods: 'Checkboxgroup Methods',
+    max: 'CheckboxGroup Limit the maximum number of options',
+    methods2: 'Select all / half / cancel',
+    shape: 'Button Shape'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/max.vue b/src/packages/__VUE/checkbox/demo/max.vue
new file mode 100644
index 0000000000..ede505e89f
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/max.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group v-model="val" :max="2">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(['2', '3']);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/methods.vue b/src/packages/__VUE/checkbox/demo/methods.vue
new file mode 100644
index 0000000000..67c7e063a7
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/methods.vue
@@ -0,0 +1,44 @@
+<template>
+  <nut-cell>
+    <nut-checkbox-group ref="group" v-model="state.checkboxgroup3" @change="changeBox4">
+      <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
+        item.value
+      }}</nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+  <nut-cell>
+    <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(true)"> All </nut-button>
+    <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(false)"> Cancel </nut-button>
+    <nut-button type="warning" @click="toggleReverse"> Reverse </nut-button>
+  </nut-cell>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+const state = reactive({
+  checkboxgroup3: ['2'],
+  checkboxsource: [
+    { label: '1', value: 'A' },
+    { label: '2', value: 'B' },
+    { label: '3', value: 'C' },
+    { label: '4', value: 'D' },
+    { label: '5', value: 'E' },
+    { label: '6', value: 'F' },
+    { label: '7', value: 'G' },
+    { label: '8', value: 'H' }
+  ]
+});
+
+const group = ref(null);
+const changeBox4 = (label) => {
+  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
+};
+
+const toggleAll = (f) => {
+  group.value.toggleAll(f);
+};
+
+const toggleReverse = () => {
+  console.log(`反选`);
+  group.value.toggleReverse();
+};
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/methods2.vue b/src/packages/__VUE/checkbox/demo/methods2.vue
new file mode 100644
index 0000000000..ff66c99654
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/methods2.vue
@@ -0,0 +1,36 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" :indeterminate="indeterminate" @change="change1"> State </nut-checkbox>
+  </nut-cell>
+  <nut-cell>
+    <nut-checkbox-group ref="group" v-model="val2" @change="change2">
+      <nut-checkbox label="1"> A </nut-checkbox>
+      <nut-checkbox label="2"> B </nut-checkbox>
+      <nut-checkbox label="3"> C </nut-checkbox>
+      <nut-checkbox label="4"> D </nut-checkbox>
+    </nut-checkbox-group>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const group = ref(null);
+const val1 = ref(false);
+const val2 = ref([]);
+const indeterminate = ref(false);
+
+const change1 = (value) => {
+  group.value.toggleAll(value);
+};
+
+const change2 = (label) => {
+  if (label.length === 4) {
+    indeterminate.value = false;
+    val1.value = true;
+  } else if (label.length && label.length < 4) {
+    indeterminate.value = true;
+  } else {
+    indeterminate.value = false;
+    val1.value = false;
+  }
+};
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/shape.vue b/src/packages/__VUE/checkbox/demo/shape.vue
new file mode 100644
index 0000000000..1332214cc6
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/shape.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" shape="button"> Button </nut-checkbox>
+    <nut-checkbox v-model="val2" shape="button"> Button </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(true);
+const val2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/demo/size.vue b/src/packages/__VUE/checkbox/demo/size.vue
new file mode 100644
index 0000000000..c1595fe7b8
--- /dev/null
+++ b/src/packages/__VUE/checkbox/demo/size.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell>
+    <nut-checkbox v-model="val1" icon-size="25"> size 25 </nut-checkbox>
+    <nut-checkbox v-model="val2" icon-size="10"> size 10 </nut-checkbox>
+  </nut-cell>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(false);
+const val2 = ref(false);
+</script>
diff --git a/src/packages/__VUE/checkbox/doc.en-US.md b/src/packages/__VUE/checkbox/doc.en-US.md
index 3041eeca52..2fa6872be0 100644
--- a/src/packages/__VUE/checkbox/doc.en-US.md
+++ b/src/packages/__VUE/checkbox/doc.en-US.md
@@ -17,300 +17,55 @@ app.use(CheckboxGroup);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox1" label="check box">check box</nut-checkbox>
-  <nut-checkbox v-model="checkbox2" text-position="left">check box</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox1 = ref(false);
-const checkbox2 = ref(false);
-</script>
-<style>
-.nut-checkbox {
-  display: flex;
-  margin-right: 20px;
-}
-.nut-checkbox__label {
-  margin-left: 10px;
-}
-</style>
-```
-
-:::
-
-### Semi selective
+> demo: checkbox basic
 
-:::demo
+### Indeterminate
 
-```vue
-<template>
-  <nut-cell>
-    <nut-checkbox v-model="value" :indeterminate="true" label="check box">check box</nut-checkbox>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox indeterminate
 
-### Disabled state
+### Disabled
 
-:::demo
+> demo: checkbox disabled
 
-```vue
-<template>
-  <nut-checkbox v-model="checkbox3" disabled>Disabled when not selected</nut-checkbox>
-  <nut-checkbox v-model="checkbox4" disabled>Disabled when selected</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox3 = ref(false);
-const checkbox4 = ref(false);
-</script>
-```
+### Custom Size
 
-:::
+> demo: checkbox size
 
-### Custom size
+### Custom Icon
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox5" icon-size="25">Custom size 25</nut-checkbox>
-  <nut-checkbox v-model="checkbox6" icon-size="10">Custom size 10</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox5 = ref(false);
-const checkbox6 = ref(false);
-</script>
-```
-
-:::
+Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
 
-### Custom icon
+> demo: checkbox icon
 
-Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
+### Change Event
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox7">
-    Custom icon
-    <template #icon> <Checklist /> </template>
-    <template #checkedIcon> <Checklist color="red" /> </template>
-  </nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox7 = ref(false);
-</script>
-```
+When the value changes, the `change` event will be triggered
 
-:::
+> demo: checkbox event
 
-### change Event
+### CheckboxGroup
 
-When the value changes, the `change` event will be triggered
+> demo: checkbox group
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox" @change="changeBox3">change check box</nut-checkbox>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const checkbox = ref(false);
-const changeBox = (state, label) => {
-  console.log(`${state ? 'select' : 'cancel'} ${label}`);
-};
-</script>
-```
+### Disabled CheckboxGroup
 
-:::
-
-### use checkboxGroup
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1">
-    <nut-checkbox label="1">Combined check box</nut-checkbox>
-    <nut-checkbox label="2">Combined check box</nut-checkbox>
-    <nut-checkbox label="3">Combined check box</nut-checkbox>
-    <nut-checkbox label="4">Combined check box</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">Currently selected value</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+> demo: checkbox group-disabled
 
-:::
-
-### checkboxGroup disabled
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1" disabled>
-    <nut-checkbox label="1">Combined check box</nut-checkbox>
-    <nut-checkbox label="2">Combined check box</nut-checkbox>
-    <nut-checkbox label="3">Combined check box</nut-checkbox>
-    <nut-checkbox label="4">Combined check box</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">Currently selected value</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+### CheckboxGroup Methods
 
-:::
-
-### Checkboxgroup select all / cancel
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{ item.value }}</nut-checkbox>
-  </nut-checkbox-group>
-  <span class="btn">
-    <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">Select all</nut-button>
-    <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">cancel</nut-button>
-    <nut-button type="warning" @click="toggleReverse()">reverse selection</nut-button>
-  </span>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  checkboxgroup3: ['2'],
-  checkboxsource: [
-    { label: '1', value: 'Combined check box' },
-    { label: '2', value: 'Combined check box' },
-    { label: '3', value: 'Combined check box' },
-    { label: '4', value: 'Combined check box' },
-    { label: '5', value: 'Combined check box' },
-    { label: '6', value: 'Combined check box' }
-  ]
-});
-
-const group = ref(null);
-const changeBox4 = (label) => {
-  console.log(`${label.length === state.checkboxsource.length ? 'Select all' : 'Cancel select all'}`);
-};
-
-const toggleAll = (f) => {
-  group.value.toggleAll(f);
-};
-
-const toggleReverse = () => {
-  console.log(`reverse selection`);
-  group.value.toggleReverse();
-};
-</script>
-```
+> demo: checkbox methods
 
-:::
-
-### use checkboxGroup, Limit the maximum number of options (2)
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="use checkboxGroup, Limit the maximum number of options (2)">
-    <nut-cell>
-      <nut-checkbox-group v-model="checkboxgroup4" :max="2">
-        <nut-checkbox label="1" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox>
-        <nut-checkbox label="2">Combined check box</nut-checkbox>
-        <nut-checkbox label="3" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox>
-        <nut-checkbox label="4">Combined check box</nut-checkbox>
-      </nut-checkbox-group>
-    </nut-cell>
-    <nut-cell>
-      <div class="demo-check">selected</div>
-      <div>{{ checkboxgroup4 }}</div>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2']);
-</script>
-```
+### CheckboxGroup Limit the maximum number of options
 
-:::
+> demo: checkbox max
 
 ### Select all / half / cancel
 
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Select all / half / cancel">
-    <nut-cell>
-      <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">selectAll</nut-checkbox>
-    </nut-cell>
-    <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
-      <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">Combined check box</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="2">Combined check box</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="3">Combined check box</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="4">Combined check box</nut-checkbox></nut-cell>
-    </nut-checkbox-group>
-  </nut-cell-group>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const group2 = ref(null);
-const state = reactive({
-  indeterminate: false,
-  checkbox10: false,
-  checkboxgroup5: []
-});
-
-const changeBox5 = (value) => {
-  group2.value.toggleAll(value);
-};
-
-const changeBox6 = (label) => {
-  if (label.length === 4) {
-    state.indeterminate = false;
-    state.checkbox10 = true;
-  } else if (label.length && label.length < 4) {
-    state.indeterminate = true;
-  } else {
-    data.indeterminate = false;
-    state.checkbox10 = false;
-  }
-};
-</script>
-```
+> demo: checkbox methods
+
+### Button Shape
 
-:::
+> demo: checkbox shape
 
 ## API
 
diff --git a/src/packages/__VUE/checkbox/doc.md b/src/packages/__VUE/checkbox/doc.md
index 6a78832394..9a731402cb 100644
--- a/src/packages/__VUE/checkbox/doc.md
+++ b/src/packages/__VUE/checkbox/doc.md
@@ -17,304 +17,55 @@ app.use(CheckboxGroup);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>
-  <nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox1 = ref(false);
-const checkbox2 = ref(false);
-</script>
-<style>
-.nut-checkbox {
-  display: flex;
-  margin-right: 20px;
-}
-.nut-checkbox__label {
-  margin-left: 10px;
-}
-</style>
-```
-
-:::
+> demo: checkbox basic
 
 ### 半选状态
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-checkbox v-model="value" :indeterminate="true" label="复选框">复选框</nut-checkbox>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox indeterminate
 
 ### 禁用状态
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
-  <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox3 = ref(false);
-const checkbox4 = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox disabled
 
 ### 自定义尺寸
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
-  <nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox5 = ref(false);
-const checkbox6 = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox size
 
 ### 自定义图标
 
-通过 slot 自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox7">
-    自定义图标
-    <template #icon> <Checklist /> </template>
-    <template #checkedIcon> <Checklist color="red" /> </template>
-  </nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox7 = ref(false);
-</script>
-```
+通过 slot 自定义图标，建议同时设置 `icon` 和 `checkedIcon` 两个插槽
 
-:::
+> demo: checkbox icon
 
-### change 事件
+### Change 事件
 
 值发生变化时，将触发 `change` 事件
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox" @change="changeBox">change复选框</nut-checkbox>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const checkbox = ref(false);
-const changeBox = (state, label) => {
-  console.log(`${state ? '选中' : '取消'} ${label}`);
-};
-</script>
-```
+> demo: checkbox event
 
-:::
-
-### checkboxGroup 使用
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1">
-    <nut-checkbox label="1">组合复选框</nut-checkbox>
-    <nut-checkbox label="2">组合复选框</nut-checkbox>
-    <nut-checkbox label="3">组合复选框</nut-checkbox>
-    <nut-checkbox label="4">组合复选框</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">当前选中值</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+### CheckboxGroup
 
-:::
-
-### checkboxGroup 禁用
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1" disabled>
-    <nut-checkbox label="1">组合复选框</nut-checkbox>
-    <nut-checkbox label="2">组合复选框</nut-checkbox>
-    <nut-checkbox label="3">组合复选框</nut-checkbox>
-    <nut-checkbox label="4">组合复选框</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">当前选中值</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+> demo: checkbox group
 
-:::
-
-### checkboxGroup 全选/取消
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="state.checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
-      item.value
-    }}</nut-checkbox>
-  </nut-checkbox-group>
-  <span class="btn">
-    <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">全选</nut-button>
-    <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">取消</nut-button>
-    <nut-button type="warning" @click="toggleReverse">反选</nut-button>
-  </span>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  checkboxgroup3: ['2'],
-  checkboxsource: [
-    { label: '1', value: '组合复选框' },
-    { label: '2', value: '组合复选框' },
-    { label: '3', value: '组合复选框' },
-    { label: '4', value: '组合复选框' },
-    { label: '5', value: '组合复选框' },
-    { label: '6', value: '组合复选框' }
-  ]
-});
-
-const group = ref(null);
-const changeBox4 = (label) => {
-  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
-};
-
-const toggleAll = (f) => {
-  group.value.toggleAll(f);
-};
-
-const toggleReverse = () => {
-  console.log(`反选`);
-  group.value.toggleReverse();
-};
-</script>
-```
+### CheckboxGroup 禁用
 
-:::
-
-### checkboxGroup 使用，限制最大可选数（2 个）
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
-    <nut-cell>
-      <nut-checkbox-group v-model="checkboxgroup4" :max="2">
-        <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-        <nut-checkbox label="2">组合复选框</nut-checkbox>
-        <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-        <nut-checkbox label="4">组合复选框</nut-checkbox>
-      </nut-checkbox-group>
-    </nut-cell>
-    <nut-cell>
-      <div class="demo-check">选中</div>
-      <div>{{ checkboxgroup4 }}</div>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2']);
-</script>
-```
+> demo: checkbox group-disabled
+
+### CheckboxGroup 方法
 
-:::
+> demo: checkbox methods
+
+### CheckboxGroup 限制最大可选数
+
+> demo: checkbox max
 
 ### 全选/半选/取消
 
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="全选/半选/取消">
-    <nut-cell>
-      <nut-checkbox :indeterminate="state.indeterminate" v-model="state.checkbox10" @change="changeBox5"
-        >全选</nut-checkbox
-      >
-    </nut-cell>
-    <nut-checkbox-group v-model="state.checkboxgroup5" ref="group2" @change="changeBox6">
-      <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
-    </nut-checkbox-group>
-  </nut-cell-group>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const group2 = ref(null);
-const state = reactive({
-  indeterminate: false,
-  checkbox10: false,
-  checkboxgroup5: []
-});
-
-const changeBox5 = (value) => {
-  group2.value.toggleAll(value);
-};
-
-const changeBox6 = (label) => {
-  if (label.length === 4) {
-    state.indeterminate = false;
-    state.checkbox10 = true;
-  } else if (label.length && label.length < 4) {
-    state.indeterminate = true;
-  } else {
-    data.indeterminate = false;
-    state.checkbox10 = false;
-  }
-};
-</script>
-```
+> demo: checkbox methods2
+
+### 按钮形状
 
-:::
+> demo: checkbox shape
 
 ## API
 
diff --git a/src/packages/__VUE/checkbox/doc.taro.md b/src/packages/__VUE/checkbox/doc.taro.md
index 9be9b92b04..8e50d90d00 100644
--- a/src/packages/__VUE/checkbox/doc.taro.md
+++ b/src/packages/__VUE/checkbox/doc.taro.md
@@ -17,304 +17,55 @@ app.use(CheckboxGroup);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>
-  <nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox1 = ref(false);
-const checkbox2 = ref(false);
-</script>
-<style>
-.nut-checkbox {
-  display: flex;
-  margin-right: 20px;
-}
-.nut-checkbox__label {
-  margin-left: 10px;
-}
-</style>
-```
-
-:::
+> demo: checkbox basic dentry
 
 ### 半选状态
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-checkbox v-model="value" :indeterminate="true" label="复选框">复选框</nut-checkbox>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox indeterminate dentry
 
 ### 禁用状态
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
-  <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox3 = ref(false);
-const checkbox4 = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox disabled dentry
 
 ### 自定义尺寸
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
-  <nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox5 = ref(false);
-const checkbox6 = ref(false);
-</script>
-```
-
-:::
+> demo: checkbox size dentry
 
 ### 自定义图标
 
-通过 slot 自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox7">
-    自定义图标
-    <template #icon> <Checklist /> </template>
-    <template #checkedIcon> <Checklist color="red" /> </template>
-  </nut-checkbox>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkbox7 = ref(false);
-</script>
-```
+通过 slot 自定义图标，建议同时设置 `icon` 和 `checkedIcon` 两个插槽
 
-:::
+> demo: checkbox icon dentry
 
-### change 事件
+### Change 事件
 
 值发生变化时，将触发 `change` 事件
 
-:::demo
-
-```vue
-<template>
-  <nut-checkbox v-model="checkbox" @change="changeBox">change复选框</nut-checkbox>
-</template>
-<script setup>
-import { reactive, toRefs } from 'vue';
-const checkbox = ref(false);
-const changeBox = (state, label) => {
-  console.log(`${state ? '选中' : '取消'} ${label}`);
-};
-</script>
-```
+> demo: checkbox event dentry
 
-:::
-
-### checkboxGroup 使用
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1">
-    <nut-checkbox label="1">组合复选框</nut-checkbox>
-    <nut-checkbox label="2">组合复选框</nut-checkbox>
-    <nut-checkbox label="3">组合复选框</nut-checkbox>
-    <nut-checkbox label="4">组合复选框</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">当前选中值</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+### CheckboxGroup
 
-:::
-
-### checkboxGroup 禁用
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="checkboxgroup1" disabled>
-    <nut-checkbox label="1">组合复选框</nut-checkbox>
-    <nut-checkbox label="2">组合复选框</nut-checkbox>
-    <nut-checkbox label="3">组合复选框</nut-checkbox>
-    <nut-checkbox label="4">组合复选框</nut-checkbox>
-  </nut-checkbox-group>
-  <nut-cell>
-    <div class="demo-check">当前选中值</div>
-    <div>{{ checkboxgroup1 }}</div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2', '3']);
-</script>
-```
+> demo: checkbox group dentry
 
-:::
-
-### checkboxGroup 全选/取消
-
-:::demo
-
-```vue
-<template>
-  <nut-checkbox-group v-model="state.checkboxgroup3" ref="group" @change="changeBox4">
-    <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
-      item.value
-    }}</nut-checkbox>
-  </nut-checkbox-group>
-  <span class="btn">
-    <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">全选</nut-button>
-    <nut-button type="primary" @click="toggleAll(false)" style="margin: 0 20px 0 0">取消</nut-button>
-    <nut-button type="warning" @click="toggleReverse">反选</nut-button>
-  </span>
-</template>
-<script setup>
-import { reactive, toRefs, ref } from 'vue';
-const state = reactive({
-  checkboxgroup3: ['2'],
-  checkboxsource: [
-    { label: '1', value: '组合复选框' },
-    { label: '2', value: '组合复选框' },
-    { label: '3', value: '组合复选框' },
-    { label: '4', value: '组合复选框' },
-    { label: '5', value: '组合复选框' },
-    { label: '6', value: '组合复选框' }
-  ]
-});
-
-const group = ref(null);
-const changeBox4 = (label) => {
-  console.log(`${label.length === state.checkboxsource.length ? '全选' : '取消全选'}`);
-};
-
-const toggleAll = (f) => {
-  group.value.toggleAll(f);
-};
-
-const toggleReverse = () => {
-  console.log(`反选`);
-  group.value.toggleReverse();
-};
-</script>
-```
+### CheckboxGroup 禁用
 
-:::
-
-### checkboxGroup 使用，限制最大可选数（2 个）
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
-    <nut-cell>
-      <nut-checkbox-group v-model="checkboxgroup4" :max="2">
-        <nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-        <nut-checkbox label="2">组合复选框</nut-checkbox>
-        <nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
-        <nut-checkbox label="4">组合复选框</nut-checkbox>
-      </nut-checkbox-group>
-    </nut-cell>
-    <nut-cell>
-      <div class="demo-check">选中</div>
-      <div>{{ checkboxgroup4 }}</div>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const checkboxgroup1 = ref(['2']);
-</script>
-```
+> demo: checkbox group-disabled dentry
+
+### CheckboxGroup 方法
 
-:::
+> demo: checkbox methods dentry
+
+### CheckboxGroup 限制最大可选数
+
+> demo: checkbox max dentry
 
 ### 全选/半选/取消
 
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="全选/半选/取消">
-    <nut-cell>
-      <nut-checkbox :indeterminate="state.indeterminate" v-model="state.checkbox10" @change="changeBox5"
-        >全选</nut-checkbox
-      >
-    </nut-cell>
-    <nut-checkbox-group v-model="state.checkboxgroup5" ref="group2" @change="changeBox6">
-      <nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
-      <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
-    </nut-checkbox-group>
-  </nut-cell-group>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const group2 = ref(null);
-const state = reactive({
-  indeterminate: false,
-  checkbox10: false,
-  checkboxgroup5: []
-});
-
-const changeBox5 = (value) => {
-  group2.value.toggleAll(value);
-};
-
-const changeBox6 = (label) => {
-  if (label.length === 4) {
-    state.indeterminate = false;
-    state.checkbox10 = true;
-  } else if (label.length && label.length < 4) {
-    state.indeterminate = true;
-  } else {
-    data.indeterminate = false;
-    state.checkbox10 = false;
-  }
-};
-</script>
-```
+> demo: checkbox methods2 dentry
+
+### 按钮形状
 
-:::
+> demo: checkbox shape dentry
 
 ## API