diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss
index fba5145..981b732 100644
--- a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss
+++ b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss
@@ -36,10 +36,11 @@
       position: relative;
       margin-left: bk.$spacing-2;
       top: -2px;
+    }
 
-      .bk-checkbox-field__label__sublabel {
-        font-size: bk.$font-size-xs;
-      }
+    .bk-checkbox-field__sublabel {
+      font-size: bk.$font-size-xs;
+      padding-left: 26px;
     }
   }
 }
diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx
index 00a621b..1046974 100644
--- a/src/components/forms/fields/CheckboxField/CheckboxField.tsx
+++ b/src/components/forms/fields/CheckboxField/CheckboxField.tsx
@@ -106,13 +106,13 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
           defaultChecked={props.defaultChecked}
           disabled={props.disabled}
         />
-        <div className={cl['bk-checkbox-field__label__content']}>
+        <span className={cl['bk-checkbox-field__label__content']}>
           {label}
-          {sublabel && (
-            <div className={cl['bk-checkbox-field__label__sublabel']}>{sublabel}</div>
-          )}
-        </div>
+        </span>
       </label>
+      {sublabel && (
+        <div className={cl['bk-checkbox-field__sublabel']}>{sublabel}</div>
+      )}
     </div>
   );
 };