@wix/headless-forms 0.0.10 → 0.0.11

package/cjs/dist/react/core/Form.js

@@ -6,10 +6,12 @@ exports.LoadingError = LoadingError;
 exports.Error = Error;
 exports.Submitted = Submitted;
 exports.Fields = Fields;
+exports.Field = Field;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const services_manager_react_1 = require("@wix/services-manager-react");
 const services_manager_1 = require("@wix/services-manager");
 const form_service_js_1 = require("../../services/form-service.js");
+const utils_js_1 = require("../utils.js");
 const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
 /**
  * Root component that provides the Form service context to its children.
@@ -235,3 +237,42 @@ function Fields(props) {
         submitForm,
     });
 }
+/**
+ * Headless Field component that provides field layout data and grid styles.
+ * This component accesses field configuration and calculates grid positioning.
+ *
+ * @component
+ * @param {FieldProps} props - Component props
+ * @param {FieldProps['children']} props.children - Render prop function that receives field layout data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function CustomField({ id, layout }) {
+ *   return (
+ *     <Form.Field id={id} layout={layout}>
+ *       {({ id, layout, gridStyles }) => (
+ *         <div data-field-id={id}>
+ *           <div style={gridStyles.label}>Label</div>
+ *           <div style={gridStyles.input}>Input</div>
+ *         </div>
+ *       )}
+ *     </Form.Field>
+ *   );
+ * }
+ * ```
+ */
+function Field(props) {
+    const { id, children, layout } = props;
+    const { formSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const form = formSignal.get();
+    if (!form) {
+        return null;
+    }
+    const gridStyles = (0, utils_js_1.calculateGridStyles)(layout);
+    return children({
+        id,
+        layout,
+        gridStyles,
+    });
+}

package/cjs/dist/react/utils.d.ts

@@ -0,0 +1,13 @@
+import { Layout } from './core/Form';
+export declare function calculateGridStyles(layout: Layout): {
+    label: {
+        gridRow: string;
+        gridColumn: string;
+        display: string;
+        alignItems: string;
+    };
+    input: {
+        gridRow: string;
+        gridColumn: string;
+    };
+};

package/cjs/dist/react/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateGridStyles = calculateGridStyles;
+function calculateGridStyles(layout) {
+    const labelRow = 1;
+    const inputRow = 2;
+    const gridColumn = `${layout.column + 1} / span ${layout.width}`;
+    return {
+        label: {
+            gridRow: `${labelRow} / span 1`,
+            gridColumn,
+            display: 'flex',
+            alignItems: 'flex-end',
+        },
+        input: {
+            gridRow: `${inputRow} / span 1`,
+            gridColumn,
+        },
+    };
+}

package/cjs/dist/services/form-service.d.ts

@@ -13,6 +13,8 @@ export type SubmitResponse = {
     message: string;
 } | {
     type: 'idle';
+} | {
+    type: 'loading';
 };
 /**
  * API interface for the Form service, providing reactive form data management.

package/cjs/dist/services/form-service.js

@@ -71,7 +71,10 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
     }
     async function defaultSubmitHandler(formId, formValues) {
         try {
-            await forms_1.submissions.createSubmission({ formId, ...formValues });
+            await forms_1.submissions.createSubmission({
+                formId,
+                submissions: formValues,
+            });
             // TODO: add message
             return { type: 'success' };
         }
@@ -92,7 +95,7 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
         }
         // @ts-expect-error
         const formId = form._id ? form._id : form.id;
-        submitResponseSignal.set({ type: 'idle' });
+        submitResponseSignal.set({ type: 'loading' });
         try {
             const handler = config.onSubmit || defaultSubmitHandler;
             const response = await handler(formId, formValues);

package/dist/react/Form.d.ts

@@ -303,6 +303,9 @@ export declare const Submitted: React.ForwardRefExoticComponent<SubmittedProps &
 /**
  * Mapping of form field types to their corresponding React components.
  *
+ * ALL field components in this map MUST use Form.Field for proper
+ * grid layout positioning.
+ *
  * Each key represents a field type identifier that matches the field types defined
  * in the form configuration, and each value is a React component that will receive
  * the field's props and render the appropriate UI element.
@@ -401,6 +404,8 @@ export interface FieldMap {
  *
  * @interface FieldsProps
  * @property {FieldMap} fieldMap - A mapping of field types to their corresponding React components
+ * @property {string} rowGapClassname - CSS class name for gap between rows
+ * @property {string} columnGapClassname - CSS class name for gap between columns
  * @example
  * ```tsx
  * const FIELD_MAP = {
@@ -414,11 +419,13 @@ export interface FieldMap {
  *   // ... remaining field components
  * };
  *
- * <Form.Fields fieldMap={FIELD_MAP} />
+ * <Form.Fields fieldMap={FIELD_MAP} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
  * ```
  */
 interface FieldsProps {
     fieldMap: FieldMap;
+    rowGapClassname: string;
+    columnGapClassname: string;
 }
 /**
  * Fields component for rendering a form with custom field renderers.
@@ -428,6 +435,8 @@ interface FieldsProps {
  * @component
  * @param {FieldsProps} props - Component props
  * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components
+ * @param {string} props.rowGapClassname - CSS class name for gap between rows
+ * @param {string} props.columnGapClassname - CSS class name for gap between columns
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -446,7 +455,11 @@ interface FieldsProps {
  *     <Form.Root formServiceConfig={formServiceConfig}>
  *       <Form.Loading className="flex justify-center p-4" />
  *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Fields
+ *         fieldMap={FIELD_MAP}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
  *     </Form.Root>
  *   );
  * }
@@ -461,12 +474,15 @@ interface FieldsProps {
  * - Field validation and error display
  * - Form state management
  * - Field value updates
+ * - Grid layout with configurable row and column gaps
  *
  * Must be used within Form.Root to access form context.
  *
  * @component
  * @param {FieldsProps} props - The component props
  * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components. Each key represents a field type (e.g., 'TEXT_INPUT', 'CHECKBOX') and the value is the React component that should render that field type.
+ * @param {string} props.rowGapClassname - CSS class name for gap between form rows
+ * @param {string} props.columnGapClassname - CSS class name for gap between form columns
  *
  * @example
  * ```tsx
@@ -534,7 +550,11 @@ interface FieldsProps {
  *     <Form.Root formServiceConfig={formServiceConfig}>
  *       <Form.Loading className="flex justify-center p-4" />
  *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Fields
+ *         fieldMap={FIELD_MAP}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
  *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
  *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
  *     </Form.Root>
@@ -544,25 +564,130 @@ interface FieldsProps {
  *
  * @example
  * ```tsx
- * // Advanced usage with custom field components
- * const CustomTextField = ({ value, onChange, label, error, ...props }) => (
- *   <div className="form-field">
- *     <label className="text-foreground font-paragraph">{label}</label>
- *     <input
- *       value={value || ''}
- *       onChange={(e) => onChange(e.target.value)}
- *       className="bg-background border-foreground text-foreground"
- *       {...props}
- *     />
- *     {error && <span className="text-destructive">{error}</span>}
- *   </div>
- * );
+ * // Creating custom field components - ALL field components MUST use Form.Field
+ * // This example shows the REQUIRED structure for a TEXT_INPUT component
+ * import { Form, type TextInputProps } from '@wix/headless-forms/react';
+ *
+ * const TextInput = (props: TextInputProps) => {
+ *   const { id, value, onChange, label, error, required, ...inputProps } = props;
+ *
+ *   // Form.Field provides automatic grid layout positioning
+ *   return (
+ *     <Form.Field id={id}>
+ *       <Form.Field.Label>
+ *         <label className="text-foreground font-paragraph">
+ *           {label}
+ *           {required && <span className="text-destructive ml-1">*</span>}
+ *         </label>
+ *       </Form.Field.Label>
+ *       <Form.Field.Input
+ *         description={error && <span className="text-destructive text-sm">{error}</span>}
+ *       >
+ *         <input
+ *           type="text"
+ *           value={value || ''}
+ *           onChange={(e) => onChange(e.target.value)}
+ *           className="bg-background border-foreground text-foreground"
+ *           aria-invalid={!!error}
+ *           {...inputProps}
+ *         />
+ *       </Form.Field.Input>
+ *     </Form.Field>
+ *   );
+ * };
  *
  * const FIELD_MAP = {
- *   TEXT_INPUT: CustomTextField,
- *   // ... other field components
+ *   TEXT_INPUT: TextInput,
+ *   // ... all other field components must also use Form.Field
  * };
  * ```
  */
 export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Field container component
+ */
+export interface FieldProps {
+    /** The unique identifier for this field */
+    id: string;
+    /** Child components (Field.Label, Field.Input, etc.) */
+    children: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the root element */
+    className?: string;
+}
+/**
+ * Field component with sub-components
+ */
+interface FieldComponent extends React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>> {
+    Label: typeof FieldLabel;
+    Input: typeof FieldInput;
+}
+/**
+ * Props for Field.Label component
+ */
+export interface FieldLabelProps {
+    /** Label content to display */
+    children: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the label element */
+    className?: string;
+}
+/**
+ * Props for Field.Input component
+ */
+export interface FieldInputProps {
+    /** Input element to render */
+    children: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the input element */
+    className?: string;
+    /** Description text to display below the input */
+    description?: React.ReactNode;
+}
+/**
+ * Label component for a form field with automatic grid positioning.
+ * Must be used within a Form.Field component.
+ * Renders in the label row of the field's grid layout.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <Form.Field id="email">
+ *   <Form.Field.Label>
+ *     <label className="text-foreground font-paragraph">Email Address</label>
+ *   </Form.Field.Label>
+ *   <Form.Field.Input>
+ *     <input type="email" className="bg-background border-foreground" />
+ *   </Form.Field.Input>
+ * </Form.Field>
+ * ```
+ */
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Input component for a form field with automatic grid positioning.
+ * Must be used within a Form.Field component.
+ * Renders in the input row of the field's grid layout with optional description.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <Form.Field id="password">
+ *   <Form.Field.Label>
+ *     <label className="text-foreground font-paragraph">Password</label>
+ *   </Form.Field.Label>
+ *   <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
+ *     <input type="password" className="bg-background border-foreground text-foreground" />
+ *   </Form.Field.Input>
+ * </Form.Field>
+ * ```
+ */
+export declare const FieldInput: React.ForwardRefExoticComponent<FieldInputProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: FieldComponent;
 export {};

package/dist/react/Form.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useCallback } from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import { Form as FormViewer, } from '@wix/form-public';
-import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, } from './core/Form.js';
+import { useForm, FormProvider, } from '@wix/form-public';
+import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, Field as CoreField, } from './core/Form.js';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -11,6 +11,9 @@ var TestIds;
     TestIds["formLoadingError"] = "form-loading-error";
     TestIds["formError"] = "form-error";
     TestIds["formSubmitted"] = "form-submitted";
+    TestIds["fieldRoot"] = "field-root";
+    TestIds["fieldLabel"] = "field-label";
+    TestIds["fieldInput"] = "field-input";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete form experience.
@@ -312,6 +315,8 @@ export const Submitted = React.forwardRef((props, ref) => {
  * @component
  * @param {FieldsProps} props - Component props
  * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components
+ * @param {string} props.rowGapClassname - CSS class name for gap between rows
+ * @param {string} props.columnGapClassname - CSS class name for gap between columns
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -330,7 +335,11 @@ export const Submitted = React.forwardRef((props, ref) => {
  *     <Form.Root formServiceConfig={formServiceConfig}>
  *       <Form.Loading className="flex justify-center p-4" />
  *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Fields
+ *         fieldMap={FIELD_MAP}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
  *     </Form.Root>
  *   );
  * }
@@ -345,12 +354,15 @@ export const Submitted = React.forwardRef((props, ref) => {
  * - Field validation and error display
  * - Form state management
  * - Field value updates
+ * - Grid layout with configurable row and column gaps
  *
  * Must be used within Form.Root to access form context.
  *
  * @component
  * @param {FieldsProps} props - The component props
  * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components. Each key represents a field type (e.g., 'TEXT_INPUT', 'CHECKBOX') and the value is the React component that should render that field type.
+ * @param {string} props.rowGapClassname - CSS class name for gap between form rows
+ * @param {string} props.columnGapClassname - CSS class name for gap between form columns
  *
  * @example
  * ```tsx
@@ -418,7 +430,11 @@ export const Submitted = React.forwardRef((props, ref) => {
  *     <Form.Root formServiceConfig={formServiceConfig}>
  *       <Form.Loading className="flex justify-center p-4" />
  *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Fields
+ *         fieldMap={FIELD_MAP}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
  *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
  *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
  *     </Form.Root>
@@ -428,23 +444,41 @@ export const Submitted = React.forwardRef((props, ref) => {
  *
  * @example
  * ```tsx
- * // Advanced usage with custom field components
- * const CustomTextField = ({ value, onChange, label, error, ...props }) => (
- *   <div className="form-field">
- *     <label className="text-foreground font-paragraph">{label}</label>
- *     <input
- *       value={value || ''}
- *       onChange={(e) => onChange(e.target.value)}
- *       className="bg-background border-foreground text-foreground"
- *       {...props}
- *     />
- *     {error && <span className="text-destructive">{error}</span>}
- *   </div>
- * );
+ * // Creating custom field components - ALL field components MUST use Form.Field
+ * // This example shows the REQUIRED structure for a TEXT_INPUT component
+ * import { Form, type TextInputProps } from '@wix/headless-forms/react';
+ *
+ * const TextInput = (props: TextInputProps) => {
+ *   const { id, value, onChange, label, error, required, ...inputProps } = props;
+ *
+ *   // Form.Field provides automatic grid layout positioning
+ *   return (
+ *     <Form.Field id={id}>
+ *       <Form.Field.Label>
+ *         <label className="text-foreground font-paragraph">
+ *           {label}
+ *           {required && <span className="text-destructive ml-1">*</span>}
+ *         </label>
+ *       </Form.Field.Label>
+ *       <Form.Field.Input
+ *         description={error && <span className="text-destructive text-sm">{error}</span>}
+ *       >
+ *         <input
+ *           type="text"
+ *           value={value || ''}
+ *           onChange={(e) => onChange(e.target.value)}
+ *           className="bg-background border-foreground text-foreground"
+ *           aria-invalid={!!error}
+ *           {...inputProps}
+ *         />
+ *       </Form.Field.Input>
+ *     </Form.Field>
+ *   );
+ * };
  *
  * const FIELD_MAP = {
- *   TEXT_INPUT: CustomTextField,
- *   // ... other field components
+ *   TEXT_INPUT: TextInput,
+ *   // ... all other field components must also use Form.Field
  * };
  * ```
  */
@@ -460,6 +494,164 @@ export const Fields = React.forwardRef((props, ref) => {
     return (_jsx(CoreFields, { children: ({ form, submitForm }) => {
             if (!form)
                 return null;
-            return (_jsx("div", { ref: ref, children: _jsx(FormViewer, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues) }) }));
+            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+        } }));
+});
+const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
+    const formData = useForm({
+        form,
+        values,
+        onChange,
+        errors,
+        onValidate,
+        submitForm,
+        fieldMap,
+    });
+    if (!formData)
+        return null;
+    console.log('formData', formData);
+    const { columnCount, fieldElements, fieldsLayout } = formData;
+    return (
+    // TODO: use readOnly, isDisabled
+    // TODO: step title a11y support
+    // TODO: mobile support?
+    _jsx(FieldLayoutProvider, { value: fieldsLayout, children: _jsx("form", { onSubmit: (e) => e.preventDefault(), children: _jsx("fieldset", { style: { display: 'flex', flexDirection: 'column' }, className: rowGapClassname, children: fieldElements.map((rowElements, index) => {
+                    return (_jsx("div", { style: {
+                            display: 'grid',
+                            width: '100%',
+                            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+                            gridAutoRows: 'minmax(min-content, max-content)',
+                        }, className: columnGapClassname, children: rowElements }, index));
+                }) }) }) }));
+};
+/**
+ * Context for sharing field layout data across the form
+ * @internal
+ */
+const FieldLayoutContext = React.createContext(null);
+/**
+ * Provider component that makes field layout data available to child components
+ * @internal
+ */
+const FieldLayoutProvider = ({ value, children, }) => {
+    return (_jsx(FieldLayoutContext.Provider, { value: value, children: children }));
+};
+/**
+ * Hook to access layout configuration for a specific field
+ * @internal
+ * @param {string} fieldId - The unique identifier of the field
+ * @returns {Layout | null} The layout configuration for the field, or null if not found
+ */
+function useFieldLayout(fieldId) {
+    const layoutMap = React.useContext(FieldLayoutContext);
+    if (!layoutMap) {
+        return null;
+    }
+    return layoutMap[fieldId] || null;
+}
+const FieldContext = React.createContext(null);
+/**
+ * Hook to access field context
+ */
+function useFieldContext() {
+    const context = React.useContext(FieldContext);
+    if (!context) {
+        throw new globalThis.Error('Field components must be used within a Form.Field component');
+    }
+    return context;
+}
+/**
+ * Container component for a form field with grid layout support.
+ * Provides context to Field.Label and Field.Input child components.
+ * Based on the default-field-layout functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormFields() {
+ *   return (
+ *     <Form.Field id="username">
+ *       <Form.Field.Label>
+ *         <label className="text-foreground font-paragraph">Username</label>
+ *       </Form.Field.Label>
+ *       <Form.Field.Input description={<span className="text-secondary-foreground">Required</span>}>
+ *         <input className="bg-background border-foreground text-foreground" />
+ *       </Form.Field.Input>
+ *     </Form.Field>
+ *   );
+ * }
+ * ```
+ */
+const FieldRoot = React.forwardRef((props, ref) => {
+    const { id, children, asChild, className, ...otherProps } = props;
+    const layout = useFieldLayout(id);
+    if (!layout) {
+        return null;
+    }
+    return (_jsx(CoreField, { id: id, layout: layout, children: (fieldData) => {
+            const contextValue = {
+                id,
+                layout: fieldData.layout,
+                gridStyles: fieldData.gridStyles,
+            };
+            return (_jsx(FieldContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.fieldRoot, customElement: children, customElementProps: {}, ...otherProps, children: children }) }));
         } }));
 });
