From ab1d41ae14aaad3a5039688eb6950aa76a5a34bd Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sat, 23 May 2020 07:59:14 +0800
Subject: [PATCH 1/2] feat(checkbox): add support of different sizes

---
 components/checkbox/checkbox-group.tsx | 18 +++++++++++++++++-
 components/checkbox/checkbox.icon.tsx  | 18 ++++--------------
 components/checkbox/checkbox.tsx       | 21 +++++++++++++--------
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/components/checkbox/checkbox-group.tsx b/components/checkbox/checkbox-group.tsx
index 4f99df8..6a3f3db 100644
--- a/components/checkbox/checkbox-group.tsx
+++ b/components/checkbox/checkbox-group.tsx
@@ -2,26 +2,40 @@ import React, { useEffect, useMemo, useState } from 'react'
 import withDefaults from '../utils/with-defaults'
 import { CheckboxContext } from './checkbox-context'
 import useWarning from '../utils/use-warning'
+import { NormalSizes } from '../utils/prop-types'
 
 interface Props {
   value: string[]
   disabled?: boolean
+  size?: NormalSizes
   onChange?: (values: string[]) => void
   className?: string
 }
 
 const defaultProps = {
   disabled: false,
+  size: 'small' as NormalSizes,
   className: '',
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CheckboxGroupProps = Props & typeof defaultProps & NativeAttrs
 
+export const getCheckboxSize = (size: NormalSizes): string => {
+  const sizes: { [key in NormalSizes]: string } = {
+    mini: '.75rem',
+    small: '.875rem',
+    medium: '1rem',
+    large: '1.125rem',
+  }
+  return sizes[size]
+}
+
 const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   disabled,
   onChange,
   value,
+  size,
   children,
   className,
   ...props
@@ -47,6 +61,7 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
       values: selfVal,
     }
   }, [disabled, selfVal])
