diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index 04d661d47e..737b7e0081 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -3,7 +3,7 @@
     :id="id"
     class="el-checkbox"
     :class="[
-      border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
+      checkboxSize ? 'el-checkbox--' + checkboxSize : '',
       { 'is-disabled': isDisabled },
       { 'is-bordered': border },
       { 'is-checked': isChecked }
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index edac825681..b0dd021035 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -6,13 +6,24 @@
 @import 'mixins/_button';
 @import 'mixins/utils';
 
+$--checkbox-height: () !default;
+$--checkbox-height: map.merge(
+  (
+    'default': 40px,
+    'medium': 36px,
+    'small': 32px,
+    'mini': 28px,
+  ),
+  $--checkbox-height
+);
+
 $--checkbox-bordered-padding: () !default;
 $--checkbox-bordered-padding: map.merge(
   (
-    'default': 9px 20px 9px 10px,
-    'medium': 7px 20px 7px 10px,
-    'small': 5px 15px 5px 10px,
-    'mini': 3px 15px 3px 10px,
+    'default': 0 20px 0 10px,
+    'medium': 0 20px 0 10px,
+    'small': 0 15px 0 10px,
+    'mini': 0 15px 0 10px,
   ),
   $--checkbox-bordered-padding
 );
@@ -33,17 +44,6 @@ $--checkbox-bordered-input-width: map.merge(
   $--checkbox-bordered-input-width
 );
 
-$--checkbox-bordered-height: () !default;
-$--checkbox-bordered-height: map.merge(
-  (
-    'default': 40px,
-    'medium': 36px,
-    'small': 32px,
-    'mini': 28px,
-  ),
-  $--checkbox-bordered-height
-);
-
 @include b(checkbox) {
   @include set-component-css-var('checkbox', $--checkbox);
 }