+FieldRoot.displayName = 'Form.Field';
+/**
+ * Label component for a form field with automatic grid positioning.
+ * Must be used within a Form.Field component.
+ * Renders in the label row of the field's grid layout.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <Form.Field id="email">
+ *   <Form.Field.Label>
+ *     <label className="text-foreground font-paragraph">Email Address</label>
+ *   </Form.Field.Label>
+ *   <Form.Field.Input>
+ *     <input type="email" className="bg-background border-foreground" />
+ *   </Form.Field.Input>
+ * </Form.Field>
+ * ```
+ */
+export const FieldLabel = React.forwardRef((props, ref) => {
+    const { children, asChild, className, ...otherProps } = props;
+    const { gridStyles } = useFieldContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.label, "data-testid": TestIds.fieldLabel, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
+});
+FieldLabel.displayName = 'Form.Field.Label';
+/**
+ * Input component for a form field with automatic grid positioning.
+ * Must be used within a Form.Field component.
+ * Renders in the input row of the field's grid layout with optional description.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * <Form.Field id="password">
+ *   <Form.Field.Label>
+ *     <label className="text-foreground font-paragraph">Password</label>
+ *   </Form.Field.Label>
+ *   <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
+ *     <input type="password" className="bg-background border-foreground text-foreground" />
+ *   </Form.Field.Input>
+ * </Form.Field>
+ * ```
+ */
+export const FieldInput = React.forwardRef((props, ref) => {
+    const { children, description, asChild, className, ...otherProps } = props;
+    const { gridStyles } = useFieldContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.input, "data-testid": TestIds.fieldInput, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
+});
+FieldInput.displayName = 'Form.Field.Input';
+export const Field = FieldRoot;
+Field.Label = FieldLabel;
+Field.Input = FieldInput;