fix(ui): Fix broken layout shift on checkbox/switch label click

Author: CrawlerCode

src/components/form/CheckboxField.tsx

@@ -15,7 +15,17 @@ export const CheckboxField = ({ title, description, className, ...props }: Check
 
   return (
     <Field data-invalid={isInvalid} orientation="horizontal" className={className}>
-      <Checkbox {...props} id={id} name={name} checked={state.value} onCheckedChange={(checked) => handleChange(!!checked)} onBlur={handleBlur} aria-invalid={isInvalid} />
+      <Checkbox
+        {...props}
+        id={id}
+        name={name}
+        checked={state.value}
+        onCheckedChange={(checked) => handleChange(!!checked)}
+        onBlur={handleBlur}
+        aria-invalid={isInvalid}
+        nativeButton
+        render={<button />}
+      />
       <FieldContent>
         <span className="flex items-center gap-2">
           <FieldLabel required={props.required} htmlFor={id}>

src/components/form/SwitchField.tsx

@@ -17,7 +17,9 @@ export const SwitchField = ({ title, description, info, position = "start", clas
 
   return (
     <Field data-invalid={isInvalid} orientation="horizontal" className={className}>
-      {position === "start" && <Switch {...props} id={id} name={name} checked={state.value} onCheckedChange={(checked) => handleChange(checked)} onBlur={handleBlur} />}
+      {position === "start" && (
+        <Switch {...props} id={id} name={name} checked={state.value} onCheckedChange={(checked) => handleChange(checked)} onBlur={handleBlur} nativeButton render={<button />} />
+      )}
       <FieldContent>
         <span className="flex items-center gap-2">
           <FieldLabel required={props.required} htmlFor={id}>