@@ -59,13 +59,19 @@ $--checkbox-bordered-height: map.merge(
   white-space: nowrap;
   user-select: none;
   margin-right: 30px;
+  height: map.get($--checkbox-height, 'default');
+
+  @each $size in (medium, small, mini) {
+    &.#{$namespace}-checkbox--#{$size} {
+      height: map.get($--checkbox-height, $size);
+    }
+  }
 
   @include when(bordered) {
     padding: map.get($--checkbox-bordered-padding, 'default');
     border-radius: var(--el-border-radius-base);
     border: var(--el-border-base);
     box-sizing: border-box;
-    height: map.get($--checkbox-bordered-height, 'default');
 
     &.is-checked {
       border-color: var(--el-color-primary);
@@ -84,7 +90,6 @@ $--checkbox-bordered-height: map.merge(
       &.#{$namespace}-checkbox--#{$size} {
         padding: map.get($--checkbox-bordered-padding, $size);
         border-radius: map.get($--button-border-radius, $size);
-        height: map.get($--checkbox-bordered-height, $size);
 
         .#{$namespace}-checkbox__label {
           font-size: map.get($--button-font-size, $size);
diff --git a/website/docs/en-US/checkbox.md b/website/docs/en-US/checkbox.md
index 4c44043f67..520bf0cc4c 100644
--- a/website/docs/en-US/checkbox.md
+++ b/website/docs/en-US/checkbox.md
@@ -10,14 +10,35 @@ Checkbox can be used alone to switch between two states.
 
 ```html
 <template>
-  <!-- `checked` should be true or false -->
-  <el-checkbox v-model="checked">Option</el-checkbox>
+  <div>
+    <el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
+    <el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        checked: true
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: false,
+        checked5: false,
+        checked6: false,
+        checked7: false,
+        checked8: false,
       };
     }
   };
@@ -29,9 +50,23 @@ Checkbox can be used alone to switch between two states.
 
   export default defineComponent({
     setup() {
-      const checked = ref(true);
+      const checked1 = ref(true);
+      const checked2 = ref(false);
+      const checked3 = ref(false);
+      const checked4 = ref(false);
+      const checked5 = ref(false);
+      const checked6 = ref(false);
+      const checked7 = ref(false);
+      const checked8 = ref(false);
       return {
-        checked,
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        checked6,
+        checked7,
+        checked8,
       };
     },
   });
@@ -137,7 +172,6 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 ```html
 <template>
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
-  <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
@@ -402,7 +436,7 @@ export default defineComponent({
 | false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
 | disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |
 | border  | whether to add a border around Checkbox  | boolean   | — | false   |
-| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |
+| size  | size of the Checkbox  | string  | medium / small / mini | — |
 | name | native 'name' attribute | string    |      —         |     —    |
 | checked  | if the Checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
@@ -416,7 +450,7 @@ export default defineComponent({
 | Attribute      | Description         | Type    | Accepted Values         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
 | model-value / v-model | binding value | array | — | — |
-|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
+|size | size of checkbox | string | medium / small / mini | — |
 | disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
diff --git a/website/docs/es/checkbox.md b/website/docs/es/checkbox.md
index 71cf8c5b25..0f3e13b074 100644
--- a/website/docs/es/checkbox.md
+++ b/website/docs/es/checkbox.md
@@ -10,14 +10,35 @@ Checkbox puede ser usado para alternar entre dos estados.
 
 ```html
 <template>
-  <!-- `checked` debe ser true o false -->
-  <el-checkbox v-model="checked">Opción</el-checkbox>
+  <div>
+    <el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
+    <el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        checked: true
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: false,
+        checked5: false,
+        checked6: false,
+        checked7: false,
+        checked8: false,
       };
     }
   };
@@ -29,9 +50,23 @@ Checkbox puede ser usado para alternar entre dos estados.
 
   export default defineComponent({
     setup() {
-      const checked = ref(true);
+      const checked1 = ref(true);
+      const checked2 = ref(false);
+      const checked3 = ref(false);
+      const checked4 = ref(false);
+      const checked5 = ref(false);
+      const checked6 = ref(false);
+      const checked7 = ref(false);
+      const checked8 = ref(false);
       return {
-        checked,
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        checked6,
+        checked7,
+        checked8,
       };
     },
   });
@@ -136,7 +171,6 @@ La propiedad `indeterminate` puede ser usada para generar el efecto de marcar to
 ```html
 <template>
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
-  <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
@@ -401,7 +435,7 @@ export default defineComponent({
 | false-label   | valor del Checkbox si no está marcado    | string / number           | —                     | —           |
 | disabled      | especifica si el Checkbox está deshabilitado | boolean                   | —                     | false       |
 | border        | especifica si agrega un borde alrededor del Checkbox | boolean                   | —                     | false       |
-| size          | tamaño del Checkbox, sólo funciona si `border` es true | string                    | medium / small / mini | —           |
+| size          | tamaño del Checkbox | string                    | medium / small / mini | —           |
 | name          | atributo `name` nativo                 | string                    | —                     | —           |
 | checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |
 | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
@@ -415,7 +449,7 @@ export default defineComponent({
 | Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
 | model-value / v-model | valor enlazado | array | — | — |
-| size       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini | —           |
+| size       | size of checkbox | string  | medium / small / mini | —           |
 | disabled   | especifica si los checkboxes anidados están deshabilitados | boolean | —                     | false       |
 | min        | cantidad mínima de checkboxes que deben ser marcados | number  | —                     | —           |
 | max        | cantidad máxima de checkboxes que pueden ser marcados | number  | —                     | —           |
diff --git a/website/docs/fr-FR/checkbox.md b/website/docs/fr-FR/checkbox.md
index bb23361480..4ce8806899 100644
--- a/website/docs/fr-FR/checkbox.md
+++ b/website/docs/fr-FR/checkbox.md
@@ -10,14 +10,35 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
 
 ```html
 <template>
-  <!-- `checked` should be true or false -->
-  <el-checkbox v-model="checked">Option</el-checkbox>
+  <div>
+    <el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
+    <el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        checked: true
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: false,
+        checked5: false,
+        checked6: false,
+        checked7: false,
+        checked8: false,
       };
     }
   };
@@ -29,9 +50,23 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
 
   export default defineComponent({
     setup() {
-      const checked = ref(true);
+      const checked1 = ref(true);
+      const checked2 = ref(false);
+      const checked3 = ref(false);
+      const checked4 = ref(false);
+      const checked5 = ref(false);
+      const checked6 = ref(false);
+      const checked7 = ref(false);
+      const checked8 = ref(false);
       return {
-        checked,
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        checked6,
+        checked7,
+        checked8,
       };
     },
   });
@@ -136,7 +171,6 @@ La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout"
 ```html
 <template>
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
-  <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
@@ -401,7 +435,7 @@ export default defineComponent({
 | false-label | Valeur de la checkbox si non cochée.   | string / number    |      —         |     —    |
 | disabled  | Désactive la checkbox.   | boolean   |  — | false   |
 | border  | Ajoute une bordure à la checkbox.  | boolean   | — | false   |
-| size  | taille de la checkbox, ne marche que si `border` est 'true'  | string  | medium / small / mini | — |
+| size  | taille de la checkbox  | string  | medium / small / mini | — |
 | name | Attribut 'name' natif. | string    |      —         |     —    |
 | checked  | Si la checkbox est cochée.   | boolean   |  — | false   |
 | indeterminate  | Identique à `indeterminate` dans les checkbox natives. | boolean   |  — | false   |
@@ -415,7 +449,7 @@ export default defineComponent({
 | Attribut      | Description         | Type    | Options                         | Défaut|
 |---------- |-------- |---------- |-------------  |-------- |
 | model-value / v-model | La valeur liée. | array | — | — |
-|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
+|size | size of checkbox | string | medium / small / mini | — |
 | disabled  | Si les checkbox imbriquées sont désactivées. | boolean   | — | false   |
 | min     | Nombre minimum de checkbox cochées.   | number    |       —        |     —    |
 | max     | Nombre maximum de checkbox cochées.   | number    |       —        |     —    |
diff --git a/website/docs/jp/checkbox.md b/website/docs/jp/checkbox.md
index 68bd3fec7b..ce1b48dc10 100644
--- a/website/docs/jp/checkbox.md
+++ b/website/docs/jp/checkbox.md
@@ -10,14 +10,35 @@ checkbox単独で使用して2つの状態を切り替えることができま
 
 ```html
 <template>
-  <!-- `checked` should be true or false -->
-  <el-checkbox v-model="checked">Option</el-checkbox>
+  <div>
+    <el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
+    <el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        checked: true
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: false,
+        checked5: false,
+        checked6: false,
+        checked7: false,
+        checked8: false,
       };
     }
   };
@@ -29,25 +50,23 @@ checkbox単独で使用して2つの状態を切り替えることができま
 
   export default defineComponent({
     setup() {
-      const checked = ref(true);
+      const checked1 = ref(true);
+      const checked2 = ref(false);
+      const checked3 = ref(false);
+      const checked4 = ref(false);
+      const checked5 = ref(false);
+      const checked6 = ref(false);
+      const checked7 = ref(false);
+      const checked8 = ref(false);
       return {
-        checked,
-      };
-    },
-  });
-
-</setup>
--->
-<!--
-<setup>
-
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    setup() {
-      const checked = ref(true);
-      return {
-        checked,
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        checked6,
+        checked7,
+        checked8,
       };
     },
   });
@@ -152,7 +171,6 @@ checkboxを無効にした状態。
 ```html
 <template>
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
-  <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
@@ -417,7 +435,7 @@ export default defineComponent({
 | false-label | checkboxがチェックされていない場合のcheckboxの値   | string / number    |      —         |     —    |
 | disabled  | checkboxを無効にするかどうか   | boolean   |  — | false   |
 | border  | checkboxの周りにボーダーを追加するかどうか  | boolean   | — | false   |
-| size  | checkboxのサイズ、`border` がtrueの場合にのみ動作します。  | string  | medium / small / mini | — |
+| size  | checkboxのサイズ  | string  | medium / small / mini | — |
 | name | ネイティブ 'name' 属性 | string    |      —         |     —    |
 | checked  | checkboxがチェックされているかどうか  | boolean   |  — | false   |
 | indeterminate  | ネイティブcheckboxの `indeterminate` と同じ | boolean   |  — | false   |
@@ -431,7 +449,7 @@ export default defineComponent({
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
 | model-value / v-model | バインディング値 | array | — | — |
-|size | checkboxのボタンや枠線の大きさ | string | medium / small / mini | — |
+|size | checkboxの大きさ | string | medium / small / mini | — |
 | disabled  | ネスティングcheckboxを無効にするかどうか | boolean   | — | false   |
 | min     | checkboxの最小チェック数   | number    |       —        |     —    |
 | max     | checkboxの最大チェック数   | number    |       —        |     —    |
diff --git a/website/docs/zh-CN/checkbox.md b/website/docs/zh-CN/checkbox.md
index 6e7810957d..e161e48f51 100644
--- a/website/docs/zh-CN/checkbox.md
+++ b/website/docs/zh-CN/checkbox.md
@@ -9,14 +9,35 @@
 
 ```html
 <template>
-  <!-- `checked` 为 true 或 false -->
-  <el-checkbox v-model="checked">备选项</el-checkbox>
+  <div>
+    <el-checkbox v-model="checked1" label="备选项1"></el-checkbox>
+    <el-checkbox v-model="checked2" label="备选项2"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked3" label="备选项1" size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" size="medium"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked5" label="备选项1" size="small"></el-checkbox>
+    <el-checkbox v-model="checked6" label="备选项2" size="small"></el-checkbox>
+  </div>
+  <div>
+    <el-checkbox v-model="checked7" label="备选项1" size="mini"></el-checkbox>
+    <el-checkbox v-model="checked8" label="备选项2" size="mini"></el-checkbox>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        checked: true
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: false,
+        checked5: false,
+        checked6: false,
+        checked7: false,
+        checked8: false,
       };
     }
   };
@@ -28,9 +49,23 @@
 
   export default defineComponent({
     setup() {
-      const checked = ref(true);
+      const checked1 = ref(true);
+      const checked2 = ref(false);
+      const checked3 = ref(false);
+      const checked4 = ref(false);
+      const checked5 = ref(false);
+      const checked6 = ref(false);
+      const checked7 = ref(false);
+      const checked8 = ref(false);
       return {
-        checked,
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        checked6,
+        checked7,
+        checked8,
       };
     },
   });
@@ -135,7 +170,6 @@
 ```html
 <template>
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
-  <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
@@ -402,7 +436,7 @@
 | false-label | 没有选中时的值   | string / number    |      —         |     —    |
 | disabled  | 是否禁用    | boolean   |  — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
-| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
+| size  | Checkbox 的尺寸  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
@@ -416,7 +450,7 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | model-value / v-model | 绑定值 | array | — | — |
-| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
+| size     | 多选框组尺寸   | string  | medium / small / mini  |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |