diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 4ba6777..dc9d94c 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -147,7 +147,7 @@ export const FieldInput: FC<{
             "field-inner c-flex-1 c-flex c-items-center",
             field.type === "link" && "c-justify-end",
             field.focused && "focused",
-            disabled && "c-pointer-events-none"
+            disabled && "c-pointer-events-none c-bg-gray-50"
           )}
         >
           {not_ready ? (
diff --git a/comps/ui/flow.tsx b/comps/ui/flow.tsx
new file mode 100755
index 0000000..de6631e
--- /dev/null
+++ b/comps/ui/flow.tsx
@@ -0,0 +1,26 @@
+import { FC } from "react";
+
+export const Flow: FC<{
+  children: any;
+  PassProp: any;
+  flow: { text: string; popover: any; icon: any }[];
+  props?: any;
+}> = ({ PassProp, children, flow, props }) => {
+  return (
+    <div {...props} className={cx(props.className, "c-flex-row")}>
+      {flow.map((item, idx) => {
+        return (
+          <PassProp
+            flow={flow}
+            item={item}
+            idx={idx}
+            key={idx}
+            is_last={idx === flow.length - 1}
+          >
+            {children}
+          </PassProp>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/comps/ui/typeahead.tsx b/comps/ui/typeahead.tsx
index 69324a0..7997b55 100755
--- a/comps/ui/typeahead.tsx
+++ b/comps/ui/typeahead.tsx
@@ -518,6 +518,7 @@ export const Typeahead: FC<{
               }
             }
           }}
+          disabled={disabled}
           spellCheck={false}
           className={cx(
             "c-flex-1 c-mb-2 c-text-sm c-outline-none c-bg-transparent",
diff --git a/exports.tsx b/exports.tsx
index 93634c7..316e89f 100755
--- a/exports.tsx
+++ b/exports.tsx
@@ -121,3 +121,5 @@ export { getPathname } from "@/utils/pathname";
 
 export * from "@/comps/ui/input";
 export * from "@/comps/ui/typeahead";
+
+export {Flow} from "@/comps/ui/flow"