diff --git a/.changeset/heavy-badgers-care.md b/.changeset/heavy-badgers-care.md
index ec3770ef429..edad15836e9 100644
--- a/.changeset/heavy-badgers-care.md
+++ b/.changeset/heavy-badgers-care.md
@@ -19,6 +19,24 @@ feat: Redesign all `Input` components
 - Redesigned UI
 - Add `size` prop
 
-### PasswordInput (https://github.com/razorpay/blade/pull/2050)
+### PasswordInput
 - Redesigned UI
 - Adds `size` prop
+
+### OTPInput
+- Redesigned UI
+- Add `size` prop
+
+### SelectInput
+- Redesigned UI
+- Add `size` prop
+
+### Autocomplete
+- Redesigned UI
+- Add `size` prop
+
+### Radio
+- Add `size` prop
+
+### Checkbox
+- Add `size` prop
diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
index 3e8d1837c6f..66d86b4f518 100644
--- a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -105,6 +105,13 @@ Small.args = {
   size: 'small',
 };
 
+export const Large = CheckboxTemplate.bind({});
+Large.storyName = 'Large';
+Large.args = {
+  size: 'large',
+  helpText: 'Checkbox help text',
+};
+
 export const Indeterminate = CheckboxTemplate.bind({});
 Indeterminate.storyName = 'Indeterminate';
 Indeterminate.args = {
diff --git a/packages/blade/src/components/Checkbox/Checkbox.tsx b/packages/blade/src/components/Checkbox/Checkbox.tsx
index a27ffee2595..5abe8b90094 100644
--- a/packages/blade/src/components/Checkbox/Checkbox.tsx
+++ b/packages/blade/src/components/Checkbox/Checkbox.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';
 import { CheckboxIcon } from './CheckboxIcon';
 import { useCheckbox } from './useCheckbox';
-import { checkboxHoverTokens } from './checkboxTokens';
+import { checkboxHoverTokens, checkboxSizes } from './checkboxTokens';
 import isEmpty from '~utils/lodashButBetter/isEmpty';
 import isUndefined from '~utils/lodashButBetter/isUndefined';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
@@ -18,6 +19,7 @@ import { SelectorInput } from '~components/Form/Selector/SelectorInput';
 import type { BladeElementRef, TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import { makeSize, useTheme } from '~utils';
 
 type OnChange = ({
   isChecked,
@@ -101,7 +103,7 @@ type CheckboxProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   /**
    * Sets the tab-index property on checkbox element
    *
@@ -184,7 +186,12 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
   const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);
   const _size = groupProps.size ?? size;
-  const isSmall = _size === 'small';
+  const { theme } = useTheme();
+  const formHintSize = {
+    small: 'medium',
+    medium: 'medium',
+    large: 'large',
+  } as const;
 
   // only show error when the self validation is set to error
   // Since we don't want to show errorText inside the group
@@ -213,6 +220,9 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
     onChange: handleChange,
   });
 
+  // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2
+  const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);
+
   return (
     <BaseBox
       {...metaAttribute({ name: MetaConstants.Checkbox, testID })}
@@ -247,13 +257,16 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
             ) : null}
           </BaseBox>
           {showSupportingText ? (
-            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>
-              <SelectorSupportText id={ids?.helpTextId}>{helpText}</SelectorSupportText>
+            <BaseBox marginLeft={helpTextLeftSpacing}>
+              <SelectorSupportText size={_size} id={ids?.helpTextId}>
+                {helpText}
+              </SelectorSupportText>
             </BaseBox>
           ) : null}
         </BaseBox>
       </SelectorLabel>
       <FormHint
+        size={formHintSize[_size]}
         errorText={errorText}
         errorTextId={ids?.errorTextId}
         type={validationState === 'error' ? 'error' : 'help'}
diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
index 4f84db5e992..799e45b6911 100644
--- a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -141,6 +141,12 @@ Small.args = {
   size: 'small',
 };
 
+export const Large = CheckboxGroupTemplate.bind({});
+Large.storyName = 'Large';
+Large.args = {
+  size: 'large',
+};
+
 export const LabelPositionLeft = CheckboxGroupTemplate.bind({});
 LabelPositionLeft.storyName = 'LabelPositionLeft';
 LabelPositionLeft.args = {
diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx
index 0a406b99a82..f2a2a33c9c4 100644
--- a/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx
@@ -87,7 +87,7 @@ type CheckboxGroupProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
 } & TestID &
   StyledPropsBlade;
 
@@ -146,6 +146,7 @@ const CheckboxGroup = ({
               position={labelPosition}
               id={ids.labelId}
               accessibilityText={accessibilityText}
+              size={size}
             >
               {label}
             </FormLabel>
@@ -164,6 +165,7 @@ const CheckboxGroup = ({
               })}
             </BaseBox>
             <FormHint
+              size={size}
               errorText={errorText}
               helpText={helpText}
               type={validationState === 'error' ? 'error' : 'help'}
diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
index 588a92a35cc..de76e0c9979 100644
--- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
@@ -20,9 +20,13 @@ const svgSize = {
     width: size[12],
     height: size[12],
   },
+  large: {
+    width: size[16],
+    height: size[16],
+  },
 };
 
-const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {
+const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => {
   const width = makeSpace(svgSize[size].width);
   const height = makeSpace(svgSize[size].height);
 
@@ -42,7 +46,13 @@ const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium'
   );
 };
 
-const IndeterminateIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {
+const IndeterminateIcon = ({
+  color,
+  size,
+}: {
+  color: string;
+  size: 'small' | 'medium' | 'large';
+}) => {
   const width = makeSpace(svgSize[size].width);
   const height = makeSpace(svgSize[size].height);
 
@@ -67,7 +77,7 @@ export type CheckboxIconProps = {
   isNegative?: boolean;
   isChecked?: boolean;
   isIndeterminate?: boolean;
-  size: 'small' | 'medium';
+  size: 'small' | 'medium' | 'large';
 };
 
 const CheckboxIcon = ({
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
index a83517d11db..949b840c06c 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
@@ -348,7 +348,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
     }
   >
     <View
-      accessibilityErrorMessage="checkbox-19-errortext-21"
+      accessibilityErrorMessage="checkbox-25-errortext-27"
       accessibilityInvalid={true}
       accessibilityRequired={false}
       accessibilityRole="checkbox"
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
index 885f1e1b696..0d40390aaa4 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
@@ -649,7 +649,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           <input
             aria-checked="false"
             aria-disabled="false"
-            aria-errormessage="checkbox-19-errortext-21"
+            aria-errormessage="checkbox-25-errortext-27"
             aria-invalid="true"
             aria-required="false"
             class="c3"
@@ -708,7 +708,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
     <div
       class="c8"
       data-blade-component="base-box"
-      id="checkbox-19-errortext-21"
+      id="checkbox-25-errortext-27"
     >
       <span
         class="c9"
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
index 8497d2b2f86..07512570eca 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
@@ -190,7 +190,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -357,7 +357,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -883,7 +883,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -1050,7 +1050,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
index c49d1cb640f..067464c4a21 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="checkbox-group-undefined-label-undefined" data-blade-component="checkbox-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="checkbox-group-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Invalid selection </p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="apple"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="mango"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="orange"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Invalid selection</span></span></div></div></div></div></div>"`;
+exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="checkbox-group-undefined-label-undefined" data-blade-component="checkbox-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:0px" id="checkbox-group-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Invalid selection </p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="apple"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="mango"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="orange"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Invalid selection</span></span></div></div></div></div></div>"`;
 
 exports[`<CheckboxGroup /> should render errorText when validationState is set to error 2`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -30,7 +30,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   border-color: hsla(4,74%,49%,1);
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   -webkit-animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
   animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
 }
@@ -68,7 +68,11 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -78,19 +82,19 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   flex-direction: row;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   margin-left: 4px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   margin-bottom: 0px;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   margin-top: 4px;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -104,7 +108,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   align-items: center;
 }
 
-.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17 {
   margin-right: 4px;
 }
 
@@ -147,7 +151,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -164,7 +168,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   padding: 0;
 }
 
-.c17.c17.c17.c17.c17 {
+.c18.c18.c18.c18.c18 {
   color: hsla(4,74%,49%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -198,7 +202,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   word-wrap: normal;
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -207,7 +211,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   margin-bottom: 2px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -224,7 +228,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -251,7 +255,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
       <span
         data-blade-component="form-label"
         id="checkbox-group-19-label-24"
-        style="width:auto;flex-shrink:0;margin-right:16px"
+        style="width:auto;flex-shrink:0;margin-right:0px"
       >
         <div
           class="c1"
@@ -290,7 +294,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -298,7 +302,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -306,7 +310,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -315,13 +319,13 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       aria-errormessage="checkbox-1-errortext-3"
                       aria-invalid="true"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -351,16 +355,16 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity:0;position:absolute;display:flex"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Apple
@@ -371,7 +375,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -379,7 +383,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -387,7 +391,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -396,13 +400,13 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       aria-errormessage="checkbox-7-errortext-9"
                       aria-invalid="true"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -432,16 +436,16 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity:0;position:absolute;display:flex"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Mango
@@ -452,7 +456,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
             </div>
           </div>
           <div
-            class="c13"
+            class="c14"
             data-blade-component="base-box"
           >
             <div
@@ -460,7 +464,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -468,7 +472,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -477,13 +481,13 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       aria-errormessage="checkbox-13-errortext-15"
                       aria-invalid="true"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -513,16 +517,16 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity:0;position:absolute;display:flex"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Orange
@@ -534,11 +538,11 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
           </div>
         </div>
         <div
-          class="c14"
+          class="c15"
           data-blade-component="base-box"
         >
           <span
-            class="c15"
+            class="c16"
             data-blade-component="base-box"
             style="word-break:break-all"
           >
@@ -570,11 +574,11 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
               />
             </svg>
             <div
-              class="c16"
+              class="c17"
               data-blade-component="base-box"
             />
             <span
-              class="c17"
+              class="c18"
               data-blade-component="text"
             >
               Invalid selection
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
index 786febb0076..3112fbc978e 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CheckboxGroup /> should render with help text 1`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -28,7 +28,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   border-color: hsla(211,27%,76%,1);
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   -webkit-animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
   animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
 }
@@ -66,7 +66,11 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -76,19 +80,19 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   flex-direction: row;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   margin-left: 4px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   margin-bottom: 0px;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   margin-top: 4px;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -141,7 +145,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -158,7 +162,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   padding: 0;
 }
 
-.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -192,7 +196,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   word-wrap: normal;
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,7 +205,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   margin-bottom: 2px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -218,7 +222,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -229,7 +233,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -252,7 +256,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
       <span
         data-blade-component="form-label"
         id="checkbox-group-49-label-54"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -291,7 +295,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -299,7 +303,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -307,7 +311,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -315,13 +319,13 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -351,16 +355,16 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Apple
@@ -371,7 +375,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -379,7 +383,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -387,7 +391,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -395,13 +399,13 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -431,16 +435,16 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Mango
@@ -451,7 +455,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
             </div>
           </div>
           <div
-            class="c13"
+            class="c14"
             data-blade-component="base-box"
           >
             <div
@@ -459,7 +463,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -467,7 +471,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -475,13 +479,13 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -511,16 +515,16 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Orange
@@ -532,16 +536,16 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
           </div>
         </div>
         <div
-          class="c14"
+          class="c15"
           data-blade-component="base-box"
         >
           <span
-            class="c15"
+            class="c16"
             data-blade-component="base-box"
             style="word-break: break-all;"
           >
             <span
-              class="c16"
+              class="c17"
               data-blade-component="text"
             >
               Select one
@@ -555,7 +559,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
 `;
 
 exports[`<CheckboxGroup /> should render with label 1`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -582,7 +586,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   border-color: hsla(211,27%,76%,1);
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   -webkit-animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
   animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1);
 }
@@ -620,7 +624,11 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -630,11 +638,11 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   flex-direction: row;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   margin-left: 4px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   margin-bottom: 0px;
 }
 
@@ -677,7 +685,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -711,7 +719,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   word-wrap: normal;
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -720,7 +728,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   margin-bottom: 2px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -737,7 +745,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -748,7 +756,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -771,7 +779,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
       <span
         data-blade-component="form-label"
         id="checkbox-group-19-label-24"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -810,7 +818,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -818,7 +826,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -826,7 +834,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -834,13 +842,13 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -870,16 +878,16 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Apple
@@ -890,7 +898,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -898,7 +906,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -906,7 +914,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -914,13 +922,13 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -950,16 +958,16 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Mango
@@ -970,7 +978,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             </div>
           </div>
           <div
-            class="c13"
+            class="c14"
             data-blade-component="base-box"
           >
             <div
@@ -978,7 +986,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
               data-blade-component="checkbox"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="checkbox-label"
               >
                 <div
@@ -986,7 +994,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -994,13 +1002,13 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       role="checkbox"
                       type="checkbox"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="checkbox-icon-wrapper"
                     >
                       <div
@@ -1030,16 +1038,16 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="c10"
+                        class="c11"
                         style="opacity: 0; position: absolute; display: flex;"
                       />
                     </div>
                     <div
-                      class="c11"
+                      class="c12"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c12"
+                      class="c13"
                       data-blade-component="text"
                     >
                       Orange
diff --git a/packages/blade/src/components/Checkbox/checkboxTokens.ts b/packages/blade/src/components/Checkbox/checkboxTokens.ts
index f5ad3f966db..4ad333e3357 100644
--- a/packages/blade/src/components/Checkbox/checkboxTokens.ts
+++ b/packages/blade/src/components/Checkbox/checkboxTokens.ts
@@ -7,13 +7,17 @@ const checkboxSizes = {
   group: {
     gap: {
       small: {
-        mobile: 'spacing.2',
-        desktop: 'spacing.0',
-      },
-      medium: {
         mobile: 'spacing.3',
         desktop: 'spacing.2',
       },
+      medium: {
+        mobile: 'spacing.4',
+        desktop: 'spacing.3',
+      },
+      large: {
+        mobile: 'spacing.5',
+        desktop: 'spacing.4',
+      },
     },
   },
   icon: {
@@ -25,6 +29,10 @@ const checkboxSizes = {
       width: size[16],
       height: size[16],
     },
+    large: {
+      width: size[20],
+      height: size[20],
+    },
   },
 } as const;
 
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
index 0c3d2e597dc..22dd9e55541 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  gSCKJx hZVkky"><div class="BaseBox-bmPWx BaseInputTagSlotweb__TagSlotContainer-sc-1bt1h3t-0 eRtEHm dUNBKx tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 jLxJaB"><p class="StyledBaseText-dVBfTO ghYpXL" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Recent Searches</p></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  eqjJNO"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO bMqWId" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO bMqWId" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  gSCKJx hZVkky"><div class="BaseBox-bmPWx BaseInputTagSlotweb__TagSlotContainer-sc-1bt1h3t-0 eRtEHm dUNBKx tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 jLxJaB"><p class="StyledBaseText-dVBfTO ghYpXL" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Recent Searches</p></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  eqjJNO"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO bMqWId" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO bMqWId" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> should render dropdown and make it visible on click 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -923,7 +923,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
                 data-blade-component="form-label"
                 for="dropdown-7-trigger-1-input-2"
                 id="dropdown-7-label"
-                style="width:auto;flex-shrink:0;margin-right:16px"
+                style="width:auto;flex-shrink:0;margin-right:0px"
               >
                 <div
                   class="c5"
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
index 323bd75e74a..c5f78570429 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
@@ -919,7 +919,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
                 data-blade-component="form-label"
                 for="dropdown-7-trigger-1-input-2"
                 id="dropdown-7-label"
-                style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                style="width: auto; flex-shrink: 0; margin-right: 0px;"
               >
                 <div
                   class="c5"
@@ -2064,7 +2064,7 @@ exports[`<Dropdown /> should render dropdown with large size select input 1`] =
                 data-blade-component="form-label"
                 for="dropdown-55-trigger-56-input-57"
                 id="dropdown-55-label"
-                style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                style="width: auto; flex-shrink: 0; margin-right: 0px;"
               >
                 <div
                   class="c5"
diff --git a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.ssr.test.tsx.snap b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.ssr.test.tsx.snap
index 4cc224c2691..2adf47f53f4 100644
--- a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.ssr.test.tsx.snap
+++ b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FileUpload /> should render in SSR 1`] = `"<div id="root"><div data-blade-component="file-upload" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><span style="width:auto;flex-shrink:0;margin-right:16px" id="fileuploadinput-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Upload GST certificate</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">, Upload .jpg, .jpeg, or .png file only</p></div></div></div></span><label style="cursor:pointer" data-blade-component="file-upload-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx bVySqA"><div data-comp="f" data-blade-component="base-box" class="BaseBox-bmPWx StyledFileUploadWrapper-sc-1wln1sx-0 guVuJK vjymx"><div data-blade-component="box" class="BaseBox-bmPWx cSvwKg"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Drag files here or<!-- --> </p><input id="fileuploadinput-undefined-input-undefined" name="single-file-upload-input" type="file" accept="image/*" aria-required="false" aria-invalid="false" aria-disabled="false" aria-describedby="fileuploadinput-undefined-label-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 Frznr"/><div data-blade-component="box" class="BaseBox-bmPWx gTlwBH"><div data-blade-component="box" class="BaseBox-bmPWx jTWYOz"><p class="StyledBaseText-dVBfTO eRPBEA" data-blade-component="text">Upload</p></div></div></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx eSTmVF"><div data-blade-component="base-box" class="BaseBox-bmPWx xgVLl"><div id="fileuploadinput-undefined-helptext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Upload .jpg, .jpeg, or .png file only</span></span></div></div></div></div></div>"`;
+exports[`<FileUpload /> should render in SSR 1`] = `"<div id="root"><div data-blade-component="file-upload" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><span style="width:auto;flex-shrink:0;margin-right:0px" id="fileuploadinput-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Upload GST certificate</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">, Upload .jpg, .jpeg, or .png file only</p></div></div></div></span><label style="cursor:pointer" data-blade-component="file-upload-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx bVySqA"><div data-comp="f" data-blade-component="base-box" class="BaseBox-bmPWx StyledFileUploadWrapper-sc-1wln1sx-0 guVuJK vjymx"><div data-blade-component="box" class="BaseBox-bmPWx cSvwKg"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Drag files here or<!-- --> </p><input id="fileuploadinput-undefined-input-undefined" name="single-file-upload-input" type="file" accept="image/*" aria-required="false" aria-invalid="false" aria-disabled="false" aria-describedby="fileuploadinput-undefined-label-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 Frznr"/><div data-blade-component="box" class="BaseBox-bmPWx gTlwBH"><div data-blade-component="box" class="BaseBox-bmPWx jTWYOz"><p class="StyledBaseText-dVBfTO eRPBEA" data-blade-component="text">Upload</p></div></div></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx eSTmVF"><div data-blade-component="base-box" class="BaseBox-bmPWx xgVLl"><div id="fileuploadinput-undefined-helptext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Upload .jpg, .jpeg, or .png file only</span></span></div></div></div></div></div>"`;
 
 exports[`<FileUpload /> should render in SSR 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -437,7 +437,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
       <span
         data-blade-component="form-label"
         id="fileuploadinput-1-label-6"
-        style="width:auto;flex-shrink:0;margin-right:16px"
+        style="width:auto;flex-shrink:0;margin-right:0px"
       >
         <div
           class="c2"
diff --git a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
index 38572c930a6..cf6a65ca09b 100644
--- a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
+++ b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
@@ -433,7 +433,7 @@ exports[`<FileUpload /> should render FileUpload 1`] = `
       <span
         data-blade-component="form-label"
         id="fileuploadinput-1-label-6"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c2"
@@ -972,7 +972,7 @@ exports[`<FileUpload /> should set disabled state with isDisabled 1`] = `
       <span
         data-blade-component="form-label"
         id="fileuploadinput-13-label-18"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c2"
diff --git a/packages/blade/src/components/Form/FormHint.tsx b/packages/blade/src/components/Form/FormHint.tsx
index 2f44808db2d..bc4a3c58f9a 100644
--- a/packages/blade/src/components/Form/FormHint.tsx
+++ b/packages/blade/src/components/Form/FormHint.tsx
@@ -14,7 +14,7 @@ type HintTextProps = {
   children: string;
   id?: string;
   color: TextProps<{ variant: 'caption' }>['color'];
-  size: 'medium' | 'large';
+  size: 'small' | 'medium' | 'large';
 };
 
 const HintText = ({ icon: Icon, children, id, color, size }: HintTextProps): ReactElement => {
@@ -74,17 +74,17 @@ export type FormHintProps = {
    * Sets the size of the hint
    * @default medium
    */
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 };
 
 const Icons = {
-  error: ({ size }: { size: 'medium' | 'large' }): ReactElement => (
+  error: ({ size }: { size: 'small' | 'medium' | 'large' }): ReactElement => (
     <>
       <InfoIcon color="feedback.icon.negative.intense" size={hintIconSize[size]} />
       <BaseBox marginRight="spacing.2" />
     </>
   ),
-  success: ({ size }: { size: 'medium' | 'large' }): ReactElement => (
+  success: ({ size }: { size: 'small' | 'medium' | 'large' }): ReactElement => (
     <>
       <CheckIcon color="feedback.icon.positive.intense" size={hintIconSize[size]} />
       <BaseBox marginRight="spacing.2" />
diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx
index efd7815de58..129e9d4957e 100644
--- a/packages/blade/src/components/Form/FormLabel.tsx
+++ b/packages/blade/src/components/Form/FormLabel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  labelLeftMarginRight,
   labelMarginBottom,
   labelOptionalIndicatorTextSize,
   labelTextSize,
@@ -13,6 +14,7 @@ import BaseBox from '~components/Box/BaseBox';
 import { useTheme } from '~components/BladeProvider';
 import { makeSpace } from '~utils/makeSpace';
 import { size as sizeToken } from '~tokens/global';
+import getIn from '~utils/lodashButBetter/get';
 
 type CommonProps = {
   as: 'span' | 'label';
@@ -25,7 +27,7 @@ type CommonProps = {
    * Sets the size of the label
    * @default medium
    */
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 };
 
 type LabelProps = CommonProps & {
@@ -148,7 +150,9 @@ const FormLabel = ({
       style={{
         width,
         flexShrink: 0,
-        marginRight: makeSpace(theme.spacing[5]),
+        marginRight: isLabelLeftPositioned
+          ? makeSpace(getIn(theme, labelLeftMarginRight[size]))
+          : makeSpace(getIn(theme, 'spacing.0')),
       }}
       id={id}
       {...metaAttribute({ name: MetaConstants.FormLabel })}
diff --git a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
index f83fb44b337..3953e599ef9 100644
--- a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
+++ b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
@@ -6,18 +6,25 @@ const SelectorSupportText = ({
   children,
   id,
   isNegative,
+  size,
 }: {
   children: React.ReactNode;
   id?: string;
   isNegative?: boolean;
+  size: 'small' | 'medium' | 'large';
 }): React.ReactElement => {
   const isReactNative = getPlatformType() === 'react-native';
+  const sizeMapping = {
+    small: 'small',
+    medium: 'small',
+    large: 'medium',
+  } as const;
 
   return (
     <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>
       <Text
         variant="caption"
-        size="small"
+        size={sizeMapping[size]}
         as={isReactNative ? undefined : 'span'}
         color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}
       >
diff --git a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
index b06cf55c6c9..1ce2db3baa0 100644
--- a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
+++ b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
@@ -8,7 +8,7 @@ const SelectorTitle = ({
 }: {
   children: React.ReactNode;
   isDisabled?: boolean;
-  size: 'small' | 'medium';
+  size: 'small' | 'medium' | 'large';
 }): React.ReactElement => {
   return (
     <>
diff --git a/packages/blade/src/components/Form/formTokens.ts b/packages/blade/src/components/Form/formTokens.ts
index 2f359180f39..e8b9913b807 100644
--- a/packages/blade/src/components/Form/formTokens.ts
+++ b/packages/blade/src/components/Form/formTokens.ts
@@ -2,45 +2,59 @@ import { size } from '~tokens/global';
 
 const labelTextSize = {
   top: {
+    small: 'small',
     medium: 'small',
     large: 'medium',
   },
   left: {
+    small: 'medium',
     medium: 'medium',
     large: 'large',
   },
 } as const;
 
 const labelOptionalIndicatorTextSize = {
+  small: 'small',
   medium: 'small',
   large: 'medium',
 } as const;
 
 const hintTextSize = {
+  small: 'small',
   medium: 'small',
   large: 'medium',
 } as const;
 
 const hintIconSize = {
+  small: 'small',
   medium: 'small',
   large: 'medium',
 } as const;
 
 const hintMarginTop = {
+  small: 'spacing.2',
   medium: 'spacing.2',
   large: 'spacing.3',
 } as const;
 
 const labelMarginBottom = {
+  small: 'spacing.2',
   medium: 'spacing.2',
   large: 'spacing.3',
 } as const;
 
 const labelWidth = {
+  small: size[120],
   medium: size[120],
   large: size[176],
 } as const;
 
+const labelLeftMarginRight = {
+  small: 'spacing.3',
+  medium: 'spacing.4',
+  large: 'spacing.5',
+} as const;
+
 export {
   labelTextSize,
   labelOptionalIndicatorTextSize,
@@ -49,4 +63,5 @@ export {
   hintMarginTop,
   labelMarginBottom,
   labelWidth,
+  labelLeftMarginRight,
 };
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
index b57c8164bd7..4f9a4612212 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kjPsHx"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ickwiI"/></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="name-undefined-successtext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(150, 100%, 27%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO jnVJao" data-blade-component="text">Success</span></span></div></div></div></div></div>"`;
+exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kjPsHx"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ickwiI"/></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="name-undefined-successtext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(150, 100%, 27%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO jnVJao" data-blade-component="text">Success</span></span></div></div></div></div></div>"`;
 
 exports[`<BaseInput /> should display success validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -379,7 +379,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
         <label
           data-blade-component="form-label"
           for="name-1-input-2"
-          style="width:auto;flex-shrink:0;margin-right:16px"
+          style="width:auto;flex-shrink:0;margin-right:0px"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
index db3cc3107c8..89c64c89a6b 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
@@ -336,7 +336,7 @@ exports[`<BaseInput /> should render 1`] = `
         <label
           data-blade-component="form-label"
           for="name-1-input-2"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -769,7 +769,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
         <label
           data-blade-component="form-label"
           for="name-73-input-74"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -1301,7 +1301,7 @@ exports[`<BaseInput /> should render with large size input 1`] = `
         <label
           data-blade-component="form-label"
           for="name-91-input-92"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -1896,7 +1896,7 @@ exports[`<BaseInput /> should render with trailingButton 1`] = `
         <label
           data-blade-component="form-label"
           for="coupon-109-input-110"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
index 91ae56a32c4..a8bce825437 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="autocomplete" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  gSCKJx hZVkky"><div class="BaseBox-bmPWx BaseInputTagSlotweb__TagSlotContainer-sc-1bt1h3t-0 eRtEHm dUNBKx tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><input type="text" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gVAXNU" value=""/></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Recent Searches</p></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx eVNphd"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><p class="StyledBaseText-dVBfTO ggSUMO" data-blade-component="text">No Search Result Found</p><p class="StyledBaseText-dVBfTO etjBln" data-blade-component="text">Try searching for a different value</p></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="autocomplete" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  gSCKJx hZVkky"><div class="BaseBox-bmPWx BaseInputTagSlotweb__TagSlotContainer-sc-1bt1h3t-0 eRtEHm dUNBKx tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><input type="text" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gVAXNU" value=""/></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Recent Searches</p></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx eVNphd"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><p class="StyledBaseText-dVBfTO ggSUMO" data-blade-component="text">No Search Result Found</p><p class="StyledBaseText-dVBfTO etjBln" data-blade-component="text">Try searching for a different value</p></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -890,7 +890,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                 data-blade-component="form-label"
                 for="dropdown-7-trigger-1-input-2"
                 id="dropdown-7-label"
-                style="width:auto;flex-shrink:0;margin-right:16px"
+                style="width:auto;flex-shrink:0;margin-right:0px"
               >
                 <div
                   class="c4"
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
index f6f7642ba78..92e17b3a304 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
@@ -1295,7 +1295,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
                 data-blade-component="form-label"
                 for="dropdown-123"
                 id="dropdown-123-label"
-                style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                style="width: auto; flex-shrink: 0; margin-right: 0px;"
               >
                 <div
                   class="c5"
@@ -1539,7 +1539,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
                               data-blade-component="form-label"
                               for="dropdown-123"
                               id="dropdown-123-label"
-                              style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                              style="width: auto; flex-shrink: 0; margin-right: 0px;"
                             >
                               <div
                                 class="c5"
@@ -2484,7 +2484,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render autocomplete with larg
                 data-blade-component="form-label"
                 for="dropdown-123"
                 id="dropdown-123-label"
-                style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                style="width: auto; flex-shrink: 0; margin-right: 0px;"
               >
                 <div
                   class="c4"
@@ -3619,7 +3619,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                 data-blade-component="form-label"
                 for="dropdown-123"
                 id="dropdown-123-label"
-                style="width: auto; flex-shrink: 0; margin-right: 16px;"
+                style="width: auto; flex-shrink: 0; margin-right: 0px;"
               >
                 <div
                   class="c4"
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
index be054c843d2..d4407a6471e 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
+exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dXIqru" value=""/></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
 
 exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -346,7 +346,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
       <label
         data-blade-component="form-label"
         for="otp-37-input-38"
-        style="width:auto;flex-shrink:0;margin-right:16px"
+        style="width:auto;flex-shrink:0;margin-right:0px"
       >
         <div
           class="c1"
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
index 244b88990f4..9acaf3c8810 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
@@ -342,7 +342,7 @@ exports[`<OTPInput /> should render 1`] = `
       <label
         data-blade-component="form-label"
         for="otp-37-input-38"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -978,7 +978,7 @@ exports[`<OTPInput /> should render large size 1`] = `
       <label
         data-blade-component="form-label"
         for="otp-157-input-158"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
index 0c1b2421e55..2480ecfc457 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  hdbuAn"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ipdiP"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="password-field-undefined-errortext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Error</span></span></div></div></div></div></div>"`;
+exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  hdbuAn"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ipdiP"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="password-field-undefined-errortext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Error</span></span></div></div></div></div></div>"`;
 
 exports[`<PasswordInput /> should display error validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -458,7 +458,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
         <label
           data-blade-component="form-label"
           for="password-field-1-input-2"
-          style="width:auto;flex-shrink:0;margin-right:16px"
+          style="width:auto;flex-shrink:0;margin-right:0px"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
index 1437bbb41d4..06e9199d01c 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
@@ -415,7 +415,7 @@ exports[`<PasswordInput /> should render 1`] = `
         <label
           data-blade-component="form-label"
           for="password-field-1-input-2"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -937,7 +937,7 @@ exports[`<PasswordInput /> should render large size 1`] = `
         <label
           data-blade-component="form-label"
           for="password-field-19-input-20"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
index f40911440a1..8e7d07ad912 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kUOomV"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 hhNlqb"></textarea></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kUOomV"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 hhNlqb"></textarea></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextArea /> should render TextArea on server and have autofocus on client 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -346,7 +346,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
         <label
           data-blade-component="form-label"
           for="textarea-1-input-2"
-          style="width:auto;flex-shrink:0;margin-right:16px"
+          style="width:auto;flex-shrink:0;margin-right:0px"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
index 21d6fff4b31..9a613b84d7e 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
@@ -342,7 +342,7 @@ exports[`<TextArea /> should render 1`] = `
         <label
           data-blade-component="form-label"
           for="textarea-1-input-2"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -770,7 +770,7 @@ exports[`<TextArea /> should render large size 1`] = `
         <label
           data-blade-component="form-label"
           for="textarea-19-input-20"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -1191,7 +1191,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
         <label
           data-blade-component="form-label"
           for="textarea-139-input-140"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
index f02276c4486..0c9d0ebf651 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx bmakVs"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 iqZueY"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">.com</p></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:0px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInput__FocusRingWrapper-sc-177qd3e-0  iIoIGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dQeZLU"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx bmakVs"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 iqZueY"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">.com</p></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextInput /> should render TextInput 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -390,7 +390,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
         <label
           data-blade-component="form-label"
           for="textinput-1-input-2"
-          style="width:auto;flex-shrink:0;margin-right:16px"
+          style="width:auto;flex-shrink:0;margin-right:0px"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
index 1ef5fe1c1a2..4bfaffe654b 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
@@ -336,7 +336,7 @@ exports[`<TextInput /> should render 1`] = `
         <label
           data-blade-component="form-label"
           for="textinput-1-input-2"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -875,7 +875,7 @@ exports[`<TextInput /> should render large size 1`] = `
         <label
           data-blade-component="form-label"
           for="textinput-91-input-92"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
@@ -1451,7 +1451,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         <label
           data-blade-component="form-label"
           for="textinput-73-input-74"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          style="width: auto; flex-shrink: 0; margin-right: 0px;"
         >
           <div
             class="c2"
diff --git a/packages/blade/src/components/Radio/Radio.stories.tsx b/packages/blade/src/components/Radio/Radio.stories.tsx
index 6627ac6a4a7..edf0e6eaa3f 100644
--- a/packages/blade/src/components/Radio/Radio.stories.tsx
+++ b/packages/blade/src/components/Radio/Radio.stories.tsx
@@ -146,6 +146,12 @@ Small.args = {
   size: 'small',
 };
 
+export const Large = RadioTemplate.bind({});
+Large.storyName = 'Large';
+Large.args = {
+  size: 'large',
+};
+
 export const LabelPositionLeft = RadioTemplate.bind({});
 LabelPositionLeft.storyName = 'LabelPositionLeft';
 LabelPositionLeft.args = {
diff --git a/packages/blade/src/components/Radio/Radio.tsx b/packages/blade/src/components/Radio/Radio.tsx
index f88daada639..83c5d164ed9 100644
--- a/packages/blade/src/components/Radio/Radio.tsx
+++ b/packages/blade/src/components/Radio/Radio.tsx
@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import type { OnChange } from './useRadio';
 import { useRadio } from './useRadio';
 import { RadioIcon } from './RadioIcon/RadioIcon';
 import { useRadioGroupContext } from './RadioGroup/RadioContext';
-import { radioHoverTokens } from './radioTokens';
+import { radioHoverTokens, radioSizes } from './radioTokens';
 import isEmpty from '~utils/lodashButBetter/isEmpty';
 import { SelectorLabel } from '~components/Form/Selector/SelectorLabel';
 import BaseBox from '~components/Box/BaseBox';
@@ -15,7 +16,7 @@ import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
-import { getPlatformType } from '~utils';
+import { getPlatformType, makeSize, useTheme } from '~utils';
 import { MetaConstants } from '~utils/metaAttribute';
 import { throwBladeError } from '~utils/logger';
 
@@ -44,7 +45,7 @@ type RadioProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
 } & TestID &
   StyledPropsBlade;
 
@@ -52,6 +53,7 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
   { value, children, helpText, isDisabled, size = 'medium', testID, ...styledProps },
   ref,
 ) => {
+  const { theme } = useTheme();
   const groupProps = useRadioGroupContext();
   const isInsideGroup = !isEmpty(groupProps);
 
@@ -75,7 +77,6 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
   const showHelpText = !hasError && helpText;
   const isReactNative = getPlatformType() === 'react-native';
   const _size = groupProps.size ?? size;
-  const isSmall = _size === 'small';
 
   const handleChange: OnChange = ({ isChecked, value }) => {
     if (isChecked) {
@@ -96,6 +97,9 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
     onChange: handleChange,
   });
 
+  // radio icon's size & margin + margin-left of SelectorTitle which is 2
+  const helpTextLeftSpacing = makeSize(radioSizes.icon[size].width + theme.spacing[3]);
+
   return (
     <BaseBox {...getStyledProps(styledProps)}>
       <SelectorLabel
@@ -126,8 +130,8 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
             ) : null}
           </BaseBox>
           {showHelpText && (
-            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>
-              <SelectorSupportText isNegative={true} id={ids?.helpTextId}>
+            <BaseBox marginLeft={helpTextLeftSpacing}>
+              <SelectorSupportText size={_size} isNegative={true} id={ids?.helpTextId}>
                 {helpText}
               </SelectorSupportText>
             </BaseBox>
diff --git a/packages/blade/src/components/Radio/RadioGroup/RadioGroup.tsx b/packages/blade/src/components/Radio/RadioGroup/RadioGroup.tsx
index d5858b37e43..f8960aeeea3 100644
--- a/packages/blade/src/components/Radio/RadioGroup/RadioGroup.tsx
+++ b/packages/blade/src/components/Radio/RadioGroup/RadioGroup.tsx
@@ -86,7 +86,7 @@ type RadioGroupProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
 } & TestID &
   StyledPropsBlade;
 
@@ -146,6 +146,7 @@ const RadioGroup = ({
               position={labelPosition}
               id={ids.labelId}
               accessibilityText={accessibilityText && `,${accessibilityText}`}
+              size={size}
             >
               {label}
             </FormLabel>
@@ -164,6 +165,7 @@ const RadioGroup = ({
               })}
             </BaseBox>
             <FormHint
+              size={size}
               type={validationState === 'error' ? 'error' : 'help'}
               errorText={errorText}
               helpText={helpText}
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
index 70beb039438..d64290d4d82 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><div id="radio-undefined-helptext-undefined" data-blade-component="box" class="BaseBox-bmPWx kTMxBD"><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Apple Help</span></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select One</span></span></div></div></div></div></div>"`;
+exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:0px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><div id="radio-undefined-helptext-undefined" data-blade-component="box" class="BaseBox-bmPWx kTMxBD"><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Apple Help</span></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select One</span></span></div></div></div></div></div>"`;
 
 exports[`<Radio /> should render with help text 2`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,7 +31,7 @@ exports[`<Radio /> should render with help text 2`] = `
   transition-timing-function: cubic-bezier(0.7,0,0.5,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -73,7 +73,11 @@ exports[`<Radio /> should render with help text 2`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,23 +91,23 @@ exports[`<Radio /> should render with help text 2`] = `
   align-items: center;
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   margin-left: 4px;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   margin-left: 24px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   display: contents;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   margin-bottom: 0px;
 }
 
-.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17 {
   margin-top: 4px;
 }
 
@@ -146,7 +150,7 @@ exports[`<Radio /> should render with help text 2`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -163,7 +167,7 @@ exports[`<Radio /> should render with help text 2`] = `
   padding: 0;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   color: hsla(4,74%,49%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -180,7 +184,7 @@ exports[`<Radio /> should render with help text 2`] = `
   padding: 0;
 }
 
-.c17.c17.c17.c17.c17 {
+.c18.c18.c18.c18.c18 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -214,7 +218,7 @@ exports[`<Radio /> should render with help text 2`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -231,7 +235,7 @@ exports[`<Radio /> should render with help text 2`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -242,7 +246,7 @@ exports[`<Radio /> should render with help text 2`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -267,7 +271,7 @@ exports[`<Radio /> should render with help text 2`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-5-label"
-        style="width:auto;flex-shrink:0;margin-right:16px"
+        style="width:auto;flex-shrink:0;margin-right:0px"
       >
         <div
           class="c1"
@@ -306,7 +310,7 @@ exports[`<Radio /> should render with help text 2`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -314,7 +318,7 @@ exports[`<Radio /> should render with help text 2`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -322,7 +326,7 @@ exports[`<Radio /> should render with help text 2`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -331,38 +335,38 @@ exports[`<Radio /> should render with help text 2`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-5"
                       role="radio"
                       type="radio"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Apple
                     </p>
                   </div>
                   <div
-                    class="c12"
+                    class="c13"
                     data-blade-component="base-box"
                   >
                     <div
-                      class="c13"
+                      class="c14"
                       data-blade-component="box"
                       id="radio-1-helptext-2"
                     >
                       <span
-                        class="c14"
+                        class="c15"
                         data-blade-component="text"
                       >
                         Apple Help
@@ -374,7 +378,7 @@ exports[`<Radio /> should render with help text 2`] = `
             </div>
           </div>
           <div
-            class="c15"
+            class="c16"
             data-blade-component="base-box"
           >
             <div
@@ -382,7 +386,7 @@ exports[`<Radio /> should render with help text 2`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -390,7 +394,7 @@ exports[`<Radio /> should render with help text 2`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -399,22 +403,22 @@ exports[`<Radio /> should render with help text 2`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-5"
                       role="radio"
                       type="radio"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Mango
@@ -426,16 +430,16 @@ exports[`<Radio /> should render with help text 2`] = `
           </div>
         </div>
         <div
-          class="c16"
+          class="c17"
           data-blade-component="base-box"
         >
           <span
-            class="c7"
+            class="c8"
             data-blade-component="base-box"
             style="word-break:break-all"
           >
             <span
-              class="c17"
+              class="c18"
               data-blade-component="text"
             >
               Select One
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
index fa6f5966498..d4af60aa79a 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
@@ -217,7 +217,7 @@ exports[`<Radio /> should render radio with label 1`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-3-label"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -519,7 +519,7 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-13-label"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
index 95694bda28d..e5644be3a50 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
@@ -191,7 +191,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -361,7 +361,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -953,7 +953,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -1123,7 +1123,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
index 7a5eaa33b2a..cb143bfd684 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RadioGroup /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select one</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="orange"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select one</span></span></div></div></div></div></div>"`;
+exports[`<RadioGroup /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:0px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO bDCeGT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select one</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="orange"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select one</span></span></div></div></div></div></div>"`;
 
 exports[`<RadioGroup /> should render with help text 2`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,7 +31,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   transition-timing-function: cubic-bezier(0.7,0,0.5,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -73,7 +73,11 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,15 +91,15 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   align-items: center;
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   margin-left: 4px;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   margin-bottom: 0px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   margin-top: 4px;
 }
 
@@ -138,7 +142,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -155,7 +159,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   padding: 0;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -189,7 +193,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -206,7 +210,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -217,7 +221,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -242,7 +246,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-7-label"
-        style="width:auto;flex-shrink:0;margin-right:16px"
+        style="width:auto;flex-shrink:0;margin-right:0px"
       >
         <div
           class="c1"
@@ -281,7 +285,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -289,7 +293,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -297,7 +301,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -306,22 +310,22 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Apple
@@ -332,7 +336,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -340,7 +344,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -348,7 +352,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -357,22 +361,22 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Mango
@@ -383,7 +387,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
             </div>
           </div>
           <div
-            class="c12"
+            class="c13"
             data-blade-component="base-box"
           >
             <div
@@ -391,7 +395,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -399,7 +403,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -408,22 +412,22 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Orange
@@ -435,16 +439,16 @@ exports[`<RadioGroup /> should render with help text 2`] = `
           </div>
         </div>
         <div
-          class="c13"
+          class="c14"
           data-blade-component="base-box"
         >
           <span
-            class="c7"
+            class="c8"
             data-blade-component="base-box"
             style="word-break:break-all"
           >
             <span
-              class="c14"
+              class="c15"
               data-blade-component="text"
             >
               Select one
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
index f20775dc5d5..4444402edd6 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RadioGroup /> should render with help text 1`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -29,7 +29,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   transition-timing-function: cubic-bezier(0.7,0,0.5,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -71,7 +71,11 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -85,15 +89,15 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   align-items: center;
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   margin-left: 4px;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   margin-bottom: 0px;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   margin-top: 4px;
 }
 
@@ -136,7 +140,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -153,7 +157,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   padding: 0;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -187,7 +191,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -204,7 +208,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -215,7 +219,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -238,7 +242,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-15-label"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -277,7 +281,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -285,7 +289,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -293,7 +297,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -302,22 +306,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-15"
                       role="radio"
                       type="radio"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Apple
@@ -328,7 +332,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -336,7 +340,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -344,7 +348,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -353,22 +357,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-15"
                       role="radio"
                       type="radio"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Mango
@@ -379,7 +383,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             </div>
           </div>
           <div
-            class="c12"
+            class="c13"
             data-blade-component="base-box"
           >
             <div
@@ -387,7 +391,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -395,7 +399,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -404,22 +408,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-15"
                       role="radio"
                       type="radio"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Orange
@@ -431,16 +435,16 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           </div>
         </div>
         <div
-          class="c13"
+          class="c14"
           data-blade-component="base-box"
         >
           <span
-            class="c7"
+            class="c8"
             data-blade-component="base-box"
             style="word-break: break-all;"
           >
             <span
-              class="c14"
+              class="c15"
               data-blade-component="text"
             >
               Select one
@@ -454,7 +458,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
 `;
 
 exports[`<RadioGroup /> should render with label 1`] = `
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -482,7 +486,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
   transition-timing-function: cubic-bezier(0.7,0,0.5,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -524,7 +528,11 @@ exports[`<RadioGroup /> should render with label 1`] = `
   gap: 0px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
+  margin-bottom: 8px;
+}
+
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,11 +546,11 @@ exports[`<RadioGroup /> should render with label 1`] = `
   align-items: center;
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   margin-left: 4px;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   margin-bottom: 0px;
 }
 
@@ -585,7 +593,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -619,7 +627,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -636,7 +644,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
   word-wrap: normal;
 }
 
-.c8.c8.c8.c8.c8:focus-visible + div {
+.c9.c9.c9.c9.c9:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -647,7 +655,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8:hover + div {
+.c9.c9.c9.c9.c9:hover + div {
   border-color: hsla(211,27%,76%,1);
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -670,7 +678,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
       <span
         data-blade-component="form-label"
         id="radio-group-7-label"
-        style="width: auto; flex-shrink: 0; margin-right: 16px;"
+        style="width: auto; flex-shrink: 0; margin-right: 0px;"
       >
         <div
           class="c1"
@@ -707,7 +715,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
           data-blade-component="base-box"
         >
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -715,7 +723,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -723,7 +731,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -732,22 +740,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="apple"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Apple
@@ -758,7 +766,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
             </div>
           </div>
           <div
-            class="c1"
+            class="c6"
             data-blade-component="base-box"
           >
             <div
@@ -766,7 +774,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -774,7 +782,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -783,22 +791,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="mango"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Mango
@@ -809,7 +817,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
             </div>
           </div>
           <div
-            class="c12"
+            class="c13"
             data-blade-component="base-box"
           >
             <div
@@ -817,7 +825,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
               data-blade-component="base-box"
             >
               <label
-                class="c6"
+                class="c7"
                 data-blade-component="radio-label"
               >
                 <div
@@ -825,7 +833,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c7"
+                    class="c8"
                     data-blade-component="base-box"
                   >
                     <input
@@ -834,22 +842,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
-                      class="c8"
+                      class="c9"
                       name="radio-group-7"
                       role="radio"
                       type="radio"
                       value="orange"
                     />
                     <div
-                      class="c9"
+                      class="c10"
                       data-blade-component="radio-icon-wrapper"
                     />
                     <div
-                      class="c10"
+                      class="c11"
                       data-blade-component="base-box"
                     />
                     <p
-                      class="c11"
+                      class="c12"
                       data-blade-component="text"
                     >
                       Orange
diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts
index ce439e18130..793a1fcc0ae 100644
--- a/packages/blade/src/components/Radio/radioTokens.ts
+++ b/packages/blade/src/components/Radio/radioTokens.ts
@@ -7,13 +7,17 @@ const radioSizes = {
   group: {
     gap: {
       small: {
-        mobile: 'spacing.2',
-        desktop: 'spacing.0',
-      },
-      medium: {
         mobile: 'spacing.3',
         desktop: 'spacing.2',
       },
+      medium: {
+        mobile: 'spacing.4',
+        desktop: 'spacing.3',
+      },
+      large: {
+        mobile: 'spacing.5',
+        desktop: 'spacing.4',
+      },
     },
   },
   icon: {
@@ -27,6 +31,11 @@ const radioSizes = {
       height: size[16],
       dotRadius: size[3],
     },
+    large: {
+      width: size[20],
+      height: size[20],
+      dotRadius: size[4],
+    },
   },
 } as const;