diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
index 8869eb1..48a20db 100644
--- a/components/radio/__tests__/__snapshots__/group.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Radio Group should render correctly 1`] = `
-"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\">1</span><span class=\\"point\\"></span></label><style>
+"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -17,34 +17,36 @@ exports[`Radio Group should render correctly 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -52,71 +54,81 @@ exports[`Radio Group should render correctly 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
-          transform: scale(1);
-          transition: all 0.2s ease;
-          background-color: #000;
-        }
-      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\">2</span><span class=\\"point\\"></span></label><style>
-        input {
-          opacity: 0;
-          visibility: hidden;
-          overflow: hidden;
-          width: 1px;
-          height: 1px;
-          top: -1000px;
-          right: -1000px;
-          position: fixed;
-        }
-
-        .radio {
-          display: flex;
-          width: initial;
-          align-items: flex-start;
-          line-height: 1.5rem;
-          position: relative;
-        }
-
-        label {
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          margin-left: 1.375rem;
-          color: #000;
-          cursor: pointer;
-        }
-
-        .name {
-          font-size: 1rem;
-          font-weight: bold;
-          user-select: none;
-        }
-
-        .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
-          border: 1px solid #eaeaea;
-          transition: all 0.2s ease 0s;
-        }
-
-        .point:before {
-          content: '';
-          position: absolute;
-          left: -1px;
-          top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\"><span class=\\"point \\"></span>2</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: 1rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
       </style></div></div><style>
         .radio-group {
           display: flex;
@@ -124,14 +136,14 @@ exports[`Radio Group should render correctly 1`] = `
         }
 
         .radio-group :global(.radio) {
-          margin-top: 16pt;
+          margin-top: calc(1rem * 1);
           margin-left: 0;
         }
 
         .radio-group :global(.radio:first-of-type) {
           margin: 0;
         }
-      </style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\">1</span><span class=\\"point\\"></span></label><style>
+      </style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -147,34 +159,36 @@ exports[`Radio Group should render correctly 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -182,71 +196,81 @@ exports[`Radio Group should render correctly 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
-          transform: scale(1);
-          transition: all 0.2s ease;
-          background-color: #000;
-        }
-      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\">2</span><span class=\\"point\\"></span></label><style>
-        input {
-          opacity: 0;
-          visibility: hidden;
-          overflow: hidden;
-          width: 1px;
-          height: 1px;
-          top: -1000px;
-          right: -1000px;
-          position: fixed;
-        }
-
-        .radio {
-          display: flex;
-          width: initial;
-          align-items: flex-start;
-          line-height: 1.5rem;
-          position: relative;
-        }
-
-        label {
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          margin-left: 1.375rem;
-          color: #000;
-          cursor: pointer;
-        }
-
-        .name {
-          font-size: 1rem;
-          font-weight: bold;
-          user-select: none;
-        }
-
-        .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
-          border: 1px solid #eaeaea;
-          transition: all 0.2s ease 0s;
-        }
-
-        .point:before {
-          content: '';
-          position: absolute;
-          left: -1px;
-          top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\"><span class=\\"point \\"></span>2</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: 1rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
       </style></div></div><style>
         .radio-group {
           display: flex;
@@ -255,7 +279,245 @@ exports[`Radio Group should render correctly 1`] = `
 
         .radio-group :global(.radio) {
           margin-top: 0;
-          margin-left: 16pt;
+          margin-left: calc(1rem * 1);
+        }
+
+        .radio-group :global(.radio:first-of-type) {
+          margin: 0;
+        }
+      </style></div>"
+`;
+
+exports[`Radio Group should work correctly with different sizes 1`] = `
+"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: .75rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div></div><style>
+        .radio-group {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .radio-group :global(.radio) {
+          margin-top: calc(.75rem * 1);
+          margin-left: 0;
+        }
+
+        .radio-group :global(.radio:first-of-type) {
+          margin: 0;
+        }
+      </style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: .875rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div></div><style>
+        .radio-group {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .radio-group :global(.radio) {
+          margin-top: calc(.875rem * 1);
+          margin-left: 0;
+        }
+
+        .radio-group :global(.radio:first-of-type) {
+          margin: 0;
+        }
+      </style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: 1.125rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div></div><style>
+        .radio-group {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .radio-group :global(.radio) {
+          margin-top: calc(1.125rem * 1);
+          margin-left: 0;
         }
 
         .radio-group :global(.radio:first-of-type) {
diff --git a/components/radio/__tests__/__snapshots__/index.test.tsx.snap b/components/radio/__tests__/__snapshots__/index.test.tsx.snap
index 1788281..67afba7 100644
--- a/components/radio/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Radio should render correctly 1`] = `
-"<div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option</span><span class=\\"point\\"></span></label><style>
+"<div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -17,34 +17,36 @@ exports[`Radio should render correctly 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -52,18 +54,22 @@ exports[`Radio should render correctly 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
       </style></div>"
 `;
 
 exports[`Radio should support react-node in description 1`] = `
-"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option</span><span class=\\"point\\"></span></label><style>
+"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -79,34 +85,36 @@ exports[`Radio should support react-node in description 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -114,19 +122,24 @@ exports[`Radio should support react-node in description 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
-      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option 1</span><span class=\\"\\">Description for Option1<style>
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\">Description for Option1<style>
         span {
           color: #999;
-          font-size: 0.875rem;
+          font-size: calc(var(--radio-size) * 0.85);
+          padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
         }
-      </style></span><span class=\\"point\\"></span></label><style>
+      </style></span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -142,34 +155,36 @@ exports[`Radio should support react-node in description 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -177,19 +192,24 @@ exports[`Radio should support react-node in description 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
-      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option 1</span><span class=\\"\\"><b>Description</b> for Option1<style>
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\"><b>Description</b> for Option1<style>
         span {
           color: #999;
-          font-size: 0.875rem;
+          font-size: calc(var(--radio-size) * 0.85);
+          padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
         }
-      </style></span><span class=\\"point\\"></span></label><style>
+      </style></span></label><style>
         input {
           opacity: 0;
           visibility: hidden;
@@ -205,34 +225,36 @@ exports[`Radio should support react-node in description 1`] = `
           display: flex;
           width: initial;
           align-items: flex-start;
-          line-height: 1.5rem;
           position: relative;
+          --radio-size: 1rem;
         }
 
         label {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
-          margin-left: 1.375rem;
           color: #000;
           cursor: pointer;
         }
 
         .name {
-          font-size: 1rem;
+          font-size: var(--radio-size);
           font-weight: bold;
           user-select: none;
+          display: inline-flex;
+          align-items: center;
         }
 
         .point {
-          position: absolute;
-          left: 0;
-          top: 6px;
-          height: 0.875rem;
-          width: 0.875rem;
+          height: var(--radio-size);
+          width: var(--radio-size);
           border-radius: 50%;
           border: 1px solid #eaeaea;
           transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
         }
 
         .point:before {
@@ -240,12 +262,276 @@ exports[`Radio should support react-node in description 1`] = `
           position: absolute;
           left: -1px;
           top: -1px;
-          height: 0.875rem;
-          width: 0.875rem;
-          border-radius: 50%;
           transform: scale(0);
-          transition: all 0.2s ease;
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
           background-color: #000;
         }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div></div>"
+`;
+
+exports[`Radio should work correctly with different sizes 1`] = `
+"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>mini</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: .75rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>small</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: .875rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>medium</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: 1rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
+      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>large</span></label><style>
+        input {
+          opacity: 0;
+          visibility: hidden;
+          overflow: hidden;
+          width: 1px;
+          height: 1px;
+          top: -1000px;
+          right: -1000px;
+          position: fixed;
+        }
+
+        .radio {
+          display: flex;
+          width: initial;
+          align-items: flex-start;
+          position: relative;
+          --radio-size: 1.125rem;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          color: #000;
+          cursor: pointer;
+        }
+
+        .name {
+          font-size: var(--radio-size);
+          font-weight: bold;
+          user-select: none;
+          display: inline-flex;
+          align-items: center;
+        }
+
+        .point {
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          border: 1px solid #eaeaea;
+          transition: all 0.2s ease 0s;
+          position: relative;
+          display: inline-block;
+          transform: scale(0.875);
+          margin-right: calc(var(--radio-size) * 0.375);
+        }
+
+        .point:before {
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          transform: scale(0);
+          height: var(--radio-size);
+          width: var(--radio-size);
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        .point.active:before {
+          transform: scale(0.875);
+          transition: all 0.2s ease 0s;
+        }
       </style></div></div>"
 `;
diff --git a/components/radio/__tests__/group.test.tsx b/components/radio/__tests__/group.test.tsx
index 8febedb..9cb15c5 100644
--- a/components/radio/__tests__/group.test.tsx
+++ b/components/radio/__tests__/group.test.tsx
@@ -21,6 +21,24 @@ describe('Radio Group', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work correctly with different sizes', () => {
+    const wrapper = mount(
+      <div>
+        <Radio.Group value="1" size="mini">
+          <Radio value="1">1</Radio>
+        </Radio.Group>
+        <Radio.Group value="1" size="small">
+          <Radio value="1">1</Radio>
+        </Radio.Group>
+        <Radio.Group value="1" size="large">
+          <Radio value="1">1</Radio>
+        </Radio.Group>
+      </div>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should trigger events in group', () => {
     let value = ''
     const changeHandler = jest.fn().mockImplementation(val => (value = val))
diff --git a/components/radio/__tests__/index.test.tsx b/components/radio/__tests__/index.test.tsx
index 535c8f8..9ab0375 100644
--- a/components/radio/__tests__/index.test.tsx
+++ b/components/radio/__tests__/index.test.tsx
@@ -10,6 +10,19 @@ describe('Radio', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work correctly with different sizes', () => {
+    const wrapper = mount(
+      <div>
+        <Radio size="mini">mini</Radio>
+        <Radio size="small">small</Radio>
+        <Radio size="medium">medium</Radio>
+        <Radio size="large">large</Radio>
+      </div>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should render correctly with checked prop', () => {
     const wrapper = mount(<Radio>Option</Radio>)
     wrapper.setProps({ checked: false })