@tanstack/solid-form 1.32.1 → 1.33.1

package/dist/source/createFormGroup.d.ts

@@ -0,0 +1,16 @@
+import { FormGroupApi } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, FormAsyncValidateOrFn, FormGroupApiOptions, FormGroupAsyncValidateOrFn, FormGroupOptions, FormGroupValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import type { Accessor, JSX, JSXElement } from 'solid-js';
+export declare function createFormGroup<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(opts: () => FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): () => FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
+interface FormGroupComponentBoundProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta, ExtendedApi = {}> extends FormGroupOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> {
+    children: (formGroupApi: Accessor<FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>> & ExtendedApi) => JSX.Element;
+}
+/**
+ * A type alias representing a form group component for a specific form data type.
+ */
+export type FormGroupComponent<in out TParentData, in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>, in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>, in out TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, in out TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, in out TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, in out TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, in out TParentSubmitMeta, in out ExtendedApi = {}> = <const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta>(props: FormGroupComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi>) => JSXElement;
+interface FormGroupComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> extends FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> {
+    children: (formGroupApi: () => FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>) => JSXElement;
+}
+export declare function FormGroup<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(props: FormGroupComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): JSX.Element;
+export {};

package/dist/source/createFormGroup.jsx

@@ -0,0 +1,50 @@
+import { FormGroupApi } from '@tanstack/form-core';
+import { createComponent, createComputed, createSignal, onCleanup, onMount, } from 'solid-js';
+import { useSelector } from '@tanstack/solid-store';
+// ugly way to trick solid into triggering updates for changes on the formGroupApi
+function makeFormGroupReactive(formGroupApi) {
+    const [group, setGroup] = createSignal(formGroupApi, { equals: false });
+    // Handle shallow comparison to make sure that Derived doesn't create a new setGroup call every time
+    const store = useSelector(formGroupApi.store, (store) => store);
+    // Run before initial render
+    createComputed(() => {
+        // Use the store to track dependencies
+        store();
+        setGroup(formGroupApi);
+    });
+    return group;
+}
+export function createFormGroup(opts) {
+    const options = opts();
+    const api = new FormGroupApi(options);
+    let mounted = false;
+    // Instantiates form group meta and removes it when unrendered
+    onMount(() => {
+        const cleanupFn = api.mount();
+        mounted = true;
+        onCleanup(() => {
+            cleanupFn();
+            mounted = false;
+        });
+    });
+    /**
+     * formGroupApi.update should not have any side effects. Think of it like a `useRef`
+     * that we need to keep updated every render with the most up-to-date information.
+     *
+     * createComputed to make sure this effect runs before render effects
+     */
+    createComputed(() => {
+        if (!mounted)
+            return;
+        api.update(opts());
+    });
+    return makeFormGroupReactive(api);
+}
+export function FormGroup(props) {
+    const formGroupApi = createFormGroup(() => {
+        const { children, ...formGroupOptions } = props;
+        return formGroupOptions;
+    });
+    return <>{createComponent(() => props.children(formGroupApi), {})}</>;
+}
+//# sourceMappingURL=createFormGroup.jsx.map

package/dist/source/createFormGroup.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormGroup.jsx","sourceRoot":"","sources":["../../src/createFormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,qBAAqB,CAAA;AACpE,OAAO,EACL,eAAe,EACf,cAAc,EACd,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAanD,kFAAkF;AAClF,SAAS,qBAAqB,CAwC5B,YAyBC;IA2BD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAA;IACvE,oGAAoG;IACpG,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAA;IAC/D,4BAA4B;IAC5B,cAAc,CAAC,GAAG,EAAE;QAClB,sCAAsC;QACtC,KAAK,EAAE,CAAA;QACP,QAAQ,CAAC,YAAY,CAAC,CAAA;IACxB,CAAC,CAAC,CAAA;IACF,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,eAAe,CAwC7B,IAyBC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAA;IAErC,IAAI,OAAO,GAAG,KAAK,CAAA;IACnB,8DAA8D;IAC9D,OAAO,CAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,EAAE,CAAA;QAC7B,OAAO,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,GAAG,EAAE;YACb,SAAS,EAAE,CAAA;YACX,OAAO,GAAG,KAAK,CAAA;QACjB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;IACpB,CAAC,CAAC,CAAA;IAEF,OAAO,qBAAqB,CAyB1B,GAAG,CAAC,CAAA;AACR,CAAC;AAsRD,MAAM,UAAU,SAAS,CAwCvB,KAyBC;IAED,MAAM,YAAY,GAAG,eAAe,CAyBlC,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,CAAA;QAC/C,OAAO,gBAAgB,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACvE,CAAC"}

package/dist/source/index.d.ts

@@ -1,7 +1,8 @@
 export * from '@tanstack/form-core';
