diff --git a/docs/framework/solid/guides/form-composition.md b/docs/framework/solid/guides/form-composition.md
index 9d2c92e7c..af7c66de6 100644
--- a/docs/framework/solid/guides/form-composition.md
+++ b/docs/framework/solid/guides/form-composition.md
@@ -216,6 +216,238 @@ function App() {
 
 While hooks are the future of Solid, higher-order components are still a powerful tool for composition. In particular, the API of `withForm` enables us to have strong type-safety without requiring users to pass generics.
 
+## Reusing groups of fields in multiple forms
+
+Sometimes, a pair of fields are so closely related that it makes sense to group and reuse them — like the password example listed in the [linked fields guide](../linked-fields.md). Instead of repeating this logic across multiple forms, you can utilize the `withFieldGroup` higher-order component.
+
+> Unlike `withForm`, validators cannot be specified and could be any value.
+> Ensure that your fields can accept unknown error types.
+
+Rewriting the passwords example using `withFieldGroup` would look like this:
+
+```tsx
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+    ErrorInfo,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
+
+type PasswordFields = {
+  password: string
+  confirm_password: string
+}
+
+// These default values are not used at runtime, but the keys are needed for mapping purposes.
+// This allows you to spread `formOptions` without needing to redeclare it.
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const FieldGroupPasswordFields = withFieldGroup({
+  defaultValues,
+  // You may also restrict the group to only use forms that implement this submit meta.
+  // If none is provided, any form with the right defaultValues may use it.
+  // onSubmitMeta: { action: '' }
+
+  // Optional, but adds props to the `render` function in addition to `form`
+  props: {
+    // These default values are also for type-checking and are not used at runtime
+    title: 'Password',
+  },
+  // Internally, you will have access to a `group` instead of a `form`
+  render: function Render({ group, title }) {
+    // access reactive values using the group store
+    const password = useStore(group.store, (state) => state.values.password)
+    // or the form itself
+    const isSubmitting = useStore(
+      group.form.store,
+      (state) => state.isSubmitting,
+    )
+
+    return (
+      <div>
+        <h2>{title}</h2>
+        {/* Groups also have access to Field, Subscribe, Field, AppField and AppForm */}
+        <group.AppField name="password">
+          {(field) => <field.TextField label="Password" />}
+        </group.AppField>
+        <group.AppField
+          name="confirm_password"
+          validators={{
+            onChangeListenTo: ['password'],
+            onChange: ({ value, fieldApi }) => {
+              // The form could be any values, so it is typed as 'unknown'
+              const values: unknown = fieldApi.form.state.values
+              // use the group methods instead
+              if (value !== group.getFieldValue('password')) {
+                return 'Passwords do not match'
+              }
+              return undefined
+            },
+          }}
+        >
+          {(field) => (
+            <div>
+              <field.TextField label="Confirm Password" />
+              <field.ErrorInfo />
+            </div>
+          )}
+        </group.AppField>
+      </div>
+    )
+  },
+})
+```
+
+We can now use these grouped fields in any form that implements the default values:
+
+```tsx
+// You are allowed to extend the group fields as long as the
+// existing properties remain unchanged
+type Account = PasswordFields & {
+  provider: string
+  username: string
+}
+
+// You may nest the group fields wherever you want
+type FormValues = {
+  name: string
+  age: number
+  account_data: PasswordFields
+  linked_accounts: Account[]
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  account_data: {
+    password: '',
+    confirm_password: '',
+  },
+  linked_accounts: [
+    {
+      provider: 'TanStack',
+      username: '',
+      password: '',
+      confirm_password: '',
+    },
+  ],
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+    // If the group didn't specify an `onSubmitMeta` property,
+    // the form may implement any meta it wants.
+    // Otherwise, the meta must be defined and match.
+    onSubmitMeta: { action: '' },
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You must specify where the fields can be found
+        fields="account_data"
+        title="Passwords"
+      />
+      <form.Field name="linked_accounts" mode="array">
+        {(field) =>
+          field.state.value.map((account, i) => (
+            <FieldGroupPasswordFields
+              key={account.provider}
+              form={form}
+              // The fields may be in nested fields
+              fields={`linked_accounts[${i}]`}
+              title={account.provider}
+            />
+          ))
+        }
+      </form.Field>
+    </form.AppForm>
+  )
+}
+```
+
+### Mapping field group values to a different field
+
+You may want to keep the password fields on the top level of your form, or rename the properties for clarity. You can map field group values
+to their true location by changing the `field` property:
+
+> [!IMPORTANT]
+> Due to TypeScript limitations, field mapping is only allowed for objects. You can use records or arrays at the top level of a field group, but you will not be able to map the fields.
+
+```tsx
+// To have an easier form, you can keep the fields on the top level
+type FormValues = {
+  name: string
+  age: number
+  password: string
+  confirm_password: string
+}
+
+const defaultValues: FormValues = {
+  name: '',
+  age: 0,
+  password: '',
+  confirm_password: '',
+}
+
+function App() {
+  const form = useAppForm({
+    defaultValues,
+  })
+
+  return (
+    <form.AppForm>
+      <FieldGroupPasswordFields
+        form={form}
+        // You can map the fields to their equivalent deep key
+        fields={{
+          password: 'password',
+          confirm_password: 'confirm_password',
+          // or map them to differently named keys entirely
+          // 'password': 'name'
+        }}
+        title="Passwords"
+      />
+    </form.AppForm>
+  )
+}
+```
+
+If you expect your fields to always be at the top level of your form, you can create a quick map
+of your field groups using a helper function:
+
+```tsx
+const defaultValues: PasswordFields = {
+  password: '',
+  confirm_password: '',
+}
+
+const passwordFields = createFieldMap(defaultValues)
+/* This generates the following map:
+ {
+    'password': 'password',
+    'confirm_password': 'confirm_password'
+ }
+*/
+
+// Usage:
+<FieldGroupPasswordFields
+  form={form}
+  fields={passwordFields}
+  title="Passwords"
+/>
+```
+
 ## Tree-shaking form and field components
 
 While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
diff --git a/docs/framework/solid/reference/functions/createformhook.md b/docs/framework/solid/reference/functions/createformhook.md
index a36b3ac77..60d00774a 100644
--- a/docs/framework/solid/reference/functions/createformhook.md
+++ b/docs/framework/solid/reference/functions/createformhook.md
@@ -124,3 +124,122 @@ withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync
 ##### Returns
 
 `Element`
+
+
+### withFieldGroup()
+
+```ts
+withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps>(__namedParameters) => <TFormData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta>(params) => Element;
+```
+
+#### Type Parameters
+
+• **TFieldGroupData**
+
+• **TSubmitMeta**
+
+• **TRenderProps** *extends* `Record`\<`string`, `unknown`\> = \{\}
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFieldGroupProps`](../../interfaces/withfieldgroupprops.md)\<`TFieldGroupData`, `TComponents`, `TFormComponents`, `TSubmitMeta`, `TRenderProps`\>
+
+#### Returns
+
+`Function`
+
+##### Type Parameters
+
+• **TFormData**
+
+• **TFields** *extends* 
+  \| `string`
+  \| \{ \[K in string \| number \| symbol\]: DeepKeysOfType\<TFormData, TFieldGroupData\[K\]\> \}
+
+• **TOnMount** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChange** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChangeAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnBlur** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnBlurAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmit** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmitAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamic** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamicAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnServer** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TFormSubmitMeta**
+
+##### Parameters
+
+###### params
+
+`PropsWithChildren`\<`NoInfer`\<`TRenderProps`\> & `object`\>
+
+##### Returns
+
+`Element`
+
+### withForm()
+
+```ts
+withForm: <TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TRenderProps>(__namedParameters) => (props) => Element;
+```
+
+#### Type Parameters
+
+• **TFormData**
+
+• **TOnMount** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChange** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChangeAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnBlur** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnBlurAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmit** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmitAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamic** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamicAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnServer** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TSubmitMeta**
+
+• **TRenderProps** *extends* `object` = \{\}
+
+#### Parameters
+
+##### \_\_namedParameters
+
+[`WithFormProps`](../../interfaces/withformprops.md)\<`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`, `TRenderProps`\>
+
+#### Returns
+
+`Function`
+
+##### Parameters
+
+###### props
+
+`PropsWithChildren`\<`NoInfer`\<`UnwrapOrAny`\<`TRenderProps`\>\> & `object`\>
+
+##### Returns
+
+`Element`
\ No newline at end of file
diff --git a/docs/framework/solid/reference/functions/usefieldgroup.md b/docs/framework/solid/reference/functions/usefieldgroup.md
new file mode 100644
index 000000000..1b5b3a8fa
--- /dev/null
+++ b/docs/framework/solid/reference/functions/usefieldgroup.md
@@ -0,0 +1,79 @@
+---
+id: useFieldGroup
+title: useFieldGroup
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Function: useFieldGroup()
+
+```ts
+function useFieldGroup<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TComponents, TFormComponents, TSubmitMeta>(opts): AppFieldExtendedReactFieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>
+```
+
+Defined in: [packages/react-form/src/useFieldGroup.tsx:89](https://github.com/TanStack/form/blob/main/packages/react-form/src/useFieldGroup.tsx#L89)
+
+## Type Parameters
+
+• **TFormData**
+
+• **TFieldGroupData**
+
+• **TFields** *extends* 
+  \| `string`
+  \| \{ \[K in string \| number \| symbol\]: DeepKeysOfType\<TFormData, TFieldGroupData\[K\]\> \}
+
+• **TOnMount** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChange** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnChangeAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnBlur** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnBlurAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmit** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnSubmitAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamic** *extends* `undefined` \| `FormValidateOrFn`\<`TFormData`\>
+
+• **TOnDynamicAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TOnServer** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TFormData`\>
+
+• **TComponents** *extends* `Record`\<`string`, `ComponentType`\<`any`\>\>
+
+• **TFormComponents** *extends* `Record`\<`string`, `ComponentType`\<`any`\>\>
+
+• **TSubmitMeta** = `never`
+
+## Parameters
+
+### opts
+
+#### defaultValues?
+
+`TFieldGroupData`
+
+#### fields
+
+`TFields`
+
+#### form
+
+  \| `AppFieldExtendedReactFormApi`\<`TFormData`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+  \| `AppFieldExtendedReactFieldGroupApi`\<`unknown`, `TFormData`, `string` \| `FieldsMap`\<`unknown`, `TFormData`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
+
+#### formComponents
+
+`TFormComponents`
+
+#### onSubmitMeta?
+
+`TSubmitMeta`
+
+## Returns
+
+`AppFieldExtendedReactFieldGroupApi`\<`TFormData`, `TFieldGroupData`, `TFields`, `TOnMount`, `TOnChange`, `TOnChangeAsync`, `TOnBlur`, `TOnBlurAsync`, `TOnSubmit`, `TOnSubmitAsync`, `TOnDynamic`, `TOnDynamicAsync`, `TOnServer`, `TSubmitMeta`, `TComponents`, `TFormComponents`\>
diff --git a/docs/framework/solid/reference/interfaces/withfieldgroupprops.md b/docs/framework/solid/reference/interfaces/withfieldgroupprops.md
new file mode 100644
index 000000000..46536312b
--- /dev/null
+++ b/docs/framework/solid/reference/interfaces/withfieldgroupprops.md
@@ -0,0 +1,56 @@
+---
+id: WithFieldGroupProps
+title: WithFieldGroupProps
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Interface: WithFieldGroupProps\<TFieldGroupData, TFieldComponents, TFormComponents, TSubmitMeta, TRenderProps\>
+
+Defined in: [packages/react-form/src/createFormHook.tsx:247](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createFormHook.tsx#L247)
+
+## Extends
+
+- `BaseFormOptions`\<`TFieldGroupData`, `TSubmitMeta`\>
+
+## Type Parameters
+
+• **TFieldGroupData**
+
+• **TFieldComponents** *extends* `Record`\<`string`, `ComponentType`\<`any`\>\>
+
+• **TFormComponents** *extends* `Record`\<`string`, `ComponentType`\<`any`\>\>
+
+• **TSubmitMeta**
+
+• **TRenderProps** *extends* `Record`\<`string`, `unknown`\> = `Record`\<`string`, `never`\>
+
+## Properties
+
+### props?
+
+```ts
+optional props: TRenderProps;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:255](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L255)
+
+***
+
+### render()
+
+```ts
+render: (props) => Element;
+```
+
+Defined in: [packages/react-form/src/createFormHook.tsx:256](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L256)
+
+#### Parameters
+
+##### props
+
+`PropsWithChildren`\<`NoInfer`\<`TRenderProps`\> & `object`\>
+
+#### Returns
+
+`Element`
diff --git a/packages/react-form/src/createFormHook.tsx b/packages/react-form/src/createFormHook.tsx
index 548fc2322..79957cf95 100644
--- a/packages/react-form/src/createFormHook.tsx
+++ b/packages/react-form/src/createFormHook.tsx
@@ -179,7 +179,7 @@ export type AppFieldExtendedReactFormApi<
       TOnBlurAsync,
       TOnSubmit,
       TOnSubmitAsync,
-      TOnDynamic,
+      TOnDynamic, 
       TOnDynamicAsync,
       TOnServer,
       TSubmitMeta,
diff --git a/packages/solid-form/src/createField.tsx b/packages/solid-form/src/createField.tsx
index de263f00c..9242a287a 100644
--- a/packages/solid-form/src/createField.tsx
+++ b/packages/solid-form/src/createField.tsx
@@ -11,6 +11,7 @@ import type {
   DeepValue,
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
+  FieldValidators,
   FormAsyncValidateOrFn,
   FormValidateOrFn,
   Narrow,
@@ -539,6 +540,94 @@ export type FieldComponent<
   ExtendedApi
 >) => JSX.Element
 
+
+/**
+ * A type alias representing a field component for a form lens data type.
+ */
+export type LensFieldComponent<
+  in out TLensData,
+  in out TParentSubmitMeta,
+  in out ExtendedApi = {},
+> = <
+  const TName extends DeepKeys<TLensData>,
+  TData extends DeepValue<TLensData, TName>,
+  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnChangeAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnBlurAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnSubmitAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnDynamicAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+>({
+  children,
+  ...fieldOptions
+}: Omit<
+  FieldComponentBoundProps<
+    unknown,
+    string,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    TParentSubmitMeta,
+    ExtendedApi
+  >,
+  'name' | 'validators'
+> & {
+  name: TName
+  validators?: Omit<
+    FieldValidators<
+      unknown,
+      string,
+      TData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync
+    >,
+    'onChangeListenTo' | 'onBlurListenTo'
+  > & {
+    /**
+     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+     */
+    onChangeListenTo?: DeepKeys<TLensData>[]
+    /**
+     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+     */
+    onBlurListenTo?: DeepKeys<TLensData>[]
+  }
+}) => JSXElement
 interface FieldComponentProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
diff --git a/packages/solid-form/src/createFieldGroup.tsx b/packages/solid-form/src/createFieldGroup.tsx
new file mode 100644
index 000000000..0ecff7236
--- /dev/null
+++ b/packages/solid-form/src/createFieldGroup.tsx
@@ -0,0 +1,250 @@
+import {
+    AnyFieldGroupApi,
+	DeepKeysOfType,
+	FieldGroupApi,
+	FieldGroupState,
+	FieldsMap,
+	FormAsyncValidateOrFn,
+	FormValidateOrFn,
+    functionalUpdate,
+} from "@tanstack/form-core";
+import { Accessor, Component, createRenderEffect, createSignal, JSX, ParentComponent, ParentProps } from "solid-js";
+import { LensFieldComponent } from "./createField";
+import { AppFieldExtendedSolidFormApi } from "./createFormHook"
+import { useStore } from "@tanstack/solid-store";
+
+function LocalSubscribe({
+	lens,
+	selector,
+	children,
+}: ParentProps<{
+	lens: AnyFieldGroupApi;
+	selector: (state: FieldGroupState<any>) => FieldGroupState<any>;
+}>) {
+	const data = useStore(lens.store, selector);
+
+	return functionalUpdate(children, data);
+}
+
+/**
+ * @private
+ */
+export type AppFieldExtendedSolidFieldGroupApi<
+	TFormData,
+	TFieldGroupData,
+	TFields extends
+		| DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+		| FieldsMap<TFormData, TFieldGroupData>,
+	TOnMount extends undefined | FormValidateOrFn<TFormData>,
+	TOnChange extends undefined | FormValidateOrFn<TFormData>,
+	TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+	TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+	TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+	TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+	TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+	TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+	TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+	TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+	TSubmitMeta,
+	TFieldComponents extends Record<string, Component<any>>,
+	TFormComponents extends Record<string, Component<any>>,
+> = FieldGroupApi<
+	TFormData,
+	TFieldGroupData,
+	TFields,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TOnServer,
+	TSubmitMeta
+> &
+	NoInfer<TFormComponents> & {
+		AppField: LensFieldComponent<
+			TFieldGroupData,
+			TSubmitMeta,
+			NoInfer<TFieldComponents>
+		>;
+		AppForm: ParentComponent;
+		/**
+		 * A React component to render form fields. With this, you can render and manage individual form fields.
+		 */
+		Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>;
+
+		/**
+		 * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+		 */
+		Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {
+			selector?: (
+				state: NoInfer<FieldGroupState<TFieldGroupData>>,
+			) => TSelected;
+			children: ((state: NoInfer<TSelected>) => JSX.Element) | JSX.Element;
+		}) => JSX.Element;
+	};
+
+export function createFieldGroup<
+    TFormData,
+    TFieldGroupData,
+    TFields extends
+    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+    | FieldsMap<TFormData, TFieldGroupData>,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TComponents extends Record<string, Component<any>>,
+    TFormComponents extends Record<string, Component<any>>,
+    TSubmitMeta = never,
+>(opts: {
+    form:
+    | AppFieldExtendedSolidFormApi<
+        TFormData,
+        TOnMount,
+        TOnChange,
+        TOnChangeAsync,
+        TOnBlur,
+        TOnBlurAsync,
+        TOnSubmit,
+        TOnSubmitAsync,
+        TOnDynamic,
+        TOnDynamicAsync,
+        TOnServer,
+        TSubmitMeta,
+        TComponents,
+        TFormComponents
+    >
+    | AppFieldExtendedSolidFieldGroupApi<
+        // Since this only occurs if you nest it within other form lenses, it can be more
+        // lenient with the types.
+        unknown,
+        TFormData,
+        string | FieldsMap<unknown, TFormData>,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        TSubmitMeta,
+        TComponents,
+        TFormComponents
+    >;
+    fields: TFields;
+    defaultValues?: TFieldGroupData;
+    onSubmitMeta?: TSubmitMeta;
+    formComponents: TFormComponents;
+}): Accessor<AppFieldExtendedSolidFieldGroupApi<
+    TFormData,
+    TFieldGroupData,
+    TFields,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+    >> { 
+    const [formLensApi] = createSignal((() => {
+        const api = new FieldGroupApi(opts);
+        const form =
+        opts.form instanceof FieldGroupApi
+            ? (opts.form.form as AppFieldExtendedSolidFormApi<
+                    TFormData,
+                    TOnMount,
+                    TOnChange,
+                    TOnChangeAsync,
+                    TOnBlur,
+                    TOnBlurAsync,
+                    TOnSubmit,
+                    TOnSubmitAsync,
+                    TOnDynamic,
+                    TOnDynamicAsync,
+                    TOnServer,
+                    TSubmitMeta,
+                    TComponents,
+                    TFormComponents
+                >)
+                : opts.form;
+        
+        const extendedApi: AppFieldExtendedSolidFieldGroupApi<
+            TFormData,
+            TFieldGroupData,
+            TFields,
+            TOnMount,
+            TOnChange,
+            TOnChangeAsync,
+            TOnBlur,
+            TOnBlurAsync,
+            TOnSubmit,
+            TOnSubmitAsync,
+            TOnDynamic,
+            TOnDynamicAsync,
+            TOnServer,
+            TSubmitMeta,
+            TComponents,
+            TFormComponents
+            > = api as never;
+        extendedApi.AppForm = function AppForm(appFormProps) {
+            return <form.AppForm {...appFormProps} />
+        }
+
+        extendedApi.AppField = function AppField(props) {
+            return <form.AppField {...(formLensApi().getFormFieldOptions(props) as any)} />
+        }
+
+        extendedApi.Field = function Field(props) {
+            return <form.Field {...(formLensApi().getFormFieldOptions(props) as any)} />    
+        }
+
+        extendedApi.Subscribe = function Subscribe(props: any) {
+            return <LocalSubscribe lens={formLensApi()} selector={props.selector} children={ props.children} />
+        }
+        return Object.assign(extendedApi, {
+			...opts.formComponents,
+		}) as AppFieldExtendedSolidFieldGroupApi<
+			TFormData,
+			TFieldGroupData,
+			TFields,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TOnServer,
+			TSubmitMeta,
+			TComponents,
+			TFormComponents
+		>;
+    })())
+
+    createRenderEffect(() => {
+        formLensApi().mount()
+    })
+    return formLensApi;
+}
\ No newline at end of file
diff --git a/packages/solid-form/src/createFormHook.tsx b/packages/solid-form/src/createFormHook.tsx
index 9b02050e1..1c02ff129 100644
--- a/packages/solid-form/src/createFormHook.tsx
+++ b/packages/solid-form/src/createFormHook.tsx
@@ -1,9 +1,12 @@
-import { createContext, splitProps, useContext } from 'solid-js'
+import { createContext, createMemo, splitProps, useContext } from 'solid-js'
 import { createForm } from './createForm'
 import type {
   AnyFieldApi,
   AnyFormApi,
+  BaseFormOptions,
+  DeepKeysOfType,
   FieldApi,
+  FieldsMap,
   FormAsyncValidateOrFn,
   FormOptions,
   FormValidateOrFn,
@@ -17,6 +20,7 @@ import type {
 } from 'solid-js'
 import type { FieldComponent } from './createField'
 import type { SolidFormExtendedApi } from './createForm'
+import { AppFieldExtendedSolidFieldGroupApi, createFieldGroup } from './createFieldGroup'
 
 /**
  * TypeScript inferencing is weird.
@@ -51,8 +55,8 @@ import type { SolidFormExtendedApi } from './createForm'
 type UnwrapOrAny<T> = [unknown] extends [T] ? any : T
 type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]
   ? [T] extends [DefaultT]
-    ? any
-    : T
+  ? any
+  : T
   : T
 
 export function createFormHookContexts() {
@@ -143,7 +147,10 @@ interface CreateFormHookProps<
   formContext: Context<AnyFormApi>
 }
 
-type AppFieldExtendedSolidFormApi<
+/**
+ * @private
+ */
+export type AppFieldExtendedSolidFormApi<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
   TOnChange extends undefined | FormValidateOrFn<TFormData>,
@@ -208,19 +215,19 @@ export interface WithFormProps<
   TFormComponents extends Record<string, Component<any>>,
   TRenderProps extends Record<string, unknown> = Record<string, never>,
 > extends FormOptions<
-    TFormData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TOnServer,
-    TSubmitMeta
-  > {
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnDynamic,
+  TOnDynamicAsync,
+  TOnServer,
+  TSubmitMeta
+> {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
   render: (
@@ -247,6 +254,43 @@ export interface WithFormProps<
   ) => JSXElement
 }
 
+export interface WithFieldGroupProps<
+  TFieldGroupData,
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+  TSubmitMeta,
+  TRenderProps extends Record<string, unknown> = Record<string, never>,
+> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {
+  // Optional, but adds props to the `render` function outside of `form`
+  props?: TRenderProps
+  render: (
+    props: ParentProps<
+      NoInfer<TRenderProps> & {
+        group: AppFieldExtendedSolidFieldGroupApi<
+          unknown,
+          TFieldGroupData,
+          string | FieldsMap<unknown, TFieldGroupData>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          // this types it as 'never' in the render prop. It should prevent any
+          // untyped meta passed to the handleSubmit by accident.
+          unknown extends TSubmitMeta ? never : TSubmitMeta,
+          TFieldComponents,
+          TFormComponents
+        >
+      }
+    >,
+  ) => JSXElement
+}
+
 export function createFormHook<
   const TComponents extends Record<string, Component<any>>,
   const TFormComponents extends Record<string, Component<any>>,
@@ -354,7 +398,7 @@ export function createFormHook<
     extendedForm.AppForm = AppForm
     for (const [key, value] of Object.entries(opts.formComponents)) {
       // Since it's a generic I need to cast it to an object
-      ;(extendedForm as Record<string, any>)[key] = value
+      ; (extendedForm as Record<string, any>)[key] = value
     }
 
     return extendedForm
@@ -416,8 +460,91 @@ export function createFormHook<
     return (innerProps) => render({ ...props, ...innerProps })
   }
 
+  function withFieldGroup<
+    TFieldGroupData,
+    TSubmitMeta,
+    TRenderProps extends Record<string, unknown> = {},
+  >({
+    render,
+    defaultValues,
+    props,
+  }: WithFieldGroupProps<
+    TFieldGroupData,
+    TComponents,
+    TFormComponents,
+    TSubmitMeta,
+    TRenderProps
+  >): <
+    TFormData,
+    TFields extends
+    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+    | FieldsMap<TFormData, TFieldGroupData>,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TFormSubmitMeta,
+  >(
+    params: ParentProps<
+      NoInfer<TRenderProps> & {
+        form:
+        | AppFieldExtendedSolidFormApi<
+          TFormData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TOnDynamic,
+          TOnDynamicAsync,
+          TOnServer,
+          unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,
+          TComponents,
+          TFormComponents
+        >
+        | AppFieldExtendedSolidFieldGroupApi<
+          // Since this only occurs if you nest it within other field groups, it can be more
+          // lenient with the types.
+          unknown,
+          TFormData,
+          string | FieldsMap<unknown, TFormData>,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,
+          TComponents,
+          TFormComponents
+        >
+        fields: TFields
+      }
+    >,
+  ) => JSXElement {
+    return function Render(innerProps) {
+      const fieldGroupProps = createMemo(() => {
+        return { form: innerProps.form, fields: innerProps.fields, defaultValues, formComponents: opts.formComponents }
+      })
+      const fieldGroupApi = createFieldGroup(fieldGroupProps() as any);
+      return render({ ...props, ...innerProps, group: fieldGroupApi as any })
+    }
+  }
   return {
     useAppForm,
     withForm,
+    withFieldGroup
   }
 }
diff --git a/packages/solid-form/tests/createFormHook.test-d.tsx b/packages/solid-form/tests/createFormHook.test-d.tsx
index 067c2be1b..b7f43c002 100644
--- a/packages/solid-form/tests/createFormHook.test-d.tsx
+++ b/packages/solid-form/tests/createFormHook.test-d.tsx
@@ -2,6 +2,7 @@ import { describe, expectTypeOf, it } from 'vitest'
 import { formOptions } from '@tanstack/form-core'
 import { createFormHook, createFormHookContexts } from '../src'
 import type { JSX } from 'solid-js/jsx-runtime'
+import { JSXElement } from 'solid-js'
 
 const { fieldContext, useFieldContext, formContext, useFormContext } =
   createFormHookContexts()
@@ -10,7 +11,7 @@ function Test() {
   return null
 }
 
-const { useAppForm, withForm } = createFormHook({
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
   fieldComponents: {
     Test,
   },
@@ -249,4 +250,555 @@ describe('createFormHook', () => {
       <WithFormComponent form={incorrectAppForm} prop1="test" prop2={10} />
     )
   })
+
+  it('should infer subset values and props when calling withFieldGroup', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    type ComponentProps = {
+      prop1: string
+      prop2: number
+    }
+
+    const defaultValues: Person = {
+      firstName: 'FirstName',
+      lastName: 'LastName',
+    }
+
+    const FormGroupComponent = withFieldGroup({
+      defaultValues,
+      render: function Render({ group, children, ...props }) {
+        // Existing types may be inferred
+        expectTypeOf(group.state.values.firstName).toEqualTypeOf<string>()
+        expectTypeOf(group.state.values.lastName).toEqualTypeOf<string>()
+
+        expectTypeOf(group.state.values).toEqualTypeOf<Person>()
+        expectTypeOf(children).toEqualTypeOf<JSXElement>()
+        expectTypeOf(props).toEqualTypeOf<{}>()
+        return <group.Test />
+      },
+    })
+
+    const FormGroupComponentWithProps = withFieldGroup({
+      ...defaultValues,
+      props: {} as ComponentProps,
+      render: ({ group, children, ...props }) => {
+        expectTypeOf(props).toEqualTypeOf<{
+          prop1: string
+          prop2: number
+        }>()
+        return <group.Test />
+      },
+    })
+  })
+
+  it('should allow spreading formOptions when calling withFieldGroup', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const defaultValues: Person = {
+      firstName: '',
+      lastName: '',
+    }
+    const formOpts = formOptions({
+      defaultValues,
+      validators: {
+        onChange: () => 'Error',
+      },
+      listeners: {
+        onBlur: () => 'Something',
+      },
+      asyncAlways: true,
+      asyncDebounceMs: 500,
+    })
+
+    // validators and listeners are ignored, only defaultValues is acknowledged
+    const FormGroupComponent = withFieldGroup({
+      ...formOpts,
+      render: function Render({ group }) {
+        // Existing types may be inferred
+        expectTypeOf(group.state.values.firstName).toEqualTypeOf<string>()
+        expectTypeOf(group.state.values.lastName).toEqualTypeOf<string>()
+        return <group.Test />
+      },
+    })
+
+    const noDefaultValuesFormOpts = formOptions({
+      onSubmitMeta: { foo: '' },
+    })
+
+    const UnknownFormGroupComponent = withFieldGroup({
+      ...noDefaultValuesFormOpts,
+      render: function Render({ group }) {
+        // group.state.values can be anything.
+        // note that T extends unknown !== unknown extends T.
+        expectTypeOf<unknown>().toExtend<typeof group.state.values>()
+
+        // either no submit meta or of the type in formOptions
+        expectTypeOf(group.handleSubmit).parameters.toEqualTypeOf<
+          [] | [{ foo: string }]
+        >()
+        return <group.Test />
+      },
+    })
+  })
+
+  it('should allow passing compatible forms to withFieldGroup', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    type ComponentProps = {
+      prop1: string
+      prop2: number
+    }
+
+    const defaultValues: Person = {
+      firstName: 'FirstName',
+      lastName: 'LastName',
+    }
+
+    const FormGroup = withFieldGroup({
+      defaultValues,
+      props: {} as ComponentProps,
+      render: () => {
+        return <></>
+      },
+    })
+
+    const equalAppForm = useAppForm(() => ({
+      defaultValues,
+    }))
+
+    // -----------------
+    // Assert that an equal form is not compatible as you have no name to pass
+    const NoSubfield = (
+      <FormGroup
+        form={equalAppForm}
+        // @ts-expect-error
+        fields=""
+        prop1="Test"
+        prop2={10}
+      />
+    )
+
+    // -----------------
+    // Assert that a form extending Person in a property is allowed
+
+    const extendedAppForm = useAppForm(() => ({
+      defaultValues: { person: { ...defaultValues, address: '' }, address: '' },
+    }))
+    // While it has other properties, it satisfies defaultValues
+    const CorrectComponent1 = (
+      <FormGroup
+        form={extendedAppForm}
+        fields="person"
+        prop1="Test"
+        prop2={10}
+      />
+    )
+
+    const MissingProps = (
+      // @ts-expect-error because prop1 and prop2 are not added
+      <FormGroup form={extendedAppForm} fields="person" />
+    )
+
+    // -----------------
+    // Assert that a form not satisfying Person errors
+    const incompatibleAppForm = useAppForm(() => ({
+      defaultValues: { person: { ...defaultValues, lastName: 0 } },
+    }))
+    const IncompatibleComponent = (
+      <FormGroup
+        // @ts-expect-error because the required subset of properties is not compatible.
+        form={incompatibleAppForm}
+        name=""
+        prop1="test"
+        prop2={10}
+      />
+    )
+  })
+
+  it('should require strict equal submitMeta if it is set in withFieldGroup', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    type SubmitMeta = {
+      correct: string
+    }
+
+    const defaultValues = {
+      person: { firstName: 'FirstName', lastName: 'LastName' } as Person,
+    }
+    const onSubmitMeta: SubmitMeta = {
+      correct: 'Prop',
+    }
+
+    const FormLensNoMeta = withFieldGroup({
+      defaultValues: {} as Person,
+      render: function Render({ group }) {
+        // Since handleSubmit always allows to submit without meta, this is okay
+        group.handleSubmit()
+
+        // To prevent unwanted meta behaviour, handleSubmit's meta should be never if not set.
+        expectTypeOf(group.handleSubmit).parameters.toEqualTypeOf<
+          [] | [submitMeta: never]
+        >()
+
+        return <group.Test />
+      },
+    })
+
+    const FormGroupWithMeta = withFieldGroup({
+      defaultValues: {} as Person,
+      onSubmitMeta,
+      render: function Render({ group }) {
+        // Since handleSubmit always allows to submit without meta, this is okay
+        group.handleSubmit()
+
+        // This matches the value
+        group.handleSubmit({ correct: '' })
+
+        // This does not.
+        // @ts-expect-error
+        group.handleSubmit({ wrong: 'Meta' })
+
+        return <group.Test />
+      },
+    })
+
+    const noMetaForm = useAppForm(() => ({
+      defaultValues,
+    }))
+
+    const CorrectComponent1 = (
+      <FormLensNoMeta form={noMetaForm} fields="person" />
+    )
+
+    const WrongComponent1 = (
+      <FormGroupWithMeta
+        // @ts-expect-error because the meta is not existent
+        form={noMetaForm}
+        fields="person"
+      />
+    )
+
+    const metaForm = useAppForm(() => ({
+      defaultValues,
+      onSubmitMeta,
+    }))
+
+    const CorrectComponent2 = <FormLensNoMeta form={metaForm} fields="person" />
+    const CorrectComponent3 = (
+      <FormGroupWithMeta form={metaForm} fields="person" />
+    )
+
+    const diffMetaForm = useAppForm(() => ({
+      defaultValues,
+      onSubmitMeta: { ...onSubmitMeta, something: 'else' },
+    }))
+
+    const CorrectComponent4 = (
+      <FormLensNoMeta form={diffMetaForm} fields="person" />
+    )
+    const WrongComponent2 = (
+      <FormGroupWithMeta
+        // @ts-expect-error because the metas do not align.
+        form={diffMetaForm}
+        fields="person"
+      />
+    )
+  })
+
+  it('should accept any validators for withFieldGroup', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const defaultValues = {
+      person: { firstName: 'FirstName', lastName: 'LastName' } satisfies Person,
+    }
+
+    const formA = useAppForm(() => ({
+      defaultValues,
+      validators: {
+        onChange: () => 'A',
+      },
+      listeners: {
+        onChange: () => 'A',
+      },
+    }))
+    const formB = useAppForm(() => ({
+      defaultValues,
+      validators: {
+        onChange: () => 'B',
+      },
+      listeners: {
+        onChange: () => 'B',
+      },
+    }))
+
+    const FormGroup = withFieldGroup({
+      defaultValues: defaultValues.person,
+      render: function Render({ group }) {
+        return <group.Test />
+      },
+    })
+
+    const CorrectComponent1 = <FormGroup form={formA} fields="person" />
+    const CorrectComponent2 = <FormGroup form={formB} fields="person" />
+  })
+
+  it('should allow nesting withFieldGroup in other withFieldGroups', () => {
+    type Nested = {
+      firstName: string
+    }
+    type Wrapper = {
+      field: Nested
+    }
+    type FormValues = {
+      form: Wrapper
+      unrelated: { something: { lastName: string } }
+    }
+
+    const defaultValues: FormValues = {
+      form: {
+        field: {
+          firstName: 'Test',
+        },
+      },
+      unrelated: {
+        something: {
+          lastName: '',
+        },
+      },
+    }
+
+    const form = useAppForm(() => ({
+      defaultValues,
+    }))
+    const LensNested = withFieldGroup({
+      defaultValues: defaultValues.form.field,
+      render: function Render() {
+        return <></>
+      },
+    })
+    const LensWrapper = withFieldGroup({
+      defaultValues: defaultValues.form,
+      render: function Render({ group }) {
+        return (
+          <div>
+            <LensNested form={group} fields="field" />
+          </div>
+        )
+      },
+    })
+
+    const Component = <LensWrapper form={form} fields="form" />
+  })
+
+  it('should not allow withFieldGroups with different metas to be nested', () => {
+    type Nested = {
+      firstName: string
+    }
+    type Wrapper = {
+      field: Nested
+    }
+    type FormValues = {
+      form: Wrapper
+      unrelated: { something: { lastName: string } }
+    }
+
+    const defaultValues: FormValues = {
+      form: {
+        field: {
+          firstName: 'Test',
+        },
+      },
+      unrelated: {
+        something: {
+          lastName: '',
+        },
+      },
+    }
+
+    const LensNestedNoMeta = withFieldGroup({
+      defaultValues: defaultValues.form.field,
+      render: function Render() {
+        return <></>
+      },
+    })
+    const LensNestedWithMeta = withFieldGroup({
+      defaultValues: defaultValues.form.field,
+      onSubmitMeta: { meta: '' },
+      render: function Render() {
+        return <></>
+      },
+    })
+    const LensWrapper = withFieldGroup({
+      defaultValues: defaultValues.form,
+      render: function Render({ group }) {
+        return (
+          <div>
+            <LensNestedNoMeta form={group} fields="field" />
+            <LensNestedWithMeta
+              // @ts-expect-error Wrong meta!
+              form={group}
+              fields="field"
+            />
+          </div>
+        )
+      },
+    })
+
+    it('should allow mapping withFieldGroup to different fields', () => {
+      const defaultValues = {
+        firstName: '',
+        lastName: '',
+        age: 0,
+        relatives: [{ firstName: '', lastName: '', age: 0 }],
+      }
+      const defaultFields = {
+        first: '',
+        last: '',
+      }
+
+      const form = useAppForm(() => ({
+        defaultValues,
+      }))
+
+      const FieldGroup = withFieldGroup({
+        defaultValues: defaultFields,
+        render: function Render() {
+          return <></>
+        },
+      })
+
+      const Component1 = (
+        <FieldGroup
+          form={form}
+          fields={{
+            first: 'lastName',
+            last: 'firstName',
+          }}
+        />
+      )
+
+      const Component2 = (
+        <FieldGroup
+          form={form}
+          fields={{
+            first: 'relatives[0].lastName',
+            last: 'relatives[0].firstName',
+          }}
+        />
+      )
+    })
+
+    it('should not allow fields mapping if the top level is an array', () => {
+      const defaultValues = {
+        firstName: '',
+        lastName: '',
+        age: 0,
+        relatives: [{ firstName: '', lastName: '', age: 0 }],
+        relativesRecord: {
+          something: { firstName: '', lastName: '', age: 0 },
+        } as Record<string, { firstName: string; lastName: string }>,
+      }
+      const defaultFields = {
+        firstName: '',
+        lastName: '',
+      }
+
+      const form = useAppForm(() => ({
+        defaultValues,
+      }))
+
+      const FieldGroupRecord = withFieldGroup({
+        defaultValues: { anything: defaultFields } as Record<
+          string,
+          typeof defaultFields
+        >,
+        render: function Render() {
+          return <></>
+        },
+      })
+      const FieldGroupArray = withFieldGroup({
+        defaultValues: [defaultFields],
+        render: function Render() {
+          return <></>
+        },
+      })
+
+      const CorrectComponent1 = (
+        <FieldGroupRecord form={form} fields="relativesRecord" />
+      )
+      const WrongComponent1 = (
+        <FieldGroupRecord
+          form={form}
+          // @ts-expect-error because record is non-indexable
+          fields={{
+            'any field goes': 'relatives[0]',
+          }}
+        />
+      )
+      const CorrectComponent3 = (
+        <FieldGroupArray form={form} fields="relatives" />
+      )
+      const WrongComponent2 = (
+        <FieldGroupArray
+          form={form}
+          // @ts-expect-error because arrays are non-indexable
+          fields={{}}
+        />
+      )
+    })
+  })
+
+  it('should allow mapping field groups to optional fields', () => {
+    const groupFields = {
+      name: '',
+    }
+
+    type WrapperValues = {
+      namespace: { name: string } | undefined
+      namespace2: { name: string } | null
+      namespace3: { name: string } | null | undefined
+      nope: null | undefined
+      nope2: { lastName: string } | null | undefined
+    }
+
+    const defaultValues: WrapperValues = {
+      namespace: undefined,
+      namespace2: null,
+      namespace3: null,
+      nope: null,
+      nope2: null,
+    }
+
+    const FieldGroup = withFieldGroup({
+      defaultValues: groupFields,
+      render: function Render() {
+        return <></>
+      },
+    })
+
+    const form = useAppForm(() => ({
+      defaultValues,
+    }))
+
+    const Component = <FieldGroup form={form} fields="namespace" />
+    const Component2 = <FieldGroup form={form} fields="namespace2" />
+    const Component3 = <FieldGroup form={form} fields="namespace3" />
+    // @ts-expect-error because it doesn't ever evaluate to the expected values
+    const Component4 = <FieldGroup form={form} fields="nope" />
+    // @ts-expect-error because the types don't match properly
+    const Component5 = <FieldGroup form={form} fields="nope2" />
+  })
+
 })
diff --git a/packages/solid-form/tests/createFormHook.test.tsx b/packages/solid-form/tests/createFormHook.test.tsx
index 60025aa9c..6e3c112e2 100644
--- a/packages/solid-form/tests/createFormHook.test.tsx
+++ b/packages/solid-form/tests/createFormHook.test.tsx
@@ -1,7 +1,9 @@
 import { describe, expect, it } from 'vitest'
-import { render } from '@solidjs/testing-library'
+import { render, fireEvent } from '@solidjs/testing-library'
 import { formOptions } from '@tanstack/form-core'
-import { createFormHook, createFormHookContexts } from '../src'
+import { createFormHook, createFormHookContexts, useStore } from '../src'
+
+
 
 const { fieldContext, useFieldContext, formContext, useFormContext } =
   createFormHookContexts()
@@ -28,7 +30,7 @@ function SubscribeButton({ label }: { label: string }) {
   )
 }
 
-const { useAppForm, withForm } = createFormHook({
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
   fieldComponents: {
     TextField,
   },
@@ -112,4 +114,470 @@ describe('createFormHook', () => {
     expect(input).toHaveValue('John')
     expect(getByText('Testing')).toBeInTheDocument()
   })
+
+  it('should handle withFieldGroup types properly', () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      },
+    })
+
+    const ChildForm = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      // Optional, but adds props to the `render` function outside of `form`
+      props: {
+        title: 'Child Form',
+      },
+      render: (props) => {
+        return (
+          <div>
+            <p>{props.title}</p>
+            <props.group.AppField
+              name="firstName"
+              children={(field) => <field.TextField label="First Name" />}
+            />
+            <props.group.AppForm>
+              <props.group.SubscribeButton label="Submit" />
+            </props.group.AppForm>
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        ...formOpts,
+      }))
+
+      return <ChildForm form={form} fields="person" title={'Testing'} />
+    }
+
+    const { getByLabelText, getByText } = render(() => <Parent />)
+    const input = getByLabelText('First Name')
+    expect(input).toHaveValue('John')
+    expect(getByText('Testing')).toBeInTheDocument()
+  })
+
+  it('should use the correct field name in Field with withFieldGroup', () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+        people: [
+          {
+            firstName: 'Jane',
+            lastName: 'Doe',
+          },
+          {
+            firstName: 'Robert',
+            lastName: 'Doe',
+          },
+        ],
+      },
+    })
+
+    const ChildFormAsField = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      render: ({ group }) => {
+        return (
+          <div>
+            <group.AppField
+              name="firstName"
+              children={(field) => <field.TextField label={field.name} />}
+            />
+            <group.AppForm>
+              <group.SubscribeButton label="Submit" />
+            </group.AppForm>
+          </div>
+        )
+      },
+    })
+    const ChildFormAsArray = withFieldGroup({
+      defaultValues: [formOpts.defaultValues.person],
+      props: {
+        title: '',
+      },
+      render: ({ group, title }) => {
+        return (
+          <div>
+            <p>{title}</p>
+            <group.AppField
+              name="[0].firstName"
+              children={(field) => <field.TextField label={field.name} />}
+            />
+            <group.AppForm>
+              <group.SubscribeButton label="Submit" />
+            </group.AppForm>
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        ...formOpts,
+      }))
+
+      return (
+        <>
+          <ChildFormAsField form={form} fields="person" />
+          <ChildFormAsArray form={form} fields="people" title="Testing" />
+          <ChildFormAsField form={form} fields="people[1]" />
+        </>
+      )
+    }
+
+    const { getByLabelText, getByText } = render(() => <Parent />)
+    const inputField1 = getByLabelText('person.firstName')
+    const inputArray = getByLabelText('people[0].firstName')
+    const inputField2 = getByLabelText('people[1].firstName')
+    expect(inputField1).toHaveValue('John')
+    expect(inputArray).toHaveValue('Jane')
+    expect(inputField2).toHaveValue('Robert')
+    expect(getByText('Testing')).toBeInTheDocument()
+  })
+
+  it('should forward Field and Subscribe to the form', () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      },
+    })
+
+    const ChildFormAsField = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      render: ({ group }) => {
+        return (
+          <div>
+            <group.Field
+              name="firstName"
+              children={(field) => (
+                <label>
+                  <div>{field.name}</div>
+                  <input
+                    value={field().state.value}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                  />
+                </label>
+              )}
+            />
+            <group.Subscribe selector={(state) => state.values.lastName}>
+              {(lastName) => <p>{lastName}</p>}
+            </group.Subscribe>
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        ...formOpts,
+      }))
+      return <ChildFormAsField form={form} fields="person" />
+    }
+
+    const { getByLabelText, getByText } = render(() => <Parent />)
+    const input = getByLabelText('person.firstName')
+    expect(input).toHaveValue('John')
+    expect(getByText('Doe')).toBeInTheDocument()
+  })
+
+  it('should not lose focus on update with withFieldGroup', async () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      },
+    })
+
+    const ChildForm = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      render: function Render({ group }) {
+        const firstName = useStore(
+          group.store,
+          (state) => state.values.firstName,
+        )
+        return (
+          <div>
+            <p>{firstName()}</p>
+            <group.Field
+              name="firstName"
+              children={(field) => (
+                <label>
+                  <div>{field.name}</div>
+                  <input
+                    value={field().state.value}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                  />
+                </label>
+              )}
+            />
+            <group.Subscribe selector={(state) => state.values.lastName}>
+              {(lastName) => <p>{lastName}</p>}
+            </group.Subscribe>
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        ...formOpts,
+      }))
+      return <ChildForm form={form} fields="person" />
+    }
+
+    const { getByLabelText } = render(() => <Parent />)
+
+    const input = getByLabelText('person.firstName')
+    input.focus()
+    expect(input).toHaveFocus()
+    fireEvent.input(input, { target: { value: "" } })
+    fireEvent.input(input, { target: { value: "Something" } })
+
+
+    expect(input).toHaveFocus()
+  })
+
+  it('should allow nesting withFieldGroup in other withFieldGroups', () => {
+    type Nested = {
+      firstName: string
+    }
+    type Wrapper = {
+      field: Nested
+    }
+    type FormValues = {
+      form: Wrapper
+      unrelated: { something: { lastName: string } }
+    }
+
+    const defaultValues: FormValues = {
+      form: {
+        field: {
+          firstName: 'Test',
+        },
+      },
+      unrelated: {
+        something: {
+          lastName: '',
+        },
+      },
+    }
+
+    const LensNested = withFieldGroup({
+      defaultValues: defaultValues.form.field,
+      render: function Render({ group }) {
+        return (
+          <group.Field name="firstName">
+            {(field) => <p>{field.name}</p>}
+          </group.Field>
+        )
+      },
+    })
+    const LensWrapper = withFieldGroup({
+      defaultValues: defaultValues.form,
+      render: function Render({ group }) {
+        return (
+          <div>
+            <LensNested form={group} fields="field" />
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        defaultValues,
+      }))
+      return <LensWrapper form={form} fields="form" />
+    }
+
+    const { getByText } = render(() => <Parent />)
+
+    expect(getByText('form.field.firstName')).toBeInTheDocument()
+  })
+
+  it('should allow mapping withFieldGroup to different values', () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        unrelated: 'John',
+        values: '',
+      },
+    })
+
+    const ChildFormAsField = withFieldGroup({
+      defaultValues: { firstName: '', lastName: '' },
+      render: ({ group }) => {
+        return (
+          <div>
+            <group.AppField
+              name="firstName"
+              children={(field) => <field.TextField label={field.name} />}
+            />
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        ...formOpts,
+      }))
+
+      return (
+        <ChildFormAsField
+          form={form}
+          fields={{
+            firstName: 'unrelated',
+            lastName: 'values',
+          }}
+        />
+      )
+    }
+
+    const { getByLabelText } = render(() => <Parent />)
+    const inputField1 = getByLabelText('unrelated')
+    expect(inputField1).toHaveValue('John')
+  })
+
+  it('should remap FieldGroupApi.Field validators to the correct names', () => {
+    const FieldGroupString = withFieldGroup({
+      defaultValues: { password: '', confirmPassword: '' },
+      render: function Render({ group }) {
+        return (
+          <group.Field
+            name="password"
+            validators={{
+              onChange: () => null,
+              onChangeListenTo: ['password'],
+              onBlur: () => null,
+              onBlurListenTo: ['confirmPassword'],
+            }}
+          >
+            {(field) => {
+              expect(field().options.validators?.onChangeListenTo).toStrictEqual([
+                'account.password',
+              ])
+              expect(field().options.validators?.onBlurListenTo).toStrictEqual([
+                'account.confirmPassword',
+              ])
+              return <></>
+            }}
+          </group.Field>
+        )
+      },
+    })
+
+    const FieldGroupObject = withFieldGroup({
+      defaultValues: { password: '', confirmPassword: '' },
+      render: function Render({ group }) {
+        return (
+          <group.Field
+            name="password"
+            validators={{
+              onChange: () => null,
+              onChangeListenTo: ['password'],
+              onBlur: () => null,
+              onBlurListenTo: ['confirmPassword'],
+            }}
+          >
+            {(field) => {
+              expect(field().options.validators?.onChangeListenTo).toStrictEqual([
+                'userPassword',
+              ])
+              expect(field().options.validators?.onBlurListenTo).toStrictEqual([
+                'userConfirmPassword',
+              ])
+              return <></>
+            }}
+          </group.Field>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm(() => ({
+        defaultValues: {
+          account: {
+            password: '',
+            confirmPassword: '',
+          },
+          userPassword: '',
+          userConfirmPassword: '',
+        },
+      }))
+
+      return (
+        <>
+          <FieldGroupString form={form} fields="account" />
+          <FieldGroupObject
+            form={form}
+            fields={{
+              password: 'userPassword',
+              confirmPassword: 'userConfirmPassword',
+            }}
+          />
+        </>
+      )
+    }
+
+    render(() => <Parent />)
+  })
+
+  it('should accept formId and return it', async () => {
+    function Submit() {
+      const form = useFormContext()
+
+      return (
+        <button type="submit" form={form.formId} data-testid="formId-target">
+          {form.formId}
+        </button>
+      )
+    }
+
+    function Comp() {
+      const form = useAppForm(() => ({
+        formId: 'test',
+      }))
+
+      return (
+        <form.AppForm>
+          <form
+            id={form.formId}
+            onSubmit={(e) => {
+              e.preventDefault()
+              form.handleSubmit()
+            }}
+          ></form>
+
+          <form.Subscribe
+            selector={(state) => state.submissionAttempts}
+            children={(submissionAttempts) => (
+              <span data-testid="formId-result">{submissionAttempts()}</span>
+            )}
+          />
+
+          <Submit />
+        </form.AppForm>
+      )
+    }
+
+    const { getByTestId } = render(() => <Comp />)
+    const target = getByTestId('formId-target')
+    const result = getByTestId('formId-result')
+
+    fireEvent.click(target)
+
+    expect(result).toHaveTextContent('1')
+  })
 })