diff --git a/packages/components/form-field/src/FormField.tsx b/packages/components/form-field/src/FormField.tsx
new file mode 100644
index 00000000..f94ef494
--- /dev/null
+++ b/packages/components/form-field/src/FormField.tsx
@@ -0,0 +1,69 @@
+import React, { useMemo } from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+import { Text } from "@react-ck/text";
+import { FormFieldContext, FormFieldContextProps } from "./context";
+
+export interface FormFieldProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
+  /** Specifies the visual style of the form-field  */
+  skin?: FormFieldContextProps["skin"];
+  /** The main label for the form field */
+  label?: React.ReactNode;
+  /** The description text for the form field */
+  description?: React.ReactNode;
+  /** The validation message text */
+  validationMessage?: React.ReactNode;
+}
+
+/**
+ * FormField is a component that provides a consistent layout and input peripherals.
+ *
+ * **WARNING**: This component is used as an internal utility - if you want to render an element such as an input, use its component directly
+ * @param props - {@link FormFieldProps}
+ * @returns a React element
+ */
+
+export const FormField = ({
+  skin = "default",
+  label,
+  description,
+  validationMessage,
+  children,
+  className,
+  ...otherProps
+}: Readonly<FormFieldProps>): React.ReactElement => {
+  const id = React.useId();
+
+  const context = useMemo<FormFieldContextProps>(
+    () => ({
+      skin,
+      id,
+    }),
+    [id, skin],
+  );
+
+  return (
+    <FormFieldContext.Provider value={context}>
+      <div {...otherProps} className={classNames(styles.root, styles[skin], className)}>
+        {label ? (
+          <Text variation="small" margin="none" as={<label htmlFor={id}>{label}</label>} />
+        ) : null}
+
+        <div className={styles.content}>{children}</div>
+
+        {description ? (
+          <Text variation="small" margin="none">
+            {description}
+          </Text>
+        ) : null}
+
+        {validationMessage ? (
+          <Text className={styles.validation_message} variation="small" margin="none">
+            {validationMessage}
+          </Text>
+        ) : null}
+      </div>
+    </FormFieldContext.Provider>
+  );
+};
diff --git a/packages/components/form-field/src/context.ts b/packages/components/form-field/src/context.ts
new file mode 100644
index 00000000..01941c24
--- /dev/null
+++ b/packages/components/form-field/src/context.ts
@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface FormFieldContextProps {
+  skin: "default" | "negative" | "average" | "positive" | "ghost";
+  id: string;
+}
+
+export const FormFieldContext = React.createContext<FormFieldContextProps>({
+  id: "",
+  skin: "default",
+});
+
+export const useFormFieldContext = (): FormFieldContextProps => React.useContext(FormFieldContext);
diff --git a/packages/components/form-field/src/index.ts b/packages/components/form-field/src/index.ts
new file mode 100644
index 00000000..f43b2b27
--- /dev/null
+++ b/packages/components/form-field/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./FormField";
+
+export { useFormFieldContext } from "./context";
diff --git a/packages/components/form-field/src/index.tsx b/packages/components/form-field/src/index.tsx
deleted file mode 100644
index c612c9e3..00000000
--- a/packages/components/form-field/src/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import styles from "./styles/index.module.scss";
-import classNames from "classnames";
-import { Text } from "@react-ck/text";
-
-export interface FormFieldProps
-  extends Pick<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
-  /** Specifies the visual style of the form-field  */
-  skin?: "default" | "negative" | "average" | "positive";
-  /** The main label for the form field */
-  label?: React.ReactNode;
-  /** The description text for the form field */
-  description?: React.ReactNode;
-  /** The validation message text */
-  validationMessage?: React.ReactNode;
-}
-
-/**
- * FormField is a component that provides a consistent layout and input peripherals.
- *
- * **WARNING**: This component is used as an internal utility - if you want to render an element such as an input, use its component directly
- * @param props - {@link FormFieldProps}
- * @returns a React element
- */
-
-export const FormField = ({
-  skin = "default",
-  label,
-  description,
-  validationMessage,
-  children,
-  className,
-  ...otherProps
-}: Readonly<FormFieldProps>): React.ReactElement => (
-  <div {...otherProps} className={classNames(styles.root, styles[skin], className)}>
-    {label ? (
-      <Text variation="small" margin="none" as={<label htmlFor="aaa">{label}</label>} />
-    ) : null}
-
-    <div className={styles.content}>{children}</div>
-
-    {description ? (
-      <Text variation="small" margin="none">
-        {description}
-      </Text>
-    ) : null}
-
-    {validationMessage ? (
-      <Text className={styles.validation_message} variation="small" margin="none">
-        {validationMessage}
-      </Text>
-    ) : null}
-  </div>
-);
diff --git a/packages/components/form-field/src/styles/_variables.scss b/packages/components/form-field/src/styles/_variables.scss
index 1761f2a5..a0210ac8 100644
--- a/packages/components/form-field/src/styles/_variables.scss
+++ b/packages/components/form-field/src/styles/_variables.scss
@@ -3,6 +3,10 @@ $form-field-styles: (
     border-color: get-color(neutral-light-2),
     color: get-color(neutral-dark-4),
   ),
+  ghost: (
+    border-color: transparent,
+    color: get-color(neutral-dark-4),
+  ),
   negative: (
     border-color: get-color(status-negative-dark),
     color: get-color(status-negative-dark),