diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 200fb48..bbb4aa1 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -103,6 +103,8 @@ export const FieldInput: FC<{
     );
   }
 
+  // console.log(prefix, suffix);
+
   return (
     <div
       className={cx(
diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts
index 1c5be06..e3713c1 100755
--- a/comps/form/gen/fields.ts
+++ b/comps/form/gen/fields.ts
@@ -83,6 +83,14 @@ export const newField = async (
           label: formatName(field.name),
           ext__show_label: show ? "y" : "n",
           ext__required: field.optional ? "n" : "y",
+          opt__on_load: [
+            `() => {
+  return [
+    { label: "No", value: false },
+    { label: "Yes", value: true },
+  ];
+}`,
+          ],
           type: "single-option",
           sub_type: "toogle",
           ext__on_change: opt.on_change
diff --git a/comps/form/gen/gen-field.ts b/comps/form/gen/gen-field.ts
index 4631471..42ed1e5 100755
--- a/comps/form/gen/gen-field.ts
+++ b/comps/form/gen/gen-field.ts
@@ -31,7 +31,7 @@ export const generateField = async (
       pk: generateSelect(parseGenField(master.value.checked)).pk,
       table: master?.name,
       select: generateSelect(parseGenField(master.value.checked)).select,
-      pks: {},
+      pks: {}, 
       type: fieldType,
     } as any);
     const result = {
diff --git a/comps/form/gen/gen-form.ts b/comps/form/gen/gen-form.ts
index 047b548..bc49659 100755
--- a/comps/form/gen/gen-form.ts
+++ b/comps/form/gen/gen-form.ts
@@ -110,9 +110,9 @@ export const generateForm = async (
         align: "top-left",
       },
     };
-    const existing_childs = (
-      (item.component?.props.body as any)?.content as IItem
-    )?.childs;
+    // const existing_childs = (
+    //   (item.component?.props.body as any)?.content as IItem
+    // )?.childs;
 
     let new_body = createItem({
       name: "item",
@@ -143,9 +143,9 @@ export const generateForm = async (
       ].filter((e) => e),
     });
 
-    if (Array.isArray(existing_childs) && existing_childs.length > 0) {
-      walkGenForm(new_body, existing_childs as any);
-    }
+    // if (Array.isArray(existing_childs) && existing_childs.length > 0) {
+    //   walkGenForm(new_body, existing_childs as any);
+    // }
 
     // const prop_item = propFromItem(item);
     // const current_body = prop_item?.body?.value as IItem;
diff --git a/comps/form/gen/on_load_rel.ts b/comps/form/gen/on_load_rel.ts
index be919ce..9c2a33d 100755
--- a/comps/form/gen/on_load_rel.ts
+++ b/comps/form/gen/on_load_rel.ts
@@ -60,7 +60,7 @@ async (arg: {
       (await call_prasi_events("field", "relation_load", [fm, arg.field]) || {}) as Prisma.${table}WhereInput;
 
       if (typeof opt__load_trigger === "object" && typeof opt__load_trigger?.on_change === "function") {
-        const trigger = await opt__load_trigger.on_change({ md, fm, where });
+        const trigger = await opt__load_trigger.on_change({ md: typeof md !== 'undefined' ? md : undefined, fm, where });
         if (trigger.hidden) {
           done([]);
           arg.field.hidden = true;
diff --git a/comps/form/utils/validate.tsx b/comps/form/utils/validate.tsx
index 024132f..ef26e46 100755
--- a/comps/form/utils/validate.tsx
+++ b/comps/form/utils/validate.tsx
@@ -19,7 +19,11 @@ export const validate = (field: FieldLocal, fm: FMLocal, record?: any) => {
   if (field.required) {
     const data = record || fm.data;
     const error_msg = msg(field.label);
-    if (!data[field.name]) {
+    if (
+      data[field.name] === undefined ||
+      data[field.name] === null ||
+      data[field.name] === ""
+    ) {
       fm.error.set(field.name, [error_msg]);
     }
   }
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index b09556b..2b4628e 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -820,7 +820,7 @@ export const TableList: FC<TableListProp> = ({
                     );
                   })
                 ) : (
-                  <>No Data</>
+                  <>No&nbsp;Data asf as</>
                 )}
               </div>
             </>
diff --git a/comps/ui/input-otp.tsx b/comps/ui/input-otp.tsx
new file mode 100755
index 0000000..4edde46
--- /dev/null
+++ b/comps/ui/input-otp.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:c-cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("c-flex c-items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "c-relative c-flex c-h-10 c-w-10 c-items-center c-justify-center c-border-y c-border-r c-border-input c-text-sm c-transition-all first:c-rounded-l-md first:c-border-l last:c-rounded-r-md",
+        isActive && "c-z-10 c-ring-2 c-ring-ring c-ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="c-pointer-events-none c-absolute c-inset-0 c-flex c-items-center c-justify-center">
+          <div className="c-h-4 c-w-px c-animate-caret-blink c-bg-foreground c-duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }