diff --git a/components/form/Field.tsx b/components/form/Field.tsx
index 8e5c353..3c17962 100644
--- a/components/form/Field.tsx
+++ b/components/form/Field.tsx
@@ -9,6 +9,7 @@ import { TypeTag } from "./field/TypeTag";
 import get from "lodash.get";
 import { getNumber } from "@/lib/utils/getNumber";
 import { useLocal } from "@/lib/utils/use-local";
+import { FieldRadio } from "./field/TypeRadio";
 
 export const Field: React.FC<any> = ({
   fm,
@@ -80,7 +81,18 @@ export const Field: React.FC<any> = ({
               border: 0px !important;
               box-shadow: none;
             }
-          `
+          `,
+          style === "gform" &&
+            css`
+              .field input {
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+              }
+              .field textarea {
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+              }
+            `
         )}
       >
         {!hidden_label ? (
@@ -105,17 +117,26 @@ export const Field: React.FC<any> = ({
               : "border border-gray-300 ",
             "relative field",
             !is_disable
-              ? style === "underline"
-                ? "focus-within:border-b focus-within:border-b-gray-500"
-                : "focus-within:border focus-within:border-gray-500"
+              ? style === "underline" || style === "gform"
+                ? "focus-within:border-b focus-within:border-b-primary"
+                : "focus-within:border focus-within:border-primary"
               : "",
-
-            style === "underline"
+            style === "underline" || style === "gform"
               ? "rounded-none border-transparent border-b-gray-300"
               : "",
-            ["rating", "color", "single-checkbox", "checkbox"].includes(type) &&
+            [
+              "rating",
+              "color",
+              "single-checkbox",
+              "radio",
+              "checkbox",
+            ].includes(type) &&
               css`
                 border: 0px !important;
+              `,
+            ["upload"].includes(type) &&
+              css`
+                padding: 0px !important;
               `
           )}
         >
@@ -192,6 +213,18 @@ export const Field: React.FC<any> = ({
                 className={className}
               />
             </>
+          ) : ["radio"].includes(type) ? (
+            <>
+              <FieldRadio
+                fm={fm}
+                name={name}
+                onLoad={onLoad}
+                placeholder={placeholder}
+                disabled={is_disable}
+                onChange={onChange}
+                className={className}
+              />
+            </>
           ) : ["single-checkbox"].includes(type) ? (
             <>
               <FieldCheckbox
diff --git a/components/form/field/TypeCheckbox.tsx b/components/form/field/TypeCheckbox.tsx
index 5ab368c..c7783ec 100644
--- a/components/form/field/TypeCheckbox.tsx
+++ b/components/form/field/TypeCheckbox.tsx
@@ -114,32 +114,35 @@ export const FieldCheckbox: FC<any> = ({
                   isChecked && "active"
                 )}
               >
-                {isChecked ? (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    className="fill-sky-500"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="m10.6 14.092l-2.496-2.496q-.14-.14-.344-.15q-.204-.01-.364.15t-.16.354q0 .194.16.354l2.639 2.638q.242.243.565.243q.323 0 .565-.243l5.477-5.477q.14-.14.15-.344q.01-.204-.15-.363q-.16-.16-.354-.16q-.194 0-.353.16L10.6 14.092ZM5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Z"
-                    />
-                  </svg>
-                ) : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Zm0-1h12.77q.23 0 .423-.192q.192-.193.192-.423V5.615q0-.23-.192-.423Q18.615 5 18.385 5H5.615q-.23 0-.423.192Q5 5.385 5 5.615v12.77q0 .23.192.423q.193.192.423.192Z"
-                    />
-                  </svg>
-                )}
+                <div className="text-primary">
+                  {isChecked ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      className="fill-sky-500"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="m10.6 14.092l-2.496-2.496q-.14-.14-.344-.15q-.204-.01-.364.15t-.16.354q0 .194.16.354l2.639 2.638q.242.243.565.243q.323 0 .565-.243l5.477-5.477q.14-.14.15-.344q.01-.204-.15-.363q-.16-.16-.354-.16q-.194 0-.353.16L10.6 14.092ZM5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Z"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Zm0-1h12.77q.23 0 .423-.192q.192-.193.192-.423V5.615q0-.23-.192-.423Q18.615 5 18.385 5H5.615q-.23 0-.423.192Q5 5.385 5 5.615v12.77q0 .23.192.423q.193.192.423.192Z"
+                      />
+                    </svg>
+                  )}
+                </div>
+
                 <div className="">{item.label}</div>
               </div>
             );
diff --git a/components/form/field/TypeInput.tsx b/components/form/field/TypeInput.tsx
index 2ca284b..b84f37c 100644
--- a/components/form/field/TypeInput.tsx
+++ b/components/form/field/TypeInput.tsx
@@ -2,7 +2,7 @@ import { useLocal } from "@/lib/utils/use-local";
 import Datepicker from "../../ui/Datepicker";
 import { Input } from "../../ui/input";
 import { Textarea } from "../../ui/text-area";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import tinycolor from "tinycolor2";
 import { FieldColorPicker } from "../../ui/FieldColorPopover";
 import { FaRegStar, FaStar } from "react-icons/fa6";
@@ -22,6 +22,7 @@ export const TypeInput: React.FC<any> = ({
   className,
 }) => {
   const [hover, setHover] = useState(0); // State untuk menyimpan nilai hover
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   let value: any = fm.data?.[name] || "";
   const [rating, setRating] = useState(value); // State untuk menyimpan nilai rating
@@ -41,6 +42,13 @@ export const TypeInput: React.FC<any> = ({
     rgbValue: "",
     selectedEd: "" as string,
   });
+  const handleInput = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto"; // Reset height to calculate new height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Adjust height based on content
+    }
+  };
   useEffect(() => {
     if (type === "color") {
       meta.inputValue = value || "";
@@ -66,7 +74,9 @@ export const TypeInput: React.FC<any> = ({
       return (
         <>
           <Textarea
+            ref={textareaRef}
             id={name}
+            onInput={handleInput}
             name={name}
             disabled={disabled}
             required={required}
diff --git a/components/form/field/TypeRadio.tsx b/components/form/field/TypeRadio.tsx
new file mode 100644
index 0000000..8be2e68
--- /dev/null
+++ b/components/form/field/TypeRadio.tsx
@@ -0,0 +1,131 @@
+import { useLocal } from "@/lib/utils/use-local";
+import { FC, useEffect } from "react";
+import { ButtonBetter } from "../../ui/button";
+import { IoRadioButtonOff, IoRadioButtonOn } from "react-icons/io5";
+
+export const FieldRadio: FC<any> = ({
+  fm,
+  name,
+  onLoad,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  mode = "single",
+}) => {
+  const local = useLocal({
+    list: [] as any[],
+    reload: async () => {
+      fm.fields[name] = { ...fm.fields?.[name], ...local };
+      fm.render();
+      const callback = (res: any[]) => {
+        if (Array.isArray(res)) {
+          local.list = res;
+        } else {
+          local.list = [];
+        }
+
+        local.render();
+      };
+      const res = onLoad();
+      if (res instanceof Promise) res.then(callback);
+      else callback(res);
+    },
+  });
+  useEffect(() => {
+    fm.fields[name] = { ...fm.fields?.[name], ...local };
+    const callback = (res: any[]) => {
+      if (Array.isArray(res)) {
+        local.list = res;
+      } else {
+        local.list = [];
+      }
+      local.render();
+    };
+    const res = onLoad();
+    if (res instanceof Promise) res.then(callback);
+    else callback(res);
+  }, []);
+
+  let value =
+    mode === "single" && typeof fm.data?.[name] === "string"
+      ? [fm.data?.[name]]
+      : fm.data?.[name];
+
+  let is_tree = false;
+  const applyChanges = (selected: any[]) => {
+    selected = selected.filter((e) => e);
+    const val = selected.map((e) => e.value);
+    if (mode === "single") {
+      selected = val?.[0];
+
+      fm.data[name] = selected;
+    } else {
+      fm.data[name] = val;
+    }
+    fm.render();
+
+    if (typeof onChange === "function") {
+      onChange(fm.data[name]);
+    }
+  };
+  return (
+    <>
+      <div className={cx("flex items-center w-full flex-row")}>
+        <div
+          className={cx(
+            `flex flex-col p-0.5 flex-1`,
+            !is_tree && "space-y-1 ",
+            className
+          )}
+        >
+          {local.list.map((item, idx) => {
+            let isChecked = false;
+            try {
+              isChecked = value.some((e: any) => e === item.value);
+            } catch (ex) {}
+
+            return (
+              <div
+                key={idx + "_checkbox"}
+                onClick={() => {
+                  if (!disabled) {
+                    let selected = Array.isArray(value)
+                      ? value.map((row) => {
+                          return local.list.find((e) => e.value === row);
+                        })
+                      : [];
+
+                    if (isChecked) {
+                      selected = selected.filter(
+                        (e: any) => e.value !== item.value
+                      );
+                    } else {
+                      if (mode === "single") {
+                        selected = [item];
+                      } else {
+                        selected.push(item);
+                      }
+                    }
+                    applyChanges(selected);
+                  }
+                }}
+                className={cx(
+                  "text-sm opt-item flex flex-row gap-x-1 cursor-pointer items-center rounded-full p-0.5 ",
+                  isChecked && "active"
+                )}
+              >
+                {isChecked ? (
+                  <IoRadioButtonOn className="text-primary" />
+                ) : (
+                  <IoRadioButtonOff className="text-primary" />
+                )}
+                <div className="">{item.label}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/components/form/field/TypeUploadSingle.tsx b/components/form/field/TypeUploadSingle.tsx
index 6ccdbab..fe45c81 100644
--- a/components/form/field/TypeUploadSingle.tsx
+++ b/components/form/field/TypeUploadSingle.tsx
@@ -179,13 +179,13 @@ export const FieldUploadSingle: FC<{
                   input.ref.click();
                 }
               }}
-              className="items-center flex text-base px-1 outline-none rounded cursor-pointer "
+              className="items-center flex text-base px-1 outline-none rounded cursor-pointer flex-row justify-center"
             >
               <div className="flex flex-row items-center px-2">
                 <Upload className="h-4 w-4" />
               </div>
-              <div className="flex flex-row items-center  text-md">
-                Upload File
+              <div className="flex flex-row items-center  text-sm">
+                Add File
               </div>
             </div>
           </div>
diff --git a/components/form/field/Typeahead.tsx b/components/form/field/Typeahead.tsx
index ced6c5e..7a21077 100644
--- a/components/form/field/Typeahead.tsx
+++ b/components/form/field/Typeahead.tsx
@@ -577,7 +577,9 @@ export const Typeahead: FC<{
           >
             <input
               placeholder={
-                local.mode === "multi" ? placeholder : valueLabel[0]?.label
+                local.mode === "multi"
+                  ? placeholder
+                  : valueLabel[0]?.label || placeholder
               }
               type="text"
               ref={input}
diff --git a/components/tablelist/TableBetter.tsx b/components/tablelist/TableBetter.tsx
index 412eedc..bb308de 100644
--- a/components/tablelist/TableBetter.tsx
+++ b/components/tablelist/TableBetter.tsx
@@ -84,12 +84,7 @@ export const TableEditBetter: React.FC<any> = ({
       local.render();
     },
     removeRow: (row: any) => {
-      // setData((prev) => prev.filter((item) => item !== row)); // Update state lokal
-      // local.data = local.data.filter((item: any) => item !== row); // Hapus row dari local.data
-      // local.render(); // Panggil render untuk memperbarui UI
-      console.log("HALOO");
       const data = fm.data?.[name] || [];
-      // data.push(row);
       if (delete_name) {
         const ids: any[] = Array.isArray(fm.data?.[delete_name])
           ? fm.data?.deleted_line_ids
@@ -103,9 +98,6 @@ export const TableEditBetter: React.FC<any> = ({
       fm.render();
       local.data = fm.data[name];
       local.render();
-      console.log({ fm });
-      // local.data = fm.data[name];
-      // local.render();
     },
     reload: async () => {
       toast.info(
diff --git a/components/ui/MaskedInput.tsx b/components/ui/MaskedInput.tsx
index 1083d7e..75736df 100644
--- a/components/ui/MaskedInput.tsx
+++ b/components/ui/MaskedInput.tsx
@@ -39,7 +39,17 @@ const MaskedInput: React.FC<MaskedInputProps> = ({
     if (input.length > 5) {
       input = input.substring(0, 5);
     }
+    // Validasi batas maksimal jam
+    if (input.length === 5 && !input.includes("_")) {
+      const [hours, minutes] = input.split(":").map(Number);
 
+      // Koreksi jika jam atau menit melebihi batas
+      const correctedHours = Math.min(hours, 23);
+      const correctedMinutes = Math.min(minutes, 59);
+      input = `${String(correctedHours).padStart(2, "0")}:${String(
+        correctedMinutes
+      ).padStart(2, "0")}`;
+    }
     // Update state lokal
     setLocalValue(input);