-export { useStore } from '@tanstack/solid-store';
+export { useSelector, useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
 export * from './createFieldGroup';
+export * from './createFormGroup';
 export * from './createFormHook';
 export * from './types';

package/dist/source/index.jsx

@@ -1,8 +1,9 @@
 export * from '@tanstack/form-core';
-export { useStore } from '@tanstack/solid-store';
+export { useSelector, useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
 export * from './createFieldGroup';
+export * from './createFormGroup';
 export * from './createFormHook';
 export * from './types';
 //# sourceMappingURL=index.jsx.map

package/dist/source/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE7D,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "1.32.1",
+  "version": "1.33.1",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/solid-store": "^0.9.1",
-    "@tanstack/form-core": "1.32.1"
+    "@tanstack/solid-store": "^0.11.0",
+    "@tanstack/form-core": "1.33.1"
   },
   "devDependencies": {
     "solid-js": "^1.9.9",

package/src/createField.tsx

@@ -6,7 +6,7 @@ import {
   onCleanup,
   onMount,
 } from 'solid-js'
-import { useStore } from '@tanstack/solid-store'
+import { useSelector } from '@tanstack/solid-store'
 import type {
   DeepKeys,
   DeepValue,
@@ -173,30 +173,30 @@ function makeFieldReactive<
   // avoid re-renders when child properties change. Meta is tracked piece by
   // piece so that consumers re-render when any meta property updates.
   // See: https://github.com/TanStack/form/issues/1961
-  const reactiveStateValue = useStore(fieldApi.store, (state) =>
+  const reactiveStateValue = useSelector(fieldApi.store, (state) =>
     mode === 'array' ? state.meta._arrayVersion || 0 : state.value,
   )
-  const reactiveMetaIsTouched = useStore(
+  const reactiveMetaIsTouched = useSelector(
     fieldApi.store,
     (state) => state.meta.isTouched,
   )
-  const reactiveMetaIsBlurred = useStore(
+  const reactiveMetaIsBlurred = useSelector(
     fieldApi.store,
     (state) => state.meta.isBlurred,
   )
-  const reactiveMetaIsDirty = useStore(
+  const reactiveMetaIsDirty = useSelector(
     fieldApi.store,
     (state) => state.meta.isDirty,
   )
-  const reactiveMetaErrorMap = useStore(
+  const reactiveMetaErrorMap = useSelector(
     fieldApi.store,
     (state) => state.meta.errorMap,
   )
-  const reactiveMetaErrorSourceMap = useStore(
+  const reactiveMetaErrorSourceMap = useSelector(
     fieldApi.store,
     (state) => state.meta.errorSourceMap,
   )
-  const reactiveMetaIsValidating = useStore(
+  const reactiveMetaIsValidating = useSelector(
     fieldApi.store,
     (state) => state.meta.isValidating,
   )

package/src/createFieldGroup.tsx

@@ -1,5 +1,5 @@
 import { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'
-import { useStore } from '@tanstack/solid-store'
+import { useSelector } from '@tanstack/solid-store'
 import { onCleanup, onMount } from 'solid-js'
 import type { Component, JSX, ParentProps } from 'solid-js'
 import type {
@@ -201,7 +201,7 @@ export function createFieldGroup<
     <form.Field {...(api.getFormFieldOptions(props) as any)} />
   )
   extendedApi.Subscribe = (props) => {
-    const data = useStore(api.store, props.selector)
+    const data = useSelector(api.store, props.selector)
 
     return functionalUpdate(props.children, data()) as Element
   }

package/src/createForm.tsx

@@ -1,7 +1,8 @@
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import { createComputed, onMount } from 'solid-js'
-import { useStore } from '@tanstack/solid-store'
+import { useSelector } from '@tanstack/solid-store'
 import { Field, createField } from './createField'
+import { FormGroup } from './createFormGroup'
 import type {
   FormAsyncValidateOrFn,
   FormOptions,
@@ -10,6 +11,7 @@ import type {
 } from '@tanstack/form-core'
 import type { JSXElement } from 'solid-js'
 import type { FieldComponent } from './createField'
+import type { FormGroupComponent } from './createFormGroup'
 
 export interface SolidFormApi<
   TParentData,
@@ -39,6 +41,58 @@ export interface SolidFormApi<
     TFormOnServer,
     TSubmitMeta
   >
+  FormGroup: FormGroupComponent<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnDynamic,
+    TFormOnDynamicAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >
+  useSelector: <
+    TSelected = NoInfer<
+      FormState<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnDynamic,
+        TFormOnDynamicAsync,
+        TFormOnServer
+      >
+    >,
+  >(
+    selector?: (
+      state: NoInfer<
+        FormState<
+          TParentData,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync,
+          TFormOnDynamic,
+          TFormOnDynamicAsync,
+          TFormOnServer
+        >
+      >,
+    ) => TSelected,
+  ) => () => TSelected
+  /**
+   * @deprecated Use `form.useSelector` instead.
+   */
   useStore: <
     TSelected = NoInfer<
       FormState<
@@ -217,9 +271,12 @@ export function createForm<
     > = api as never
 
   extendedApi.Field = (props) => <Field {...props} form={api} />
-  extendedApi.useStore = (selector) => useStore(api.store, selector)
+  extendedApi.FormGroup = (props) => <FormGroup {...props} form={api} />
+  extendedApi.useSelector = (selector) => useSelector(api.store, selector)
+  /** @deprecated Use `form.useSelector` instead. */
+  extendedApi.useStore = extendedApi.useSelector
   extendedApi.Subscribe = (props) =>
-    functionalUpdate(props.children, useStore(api.store, props.selector))
+    functionalUpdate(props.children, useSelector(api.store, props.selector))
 
   onMount(api.mount)