+  const fontSize = useMemo(() => getCheckboxSize(size), [size])
 
   useEffect(() => {
     setSelfVal(value)
@@ -58,7 +73,8 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
         {children}
         <style jsx>{`
           .group :global(label) {
-            margin-right: 1.875rem;
+            margin-right: calc(${fontSize} * 2);
+            --checkbox-size: ${fontSize};
           }
         `}</style>
       </div>
diff --git a/components/checkbox/checkbox.icon.tsx b/components/checkbox/checkbox.icon.tsx
index 4c7bbb7..a89dd37 100644
--- a/components/checkbox/checkbox.icon.tsx
+++ b/components/checkbox/checkbox.icon.tsx
@@ -20,12 +20,7 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
   return (
     <>
       {checked ? (
-        <svg
-          width="12px"
-          height="12px"
-          viewBox="0 0 17 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
+        <svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z"
             fill={fill}
@@ -33,12 +28,7 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
           <path d="M16 3L7.72491 11L5 8" stroke={bg} strokeWidth="1.5" />
         </svg>
       ) : (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12px"
-          height="12px"
-          viewBox="0 0 12 12"
-          fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
           <path
             d="M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z"
             stroke={stroke}
@@ -48,8 +38,8 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
       <style jsx>{`
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: ${disabled ? 0.4 : 1};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx
index 7cd9b95..8f46a3f 100644
--- a/components/checkbox/checkbox.tsx
+++ b/components/checkbox/checkbox.tsx
@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useCheckbox } from './checkbox-context'
-import CheckboxGroup from './checkbox-group'
+import CheckboxGroup, { getCheckboxSize } from './checkbox-group'
 import CheckboxIcon from './checkbox.icon'
 import useWarning from '../utils/use-warning'
+import { NormalSizes } from '../utils/prop-types'
 
 interface CheckboxEventTarget {
   checked: boolean
@@ -20,6 +21,7 @@ interface Props {
   disabled?: boolean
   initialChecked?: boolean
   onChange?: (e: CheckboxEvent) => void
+  size?: NormalSizes
   className?: string
   value?: string
 }
@@ -27,6 +29,7 @@ interface Props {
 const defaultProps = {
   disabled: false,
   initialChecked: false,
+  size: 'small' as NormalSizes,
   className: '',
   value: '',
 }
@@ -41,6 +44,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   className,
   children,
+  size,
   value,
   ...props
 }) => {
@@ -51,7 +55,6 @@ const Checkbox: React.FC<CheckboxProps> = ({
   if (inGroup && checked) {
     useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox')
   }
-
   if (inGroup) {
     useEffect(() => {
       const next = values.includes(value)
@@ -60,6 +63,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
     }, [values.join(',')])
   }
 
+  const fontSize = useMemo(() => getCheckboxSize(size), [size])
   const changeHandle = useCallback(
     (ev: React.ChangeEvent) => {
       if (isDisabled) return
@@ -94,20 +98,21 @@ const Checkbox: React.FC<CheckboxProps> = ({
 
       <style jsx>{`
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: ${fontSize};
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
           opacity: ${isDisabled ? 0.75 : 1};
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
         }

From d46e319d14fc123d46db4b3479efb3043cd16e29 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sat, 23 May 2020 07:59:26 +0800
Subject: [PATCH 2/2] docs(checkbox): add docs for size prop

test(checkbox): add testcases for size
---
 .../__snapshots__/group.test.tsx.snap         | 404 ++++++++++++------
 .../__snapshots__/index.test.tsx.snap         | 273 +++++++++---
 components/checkbox/__tests__/group.test.tsx  |  21 +
 components/checkbox/__tests__/index.test.tsx  |  13 +
 pages/en-us/components/checkbox.mdx           |  27 +-
 pages/zh-cn/components/checkbox.mdx           |  26 +-
 6 files changed, 564 insertions(+), 200 deletions(-)

diff --git a/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
index 499b31f..9318552 100644
--- a/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
+++ b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
@@ -15,9 +15,7 @@ initialize {
           Object {
             "attribs": Object {
               "fill": "none",
-              "height": "12px",
               "viewBox": "0 0 12 12",
-              "width": "12px",
               "xmlns": "http://www.w3.org/2000/svg",
             },
             "children": Array [
@@ -52,8 +50,8 @@ initialize {
                   "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -95,20 +93,21 @@ initialize {
                       Object {
                         "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -171,16 +170,12 @@ initialize {
             "type": "tag",
             "x-attribsNamespace": Object {
               "fill": undefined,
-              "height": undefined,
               "viewBox": undefined,
-              "width": undefined,
               "xmlns": "http://www.w3.org/2000/xmlns/",
             },
             "x-attribsPrefix": Object {
               "fill": undefined,
-              "height": undefined,
               "viewBox": undefined,
-              "width": undefined,
               "xmlns": "",
             },
           },
@@ -191,8 +186,8 @@ initialize {
                 "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -234,20 +229,21 @@ initialize {
                     Object {
                       "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -303,9 +299,7 @@ initialize {
             "prev": Object {
               "attribs": Object {
                 "fill": "none",
-                "height": "12px",
                 "viewBox": "0 0 12 12",
-                "width": "12px",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
@@ -339,16 +333,12 @@ initialize {
               "type": "tag",
               "x-attribsNamespace": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "http://www.w3.org/2000/xmlns/",
               },
               "x-attribsPrefix": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "",
               },
             },
@@ -384,20 +374,21 @@ initialize {
                   Object {
                     "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -447,8 +438,8 @@ initialize {
                   "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -467,9 +458,7 @@ initialize {
               "prev": Object {
                 "attribs": Object {
                   "fill": "none",
-                  "height": "12px",
                   "viewBox": "0 0 12 12",
-                  "width": "12px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
@@ -503,16 +492,12 @@ initialize {
                 "type": "tag",
                 "x-attribsNamespace": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "http://www.w3.org/2000/xmlns/",
                 },
                 "x-attribsPrefix": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "",
                 },
               },
@@ -549,20 +534,21 @@ initialize {
                 Object {
                   "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -611,8 +597,8 @@ initialize {
                     "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -631,9 +617,7 @@ initialize {
                 "prev": Object {
                   "attribs": Object {
                     "fill": "none",
-                    "height": "12px",
                     "viewBox": "0 0 12 12",
-                    "width": "12px",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
@@ -667,16 +651,12 @@ initialize {
                   "type": "tag",
                   "x-attribsNamespace": Object {
                     "fill": undefined,
-                    "height": undefined,
                     "viewBox": undefined,
-                    "width": undefined,
                     "xmlns": "http://www.w3.org/2000/xmlns/",
                   },
                   "x-attribsPrefix": Object {
                     "fill": undefined,
-                    "height": undefined,
                     "viewBox": undefined,
-                    "width": undefined,
                     "xmlns": "",
                   },
                 },
@@ -706,20 +686,21 @@ initialize {
               Object {
                 "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -779,8 +760,8 @@ initialize {
                       "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -799,9 +780,7 @@ initialize {
                   "prev": Object {
                     "attribs": Object {
                       "fill": "none",
-                      "height": "12px",
                       "viewBox": "0 0 12 12",
-                      "width": "12px",
                       "xmlns": "http://www.w3.org/2000/svg",
                     },
                     "children": Array [
@@ -835,16 +814,12 @@ initialize {
                     "type": "tag",
                     "x-attribsNamespace": Object {
                       "fill": undefined,
-                      "height": undefined,
                       "viewBox": undefined,
-                      "width": undefined,
                       "xmlns": "http://www.w3.org/2000/xmlns/",
                     },
                     "x-attribsPrefix": Object {
                       "fill": undefined,
-                      "height": undefined,
                       "viewBox": undefined,
-                      "width": undefined,
                       "xmlns": "",
                     },
                   },
@@ -881,7 +856,8 @@ initialize {
             Object {
               "data": "
           .group :global(label) {
-            margin-right: 1.875rem;
+            margin-right: calc(.875rem * 2);
+            --checkbox-size: .875rem;
           }
         ",
               "next": null,
@@ -915,7 +891,8 @@ initialize {
           Object {
             "data": "
           .group :global(label) {
-            margin-right: 1.875rem;
+            margin-right: calc(.875rem * 2);
+            --checkbox-size: .875rem;
           }
         ",
             "next": null,
@@ -936,9 +913,7 @@ initialize {
             Object {
               "attribs": Object {
                 "fill": "none",
-                "height": "12px",
                 "viewBox": "0 0 12 12",
-                "width": "12px",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
@@ -973,8 +948,8 @@ initialize {
                     "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -1016,20 +991,21 @@ initialize {
                         Object {
                           "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -1092,16 +1068,12 @@ initialize {
               "type": "tag",
               "x-attribsNamespace": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "http://www.w3.org/2000/xmlns/",
               },
               "x-attribsPrefix": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "",
               },
             },
@@ -1112,8 +1084,8 @@ initialize {
                   "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -1155,20 +1127,21 @@ initialize {
                       Object {
                         "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -1224,9 +1197,7 @@ initialize {
               "prev": Object {
                 "attribs": Object {
                   "fill": "none",
-                  "height": "12px",
                   "viewBox": "0 0 12 12",
-                  "width": "12px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
@@ -1260,16 +1231,12 @@ initialize {
                 "type": "tag",
                 "x-attribsNamespace": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "http://www.w3.org/2000/xmlns/",
                 },
                 "x-attribsPrefix": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "",
                 },
               },
@@ -1305,20 +1272,21 @@ initialize {
                     Object {
                       "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -1368,8 +1336,8 @@ initialize {
                     "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -1388,9 +1356,7 @@ initialize {
                 "prev": Object {
                   "attribs": Object {
                     "fill": "none",
-                    "height": "12px",
                     "viewBox": "0 0 12 12",
-                    "width": "12px",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
@@ -1424,16 +1390,12 @@ initialize {
                   "type": "tag",
                   "x-attribsNamespace": Object {
                     "fill": undefined,
-                    "height": undefined,
                     "viewBox": undefined,
-                    "width": undefined,
                     "xmlns": "http://www.w3.org/2000/xmlns/",
                   },
                   "x-attribsPrefix": Object {
                     "fill": undefined,
-                    "height": undefined,
                     "viewBox": undefined,
-                    "width": undefined,
                     "xmlns": "",
                   },
                 },
@@ -1470,20 +1432,21 @@ initialize {
                   Object {
                     "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -1532,8 +1495,8 @@ initialize {
                       "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -1552,9 +1515,7 @@ initialize {
                   "prev": Object {
                     "attribs": Object {
                       "fill": "none",
-                      "height": "12px",
                       "viewBox": "0 0 12 12",
-                      "width": "12px",
                       "xmlns": "http://www.w3.org/2000/svg",
                     },
                     "children": Array [
@@ -1588,16 +1549,12 @@ initialize {
                     "type": "tag",
                     "x-attribsNamespace": Object {
                       "fill": undefined,
-                      "height": undefined,
                       "viewBox": undefined,
-                      "width": undefined,
                       "xmlns": "http://www.w3.org/2000/xmlns/",
                     },
                     "x-attribsPrefix": Object {
                       "fill": undefined,
-                      "height": undefined,
                       "viewBox": undefined,
-                      "width": undefined,
                       "xmlns": "",
                     },
                   },
@@ -1627,20 +1584,21 @@ initialize {
                 Object {
                   "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -1700,8 +1658,8 @@ initialize {
                         "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -1720,9 +1678,7 @@ initialize {
                     "prev": Object {
                       "attribs": Object {
                         "fill": "none",
-                        "height": "12px",
                         "viewBox": "0 0 12 12",
-                        "width": "12px",
                         "xmlns": "http://www.w3.org/2000/svg",
                       },
                       "children": Array [
@@ -1756,16 +1712,12 @@ initialize {
                       "type": "tag",
                       "x-attribsNamespace": Object {
                         "fill": undefined,
-                        "height": undefined,
                         "viewBox": undefined,
-                        "width": undefined,
                         "xmlns": "http://www.w3.org/2000/xmlns/",
                       },
                       "x-attribsPrefix": Object {
                         "fill": undefined,
-                        "height": undefined,
                         "viewBox": undefined,
-                        "width": undefined,
                         "xmlns": "",
                       },
                     },
@@ -1849,3 +1801,191 @@ initialize {
   },
 }
 `;
+
+exports[`Checkbox Group should work correctly with different sizes 1`] = `
+"<div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><style>
+          .group :global(label) {
+            margin-right: calc(.75rem * 2);
+            --checkbox-size: .75rem;
+          }
+        </style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><style>
+          .group :global(label) {
+            margin-right: calc(.875rem * 2);
+            --checkbox-size: .875rem;
+          }
+        </style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><style>
+          .group :global(label) {
+            margin-right: calc(1rem * 2);
+            --checkbox-size: 1rem;
+          }
+        </style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><style>
+          .group :global(label) {
+            margin-right: calc(1.125rem * 2);
+            --checkbox-size: 1.125rem;
+          }
+        </style></div></div>"
+`;
diff --git a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
index d66d815..72e8f6a 100644
--- a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,9 +10,7 @@ initialize {
       Object {
         "attribs": Object {
           "fill": "none",
-          "height": "12px",
           "viewBox": "0 0 12 12",
-          "width": "12px",
           "xmlns": "http://www.w3.org/2000/svg",
         },
         "children": Array [
@@ -47,8 +45,8 @@ initialize {
               "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -90,20 +88,21 @@ initialize {
                   Object {
                     "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -166,16 +165,12 @@ initialize {
         "type": "tag",
         "x-attribsNamespace": Object {
           "fill": undefined,
-          "height": undefined,
           "viewBox": undefined,
-          "width": undefined,
           "xmlns": "http://www.w3.org/2000/xmlns/",
         },
         "x-attribsPrefix": Object {
           "fill": undefined,
-          "height": undefined,
           "viewBox": undefined,
-          "width": undefined,
           "xmlns": "",
         },
       },
@@ -186,8 +181,8 @@ initialize {
             "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -229,20 +224,21 @@ initialize {
                 Object {
                   "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -298,9 +294,7 @@ initialize {
         "prev": Object {
           "attribs": Object {
             "fill": "none",
-            "height": "12px",
             "viewBox": "0 0 12 12",
-            "width": "12px",
             "xmlns": "http://www.w3.org/2000/svg",
           },
           "children": Array [
@@ -334,16 +328,12 @@ initialize {
           "type": "tag",
           "x-attribsNamespace": Object {
             "fill": undefined,
-            "height": undefined,
             "viewBox": undefined,
-            "width": undefined,
             "xmlns": "http://www.w3.org/2000/xmlns/",
           },
           "x-attribsPrefix": Object {
             "fill": undefined,
-            "height": undefined,
             "viewBox": undefined,
-            "width": undefined,
             "xmlns": "",
           },
         },
@@ -379,20 +369,21 @@ initialize {
               Object {
                 "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -442,8 +433,8 @@ initialize {
               "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -462,9 +453,7 @@ initialize {
           "prev": Object {
             "attribs": Object {
               "fill": "none",
-              "height": "12px",
               "viewBox": "0 0 12 12",
-              "width": "12px",
               "xmlns": "http://www.w3.org/2000/svg",
             },
             "children": Array [
@@ -498,16 +487,12 @@ initialize {
             "type": "tag",
             "x-attribsNamespace": Object {
               "fill": undefined,
-              "height": undefined,
               "viewBox": undefined,
-              "width": undefined,
               "xmlns": "http://www.w3.org/2000/xmlns/",
             },
             "x-attribsPrefix": Object {
               "fill": undefined,
-              "height": undefined,
               "viewBox": undefined,
-              "width": undefined,
               "xmlns": "",
             },
           },
@@ -544,20 +529,21 @@ initialize {
             Object {
               "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -606,8 +592,8 @@ initialize {
                 "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -626,9 +612,7 @@ initialize {
             "prev": Object {
               "attribs": Object {
                 "fill": "none",
-                "height": "12px",
                 "viewBox": "0 0 12 12",
-                "width": "12px",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
@@ -662,16 +646,12 @@ initialize {
               "type": "tag",
               "x-attribsNamespace": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "http://www.w3.org/2000/xmlns/",
               },
               "x-attribsPrefix": Object {
                 "fill": undefined,
-                "height": undefined,
                 "viewBox": undefined,
-                "width": undefined,
                 "xmlns": "",
               },
             },
@@ -701,20 +681,21 @@ initialize {
           Object {
             "data": "
         label {
-          height: 0.875rem;
-          line-height: 0.875rem;
+          --checkbox-size: .875rem;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           width: auto;
           cursor: pointer;
           opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
         }
 
         .text {
-          font-size: 0.875rem;
-          line-height: 0.875rem;
-          padding-left: 0.5rem;
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
           user-select: none;
           cursor: pointer;
         }
@@ -774,8 +755,8 @@ initialize {
                   "data": "
         svg {
           display: inline-flex;
-          width: 12px;
-          height: 12px;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
           user-select: none;
           opacity: 1;
           cursor: pointer;
@@ -794,9 +775,7 @@ initialize {
               "prev": Object {
                 "attribs": Object {
                   "fill": "none",
-                  "height": "12px",
                   "viewBox": "0 0 12 12",
-                  "width": "12px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
@@ -830,16 +809,12 @@ initialize {
                 "type": "tag",
                 "x-attribsNamespace": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "http://www.w3.org/2000/xmlns/",
                 },
                 "x-attribsPrefix": Object {
                   "fill": undefined,
-                  "height": undefined,
                   "viewBox": undefined,
-                  "width": undefined,
                   "xmlns": "",
                 },
               },
@@ -905,3 +880,171 @@ initialize {
   },
 }
 `;
+
+exports[`Checkbox should work correctly with different sizes 1`] = `
+"<div><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">mini</span><style>
+        label {
+          --checkbox-size: .75rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">small</span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">medium</span><style>
+        label {
+          --checkbox-size: 1rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\">large</span><style>
+        label {
+          --checkbox-size: 1.125rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label></div>"
+`;
diff --git a/components/checkbox/__tests__/group.test.tsx b/components/checkbox/__tests__/group.test.tsx
index 896a815..abf36b6 100644
--- a/components/checkbox/__tests__/group.test.tsx
+++ b/components/checkbox/__tests__/group.test.tsx
@@ -18,6 +18,27 @@ describe('Checkbox Group', () => {
     expect(rendered).toMatchSnapshot()
   })
 
+  it('should work correctly with different sizes', () => {
+    const wrapper = mount(
+      <div>
+        <Checkbox.Group value={[]} size="mini">
+          <Checkbox value="sydney">Sydney</Checkbox>
+        </Checkbox.Group>
+        <Checkbox.Group value={[]} size="small">
+          <Checkbox value="sydney">Sydney</Checkbox>
+        </Checkbox.Group>
+        <Checkbox.Group value={[]} size="medium">
+          <Checkbox value="sydney">Sydney</Checkbox>
+        </Checkbox.Group>
+        <Checkbox.Group value={[]} size="large">
+          <Checkbox value="sydney">Sydney</Checkbox>
+        </Checkbox.Group>
+      </div>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should work correctly with initial value', () => {
     let wrapper = mount(
       <Checkbox.Group value={['sydney']}>
diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx
index ef46cd9..acd1f71 100644
--- a/components/checkbox/__tests__/index.test.tsx
+++ b/components/checkbox/__tests__/index.test.tsx
@@ -10,6 +10,19 @@ describe('Checkbox', () => {
     expect(rendered).toMatchSnapshot()
   })
 
+  it('should work correctly with different sizes', () => {
+    const wrapper = mount(
+      <div>
+        <Checkbox size="mini">mini</Checkbox>
+        <Checkbox size="small">small</Checkbox>
+        <Checkbox size="medium">medium</Checkbox>
+        <Checkbox size="large">large</Checkbox>
+      </div>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should work correctly with initial value', () => {
     let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
     let input = wrapper.find('input').getDOMNode()
diff --git a/pages/en-us/components/checkbox.mdx b/pages/en-us/components/checkbox.mdx
index 79244f9..6e13c02 100644
--- a/pages/en-us/components/checkbox.mdx
+++ b/pages/en-us/components/checkbox.mdx
@@ -10,7 +10,6 @@ export const meta = {
 
 Displays a boolean value.
 
-
 <Playground
   desc="Change state with `checked` props."
   scope={{ Checkbox }}
@@ -18,6 +17,22 @@ Displays a boolean value.
   <Checkbox checked={true}>Sydney</Checkbox>
 `} />
 
+<Playground
+  title="sizes"
+  desc="Checkbox of different sizes."
+  scope={{ Checkbox, Spacer }}
+  code={`
+<>
+  <Checkbox checked={true} size="mini">mini</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="small">small</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="medium">medium</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="large">large</Checkbox>
+</>
+`} />
+
 <Playground
   title="disable"
   scope={{ Checkbox, Spacer }}
@@ -59,6 +74,7 @@ Displays a boolean value.
 | **onChange** | change event handler | `CheckboxEvent` | - | - |
 | **value** | unique identification value (only in group) | `string` | - | - |
 | **disabled** | disable checkbox | `boolean` | - | `false` |
+| **size** | checkbox size | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
 | ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
 
 <Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +84,14 @@ Displays a boolean value.
 | **value** | checked children | `Array<string>` | - | `[]` |
 | **disabled** | disable checkbox group | `boolean` | - | `false` |
 | **onChange** | change event handler | `(values: string[]) => void` | - | - |
-| ... | native props | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
+| **size** | size of all checkboxes in the group | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
+| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>NormalSizes</Attributes.Title>
+
+```ts
+type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
+```
 
 <Attributes.Title>CheckboxEvent</Attributes.Title>
 
diff --git a/pages/zh-cn/components/checkbox.mdx b/pages/zh-cn/components/checkbox.mdx
index 5773ee7..12bf793 100644
--- a/pages/zh-cn/components/checkbox.mdx
+++ b/pages/zh-cn/components/checkbox.mdx
@@ -18,6 +18,22 @@ export const meta = {
   <Checkbox initialChecked={true}>墨西哥</Checkbox>
 `} />
 
+<Playground
+  title="大小"
+  desc="不同大小的复选框。"
+  scope={{ Checkbox, Spacer }}
+  code={`
+<>
+  <Checkbox checked={true} size="mini">最小</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="small">较小</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="medium">中等</Checkbox>
+  <Spacer y={.5} />
+  <Checkbox checked={true} size="large">最大</Checkbox>
+</>
+`} />
+
 <Playground
   title="禁用的"
   scope={{ Checkbox, Spacer }}
@@ -59,6 +75,7 @@ export const meta = {
 | **onChange** | 复选框的变化事件 | `CheckboxEvent` | - | - |
 | **value** | 唯一的鉴别值 (仅在组内可用) | `string` | - | - |
 | **disabled** | 禁用复选框 | `boolean` | - | `false` |
+| **size** | 复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
 | ... | 原生属性 | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
 
 <Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +85,14 @@ export const meta = {
 | **value** | 选中的一组值 | `Array<string>` | - | `[]` |
 | **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` |
 | **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - |
-| ... | 原生属性 | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
+| **size** | 组内所有复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>NormalSizes</Attributes.Title>
+
+```ts
+type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
+```
 
 <Attributes.Title>CheckboxEvent</Attributes.Title>