diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index f93861c877a..b5d53c41fd6 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -21,6 +21,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-align-sub",
     "tw-flex-none", // Flexbox fix for bit-form-control
     "!tw-p-1",
+    // Give checkbox explicit height and width to fix iOS rendering bug
+    "tw-h-[calc(1.12rem_+_theme(spacing.2))]",
+    "tw-w-[calc(1.12rem_+_theme(spacing.2))]",
     "after:tw-inset-1",
     // negative margin to negate the positioning added by the padding
     "!-tw-mt-1",
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index 3dc3f90c9b0..4fbb8e6342e 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -1,5 +1,5 @@
 <label
-  class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-[.25rem] [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
+  class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-1 [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
   [ngClass]="[formControl().disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
 >
   <ng-content></ng-content>