diff --git a/examples/docs/en-US/checkbox.md b/examples/docs/en-US/checkbox.md
index dc67aee7d72..cdb5d03b1ec 100644
--- a/examples/docs/en-US/checkbox.md
+++ b/examples/docs/en-US/checkbox.md
@@ -175,6 +175,11 @@ Checkbox with button styles.
       <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -186,6 +191,7 @@ Checkbox with button styles.
         checkboxGroup2: ['Shanghai'],
         checkboxGroup3: ['Shanghai'],
         checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -219,6 +225,12 @@ Checkbox with button styles.
       <el-checkbox label="Option2" border></el-checkbox>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
 </template>
 
 <script>
@@ -230,7 +242,8 @@ Checkbox with button styles.
         checked3: false,
         checked4: true,
         checkboxGroup1: [],
-        checkboxGroup2: []
+        checkboxGroup2: [],
+        checkboxGroup3: []
       };
     }
   }
@@ -247,7 +260,7 @@ Checkbox with button styles.
 | 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, only works when `border` is true  | string  | medium / small / mini / compact | — |
 | name | native 'name' attribute | string    |      —         |     —    |
 | checked  | if the Checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
@@ -261,7 +274,7 @@ Checkbox with button styles.
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
 | value / v-model | binding value | array | — | — |
-|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
+|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini / compact | — |
 | 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/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 7d9aea3bf9f..4eb004af7c1 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -175,6 +175,11 @@ Checkbox con estilo tipo Botón.
       <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -186,6 +191,7 @@ Checkbox con estilo tipo Botón.
         checkboxGroup2: ['Shanghai'],
         checkboxGroup3: ['Shanghai'],
         checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -219,6 +225,12 @@ Checkbox con estilo tipo Botón.
       <el-checkbox label="Opción2" border></el-checkbox>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="compact" disabled>
+      <el-checkbox label="Opción1" border></el-checkbox>
+      <el-checkbox label="Opción2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
 </template>
 
 <script>
@@ -230,7 +242,8 @@ Checkbox con estilo tipo Botón.
         checked3: false,
         checked4: true,
         checkboxGroup1: [],
-        checkboxGroup2: []
+        checkboxGroup2: [],
+        checkboxGroup3: []
       };
     }
   }
@@ -247,7 +260,7 @@ Checkbox con estilo tipo Botón.
 | 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, sólo funciona si `border` es true | string                    | medium / small / mini / compact | —           |
 | name          | atributo `name` nativo                 | string                    | —                     | —           |
 | checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |
 | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
@@ -261,7 +274,7 @@ Checkbox con estilo tipo Botón.
 | Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
 | 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       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini / compact | —           |
 | 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/examples/docs/fr-FR/checkbox.md b/examples/docs/fr-FR/checkbox.md
index 24e227f38df..ca2d2f9f028 100644
--- a/examples/docs/fr-FR/checkbox.md
+++ b/examples/docs/fr-FR/checkbox.md
@@ -175,6 +175,11 @@ Des checkbox avec une apparence de bouton.
       <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -186,6 +191,7 @@ Des checkbox avec une apparence de bouton.
         checkboxGroup2: ['Shanghai'],
         checkboxGroup3: ['Shanghai'],
         checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -219,6 +225,12 @@ Des checkbox avec une apparence de bouton.
       <el-checkbox label="Option2" border></el-checkbox>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
 </template>
 
 <script>
@@ -230,7 +242,8 @@ Des checkbox avec une apparence de bouton.
         checked3: false,
         checked4: true,
         checkboxGroup1: [],
-        checkboxGroup2: []
+        checkboxGroup2: [],
+        checkboxGroup3: []
       };
     }
   }
@@ -247,7 +260,7 @@ Des checkbox avec une apparence de bouton.
 | 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, ne marche que si `border` est 'true'  | string  | medium / small / mini / compact | — |
 | name | Attribut 'name' natif. | string    |      —         |     —    |
 | checked  | Si la checkbox est cochée.   | boolean   |  — | false   |
 | indeterminate  | Identique à `indeterminate` dans les checkbox natives. | boolean   |  — | false   |
@@ -261,7 +274,7 @@ Des checkbox avec une apparence de bouton.
 | Attribut      | Description         | Type    | Options                         | Défaut|
 |---------- |-------- |---------- |-------------  |-------- |
 | value / v-model | La valeur liée. | array | — | — |
-|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
+|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini / compact | — |
 | 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/examples/docs/zh-CN/checkbox.md b/examples/docs/zh-CN/checkbox.md
index 184fc352de5..74a161c9491 100644
--- a/examples/docs/zh-CN/checkbox.md
+++ b/examples/docs/zh-CN/checkbox.md
@@ -175,6 +175,11 @@
       <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="compact" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['上海', '北京', '广州', '深圳'];
@@ -185,6 +190,7 @@
         checkboxGroup2: ['上海'],
         checkboxGroup3: ['上海'],
         checkboxGroup4: ['上海'],
+        checkboxGroup5: ['上海'],
         cities: cityOptions
       };
     }
@@ -218,6 +224,12 @@
       <el-checkbox label="备选项2" border></el-checkbox>
     </el-checkbox-group>
   </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="compact" disabled>
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
 </template>
 
 <script>
@@ -229,7 +241,8 @@
         checked3: false,
         checked4: true,
         checkboxGroup1: [],
-        checkboxGroup2: []
+        checkboxGroup2: [],
+        checkboxGroup3: []
       };
     }
   }
@@ -246,7 +259,7 @@
 | false-label | 没有选中时的值   | string / number    |      —         |     —    |
 | disabled  | 是否禁用    | boolean   |  — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
-| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
+| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini / compact | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
@@ -260,7 +273,7 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | value / v-model | 绑定值 | array | — | — |
-| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
+| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini / compact  |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index 1703cac0ba2..6377b099198 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -91,6 +91,26 @@
         }
       }
     }
+
+    &.el-checkbox--compact {
+      padding: $--checkbox-bordered-compact-padding;
+      border-radius: $--button-compact-border-radius;
+      height: $--checkbox-bordered-compact-height;
+
+      .el-checkbox__label {
+        line-height: 12px;
+        font-size: $--button-compact-font-size;
+      }
+
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-compact-input-height;
+        width: $--checkbox-bordered-compact-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
   }
 
   @include e(input) {
@@ -352,6 +372,11 @@
       @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
     }
   }
+  @include m(compact) {
+    .el-checkbox-button__inner {
+      @include button-size($--button-compact-padding-vertical, $--button-compact-padding-horizontal, $--button-compact-font-size, 0);
+    }
+  }
 }
 
 @include b(checkbox-group) {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 38550c03e26..3c494362fc6 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -189,6 +189,8 @@ $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
 $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
 /// padding||Spacing|3
 $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-compact-padding: 2px 13px 2px 10px !default;
 $--checkbox-bordered-medium-input-height: 14px !default;
 $--checkbox-bordered-medium-input-width: 14px !default;
 /// height||Other|4
@@ -201,6 +203,10 @@ $--checkbox-bordered-mini-input-height: 12px !default;
 $--checkbox-bordered-mini-input-width: 12px !default;
 /// height||Other|4
 $--checkbox-bordered-mini-height: 28px !default;
+$--checkbox-bordered-compact-input-height: 12px !default;
+$--checkbox-bordered-compact-input-width: 12px !default;
+/// height||Other|4
+$--checkbox-bordered-compact-height: 26px !default;
 
 /// color||Color|0
 $--checkbox-button-checked-background-color: $--color-primary !default;