diff --git a/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte b/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
index e2077429e..ec8afe7df 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-field-options.svelte
@@ -6,7 +6,6 @@
     type MaybeConditionGroup,
     toMaybeConditionGroup,
     parseValidViewFilter,
-    formOption,
   } from "@undb/table"
   import { Switch } from "$lib/components/ui/switch"
   import { Label } from "$lib/components/ui/label"
@@ -22,6 +21,7 @@
   import type { ZodUndefined } from "@undb/zod"
   import { writable } from "svelte/store"
   import { Button } from "$lib/components/ui/button"
+  import { Checkbox } from "$lib/components/ui/checkbox"
 
   const table = getTable()
 
@@ -57,6 +57,7 @@
   }
 
   $: previousFields = form.getPreviousFields(field.id.value) ?? []
+  $: disabled = formField.getRequired(field) && !formField.defaultValue
 </script>
 
 <div
@@ -108,20 +109,22 @@
           <span>required</span>
         </Label>
 
-        <label class={cn(formField.required ? "cursor-not-allowed" : "cursor-pointer")}>
-          <input
-            type="checkbox"
+        <Label class={cn(disabled ? "cursor-not-allowed" : "cursor-pointer")}>
+          <Checkbox
             class="hidden"
             bind:checked={formField.hidden}
-            disabled={formField.getRequired(field) && !formField.defaultValue}
-            on:click={setForm}
+            {disabled}
+            onCheckedChange={async () => {
+              await tick()
+              setForm()
+            }}
           />
           {#if formField.hidden}
             <EyeClosed class="h-4 w-4" />
           {:else}
             <EyeOpen class="h-4 w-4" />
           {/if}
-        </label>
+        </Label>
       </div>
     </div>
     <Collapsible.Content class="mt-4">
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
index c2bad2d0f..3cea65722 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
@@ -172,7 +172,14 @@
                   class="hidden"
                   bind:checked={formField.hidden}
                   disabled={hiddenDisabled}
-                  on:change={setForm}
+                  on:change={async () => {
+                    if (hiddenDisabled) {
+                      return
+                    }
+
+                    await tick()
+                    setForm()
+                  }}
                 />
                 {#if formField.hidden}
                   <EyeClosed class="h-4 w-4" />
diff --git a/packages/table/src/modules/forms/form/form-field.vo.ts b/packages/table/src/modules/forms/form/form-field.vo.ts
index 0985c744f..76478b7e4 100644
--- a/packages/table/src/modules/forms/form/form-field.vo.ts
+++ b/packages/table/src/modules/forms/form/form-field.vo.ts
@@ -26,9 +26,6 @@ export class FormFieldVO extends ValueObject<IFormField> {
   }
 
   public get hidden() {
-    if (this.required) {
-      return false
-    }
     return this.props.hidden ?? false
   }