From 6a58c5ea1da493e449acb1f9b06660c2a8a76520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 19 Mar 2026 18:31:00 -0500
Subject: [PATCH] feat: form fields

---
 .../src/components/ApiTester/index.tsx        |  1 +
 .../src/components/TextField/index.css        | 28 ++++++++++++++-----
 .../src/components/TextField/index.tsx        |  3 ++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/website-ue/src/components/ApiTester/index.tsx b/packages/website-ue/src/components/ApiTester/index.tsx
index a83ee664e..e4b35a9e0 100644
--- a/packages/website-ue/src/components/ApiTester/index.tsx
+++ b/packages/website-ue/src/components/ApiTester/index.tsx
@@ -51,6 +51,7 @@ function Content({ path }: Props) {
               <Fragment key={index}>
                 {index > 0 && (
                   <TextField
+                    variant="form"
                     className={styles.slug}
                     placeholder={`[${slug}]`}
                     align="center"
diff --git a/packages/website-ue/src/components/TextField/index.css b/packages/website-ue/src/components/TextField/index.css
index 58caac3b3..2090c6627 100644
--- a/packages/website-ue/src/components/TextField/index.css
+++ b/packages/website-ue/src/components/TextField/index.css
@@ -5,15 +5,30 @@
 
   gap: var(--space-3);
 
-  border-radius: var(--max-size);
-
-  background-color: var(--gray-1);
-  box-shadow: var(--shadow-interactive), var(--shadow-cavity);
   cursor: text;
 
   font: inherit;
   color: var(--gray-11);
 
+  &[data-variant="bubble"] {
+    border-radius: var(--max-size);
+
+    background-color: var(--gray-1);
+    box-shadow: var(--shadow-interactive), var(--shadow-cavity);
+
+    input {
+      padding: var(--space-3) var(--space-4);
+    }
+  }
+
+  &[data-variant="form"] {
+    border-bottom: var(--space-1) solid var(--gray-6);
+
+    input {
+      padding: var(--space-2);
+    }
+  }
+
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
 
@@ -34,7 +49,7 @@
     color: var(--gray-9);
 
     input::placeholder {
-      color: var(--gray-9);
+      color: var(--gray-6);
     }
   }
 
@@ -52,12 +67,11 @@
     cursor: inherit;
 
     font: inherit;
-    padding: var(--space-3) var(--space-4);
 
     color: var(--gray-12);
 
     &::placeholder {
-      color: var(--gray-11);
+      color: var(--gray-9);
     }
 
     &:focus {
diff --git a/packages/website-ue/src/components/TextField/index.tsx b/packages/website-ue/src/components/TextField/index.tsx
index 843766fc1..7bc9a6956 100644
--- a/packages/website-ue/src/components/TextField/index.tsx
+++ b/packages/website-ue/src/components/TextField/index.tsx
@@ -14,6 +14,7 @@ export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
   align?: "left" | "center" | "right";
   autoWidth?: boolean;
+  variant?: "bubble" | "form";
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -27,6 +28,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       disabled,
       value,
       onChange,
+      variant = "bubble",
       ...props
     },
     ref,
@@ -52,6 +54,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         className={classNames("text-field", className)}
         data-has-icon={children !== undefined}
         data-disabled={disabled}
+        data-variant={variant}
       >
         {children}
         <input