diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index b8d9d920e..f3b5be6db 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -18,7 +18,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout
- uses: actions/checkout@v4.2.1
+ uses: actions/checkout@v4.2.2
- name: Setup Tools
uses: tanstack/config/.github/setup@main
- name: Fix formatting
diff --git a/.nvmrc b/.nvmrc
index b8e593f52..1d9b7831b 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.15.1
+22.12.0
diff --git a/codecov.yml b/codecov.yml
index c12fe6e61..7e6c6e200 100755
--- a/codecov.yml
+++ b/codecov.yml
@@ -2,5 +2,5 @@ coverage:
status:
project:
default:
- target: 90%
+ target: auto
threshold: 1%
diff --git a/docs/config.json b/docs/config.json
index b53c0e8cf..cba1b0137 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -101,6 +101,10 @@
"label": "Linked Fields",
"to": "framework/react/guides/linked-fields"
},
+ {
+ "label": "Listeners",
+ "to": "framework/react/guides/listeners"
+ },
{
"label": "UI Libraries",
"to": "framework/react/guides/ui-libraries"
@@ -433,6 +437,21 @@
}
]
},
+ {
+ "label": "Community Resources",
+ "children": [],
+ "frameworks": [
+ {
+ "label": "react",
+ "children": [
+ {
+ "label": "Balastrong's Tutorial",
+ "to": "framework/react/community/balastrong-tutorial"
+ }
+ ]
+ }
+ ]
+ },
{
"label": "Examples",
"children": [],
@@ -452,6 +471,10 @@
"label": "TanStack Query Integration",
"to": "framework/react/examples/query-integration"
},
+ {
+ "label": "Standard Schema",
+ "to": "framework/react/examples/standard-schema"
+ },
{
"label": "Yup",
"to": "framework/react/examples/yup"
@@ -472,6 +495,10 @@
"label": "Next Server Actions",
"to": "framework/react/examples/next-server-actions"
},
+ {
+ "label": "Remix",
+ "to": "framework/react/examples/remix"
+ },
{
"label": "UI Libraries",
"to": "framework/react/examples/ui-libraries"
diff --git a/docs/framework/angular/guides/basic-concepts.md b/docs/framework/angular/guides/basic-concepts.md
index 5e298359b..1b3da15b8 100644
--- a/docs/framework/angular/guides/basic-concepts.md
+++ b/docs/framework/angular/guides/basic-concepts.md
@@ -114,14 +114,21 @@ export class AppComponent {
}
```
-## Validation Adapters
+## Validation with Standard Schema Libraries
-In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
+
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
Example:
```angular-ts
-import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
@Component({
@@ -132,7 +139,6 @@ import { z } from 'zod'
+ `,
+})
+
+...
+
+onCountryChange: FieldListenerFn = ({
+ value,
+ }) => {
+ console.log(`Country changed to: ${value}, resetting province`)
+ this.form.setFieldValue('province', '')
+ }
+```
+
+More information can be found at [Listeners](./listeners.md)
+
## Array Fields
Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `tanstackField` directive.
diff --git a/docs/framework/angular/guides/listeners.md b/docs/framework/angular/guides/listeners.md
new file mode 100644
index 000000000..80a91b596
--- /dev/null
+++ b/docs/framework/angular/guides/listeners.md
@@ -0,0 +1,61 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the onChange event and dispatch a reset to the field "province" when the listener is fired.
+
+Events that can be "listened" to are:
+
+- onChange
+- onBlur
+- onMount
+- onSubmit
+
+```angular-ts
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [TanStackField],
+ template: `
+
+
+
+ `,
+})
+
+export class AppComponent {
+ form = injectForm({
+ defaultValues: {
+ country: '',
+ province: '',
+ },
+ })
+
+ onCountryChange: FieldListenerFn = ({
+ value,
+ }) => {
+ console.log(`Country changed to: ${value}, resetting province`)
+ this.form.setFieldValue('province', '')
+ }
+}
+```
diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md
index d5b2f44b2..d9d72352a 100644
--- a/docs/framework/angular/guides/validation.md
+++ b/docs/framework/angular/guides/validation.md
@@ -382,24 +382,22 @@ This will debounce every async call with a 500ms delay. You can even override th
> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
-## Adapter-Based Validation (Zod, Yup, Valibot)
+## Validation through Schema Libraries
-While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
-Luckily, we support all of these libraries through official adapters:
+### Standard Schema Libraries
-```bash
-$ npm install @tanstack/zod-form-adapter zod
-# or
-$ npm install @tanstack/yup-form-adapter yup
-# or
-$ npm install @tanstack/valibot-form-adapter valibot
-```
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
-Once done, we can add the adapter to the `validator` property on the form or field:
+*Note:* make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
```angular-ts
-import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
@Component({
@@ -420,11 +418,9 @@ import { z } from 'zod'
`,
})
export class AppComponent {
- form = injectForm({
- // Either add the validator here or on `Field`
- validatorAdapter: zodValidator(),
+ form = injectForm({
// ...
- })
+ })
z = z
@@ -432,7 +428,8 @@ export class AppComponent {
}
```
-These adapters also support async operations using the proper property names:
+Async validations on form and field level are supported as well:
+
```angular-ts
@Component({
@@ -469,37 +466,50 @@ export class AppComponent {
}
```
-### Form Level Adapter Validation
+### Other Schema Libraries
-You can also use the adapter at the form level:
+We also support [Yup](https://github.com/jquense/yup) through an official adapter:
-```typescript
-import { zodValidator } from '@tanstack/zod-form-adapter'
-import { z } from 'zod'
+```bash
+$ npm install @tanstack/yup-form-adapter yup
+```
-// ...
+Once done, we can add the adapter to the `validator` property on the form or field:
-const form = injectForm({
- validatorAdapter: zodValidator(),
- validators: {
- onChange: z.object({
- age: z.number().gte(13, 'You must be 13 to make an account'),
- }),
- },
-})
-```
+```angular-ts
+import { yupValidator } from '@tanstack/yup-form-adapter'
+import * as yup from 'yup'
-If you use the adapter at the form level, it will pass the validation to the fields of the same name.
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [TanStackField],
+ template: `
+
+
+
+ `,
+})
+export class AppComponent {
+ form = injectForm({
+ // Either add the validator here or on `Field`
+ validatorAdapter: yupValidator(),
+ // ...
+ })
-This means that:
+ yup = yup
-```html
-
-
-
+ // ...
+}
```
-Will still display the error message from the form-level validation.
## Preventing invalid forms from being submitted
diff --git a/docs/framework/angular/reference/classes/tanstackfield.md b/docs/framework/angular/reference/classes/tanstackfield.md
index fa74dc32a..3fe19007b 100644
--- a/docs/framework/angular/reference/classes/tanstackfield.md
+++ b/docs/framework/angular/reference/classes/tanstackfield.md
@@ -46,7 +46,7 @@ api: FieldApi;
#### Defined in
-[tanstack-field.directive.ts:58](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L58)
+[tanstack-field.directive.ts:62](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L62)
***
@@ -64,7 +64,7 @@ If `true`, always run async validation, even if there are errors emitted during
#### Defined in
-[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47)
+[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48)
***
@@ -82,7 +82,7 @@ The default time to debounce async validation if there is not a more specific de
#### Defined in
-[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46)
+[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47)
***
@@ -100,7 +100,7 @@ An optional object with default metadata for the field.
#### Defined in
-[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L56)
+[tanstack-field.directive.ts:60](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L60)
***
@@ -118,7 +118,25 @@ An optional default value for the field.
#### Defined in
-[tanstack-field.directive.ts:45](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L45)
+[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46)
+
+***
+
+### listeners?
+
+```ts
+optional listeners: NoInfer>;
+```
+
+A list of listeners which attach to the corresponding events
+
+#### Implementation of
+
+`FieldOptions.listeners`
+
+#### Defined in
+
+[tanstack-field.directive.ts:57](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L57)
***
@@ -136,7 +154,7 @@ The field name. The type will be `DeepKeys` to ensure your name is
#### Defined in
-[tanstack-field.directive.ts:41](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L41)
+[tanstack-field.directive.ts:42](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L42)
***
@@ -148,7 +166,7 @@ tanstackField: FormApi;
#### Defined in
-[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49)
+[tanstack-field.directive.ts:50](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L50)
***
@@ -164,7 +182,7 @@ optional unmount: () => void;
#### Defined in
-[tanstack-field.directive.ts:73](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L73)
+[tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L78)
***
@@ -182,7 +200,7 @@ A validator provided by an extension, like `yupValidator` from `@tanstack/yup-fo
#### Defined in
-[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48)
+[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49)
***
@@ -200,7 +218,7 @@ A list of validators to pass to the field
#### Defined in
-[tanstack-field.directive.ts:53](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L53)
+[tanstack-field.directive.ts:54](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L54)
## Methods
@@ -225,7 +243,7 @@ children are checked.
#### Defined in
-[tanstack-field.directive.ts:85](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L85)
+[tanstack-field.directive.ts:90](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L90)
***
@@ -248,7 +266,7 @@ before a directive, pipe, or service instance is destroyed.
#### Defined in
-[tanstack-field.directive.ts:81](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L81)
+[tanstack-field.directive.ts:86](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L86)
***
@@ -274,4 +292,4 @@ It is invoked only once when the directive is instantiated.
#### Defined in
-[tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75)
+[tanstack-field.directive.ts:80](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L80)
diff --git a/docs/framework/angular/reference/functions/injectform.md b/docs/framework/angular/reference/functions/injectform.md
index 3ead8f1ca..235cfa030 100644
--- a/docs/framework/angular/reference/functions/injectform.md
+++ b/docs/framework/angular/reference/functions/injectform.md
@@ -17,7 +17,9 @@ function injectForm(opts?): FormApi
+### opts?
+
+`FormOptions`\<`TFormData`, `TFormValidator`\>
## Returns
diff --git a/docs/framework/angular/reference/functions/injectstore.md b/docs/framework/angular/reference/functions/injectstore.md
index 1fee88e76..e5a765b72 100644
--- a/docs/framework/angular/reference/functions/injectstore.md
+++ b/docs/framework/angular/reference/functions/injectstore.md
@@ -19,9 +19,13 @@ function injectStore(form, selector?): Sig
## Parameters
-• **form**: `FormApi`\<`TFormData`, `TFormValidator`\>
+### form
-• **selector?**
+`FormApi`\<`TFormData`, `TFormValidator`\>
+
+### selector?
+
+(`state`) => `TSelected`
## Returns
diff --git a/docs/framework/lit/reference/classes/tanstackformcontroller.md b/docs/framework/lit/reference/classes/tanstackformcontroller.md
index 95e7e5ad1..b918a06a6 100644
--- a/docs/framework/lit/reference/classes/tanstackformcontroller.md
+++ b/docs/framework/lit/reference/classes/tanstackformcontroller.md
@@ -25,9 +25,13 @@ new TanStackFormController(host, config?): TanStack
#### Parameters
-• **host**: `ReactiveControllerHost`
+##### host
-• **config?**: `FormOptions`\<`TParentData`, `TFormValidator`\>
+`ReactiveControllerHost`
+
+##### config?
+
+`FormOptions`\<`TParentData`, `TFormValidator`\>
#### Returns
@@ -67,9 +71,13 @@ field(fieldConfig, render): object
#### Parameters
-• **fieldConfig**: `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+##### fieldConfig
+
+`FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+
+##### render
-• **render**: `renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
#### Returns
@@ -81,19 +89,19 @@ field(fieldConfig, render): object
values: object;
```
-##### values.form
+###### values.form
```ts
form: FormApi;
```
-##### values.options
+###### values.options
```ts
options: FieldOptions;
```
-##### values.render
+###### values.render
```ts
render: renderCallback;
diff --git a/docs/framework/react/community/balastrong-tutorial.md b/docs/framework/react/community/balastrong-tutorial.md
new file mode 100644
index 000000000..f6fba45df
--- /dev/null
+++ b/docs/framework/react/community/balastrong-tutorial.md
@@ -0,0 +1,33 @@
+---
+id: balastrong-tutorial
+title: Balastrong's Tutorial
+---
+
+TanStack Form maintainer [Balastrong](https://bsky.app/profile/leonardomontini.dev) has created a series of video tutorials showcasing the most relevant features of the library. You'll find step by step guides that give you some extra insights into what you can build with TanStack Form, plus some nice tips and tricks.
+
+[Watch the full playlist](https://www.youtube.com/playlist?list=PLOQjd5dsGSxInTKUWTxyqSKwZCjDIUs0Y)
+
+
+## 1. [Setup and validation](https://youtu.be/Pf1qn35bgjs)
+
+The first steps into TanStack Form learning all the basics, from setting up the library to creating a simple form with text fields and validation (sync, debounced and async). [Watch video (8:16)](https://youtu.be/Pf1qn35bgjs)
+
+## 2. [Advanced validation](https://youtu.be/Pys2ExswZT0)
+
+An example of data being validated through a backend API while ensuring a smooth user experience by controlling loading state, error messages and linked fields. [Watch video (8:05)](https://youtu.be/Pys2ExswZT0)
+
+## 3. [Array fields](https://youtu.be/0IPPHdjvrzk)
+
+How to handle array fields with primitives (strings, numbers) and objects (nested fields), with validation and reordering. [Watch video (6:53)](https://youtu.be/0IPPHdjvrzk)
+
+## 4. [Reactivity](https://youtu.be/UXRZvNCnE-s)
+
+Learn why form values may not update in real time, why this behavior is intentional, and how to trigger UI updates efficiently. [Watch video (4:26)](https://youtu.be/UXRZvNCnE-s)
+
+## 5. [Form validation with schema libraries](https://youtu.be/HSboMHfPuZA)
+
+Use schema libraries like zod, yup or valibot to define your schema with validation rules. Pass it to TanStack Form through an adapter to validate all fields at once. [Watch video (6:29)](https://youtu.be/HSboMHfPuZA)
+
+## 6. [Side effects and listeners](https://youtu.be/A-w2IG7DAso)
+
+Similarly to field validators, you can attach events to field listeners and react to them, for example to reset a field when another one it depends on has changed. [Watch video (5:50)](https://youtu.be/A-w2IG7DAso)
\ No newline at end of file
diff --git a/docs/framework/react/guides/basic-concepts.md b/docs/framework/react/guides/basic-concepts.md
index 51045f253..a8528eb4f 100644
--- a/docs/framework/react/guides/basic-concepts.md
+++ b/docs/framework/react/guides/basic-concepts.md
@@ -144,44 +144,55 @@ Example:
/>
```
-## Validation Adapters
+## Validation with Standard Schema Libraries
-In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
-Example:
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
-// ...
- {
- await new Promise((resolve) => setTimeout(resolve, 1000))
- return !value.includes('error')
- },
- {
- message: "No 'error' allowed in first name",
- },
- ),
- }}
-/>
+const userSchema = z.object({
+ age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+function App() {
+ const form = useForm({
+ defaultValues: {
+ age: 0,
+ },
+ validators: {
+ onChange: userSchema,
+ },
+ })
+ return (
+
+ {
+ return <>{/* ... */}>
+ }}
+ />
+
+ )
+}
```
## Reactivity
-`@tanstack/react-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+`@tanstack/react-form` offers various ways to subscribe to form and field state changes, most notably the `useStore(form.store)` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
Example:
```tsx
-const firstName = form.useStore((state) => state.values.firstName)
+const firstName = useStore(form.store, (state) => state.values.firstName)
//...
[state.canSubmit, state.isSubmitting]}
@@ -193,7 +204,27 @@ const firstName = form.useStore((state) => state.values.firstName)
/>
```
-Note: The usage of the `form.useField` hook to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `form.useStore` instead.
+Note: The usage of the `useField` hook to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `useStore(form.store)` instead.
+
+## Listeners
+
+`@tanstack/react-form` allows you to react to specific triggers and "listen" to them to dispatch side effects.
+
+Example:
+
+```tsx
+ {
+ console.log(`Country changed to: ${value}, resetting province`)
+ form.setFieldValue('province', '')
+ }
+ }}
+/>
+```
+
+More information can be found at [Listeners](./listeners.md)
## Array Fields
diff --git a/docs/framework/react/guides/listeners.md b/docs/framework/react/guides/listeners.md
new file mode 100644
index 000000000..21357455b
--- /dev/null
+++ b/docs/framework/react/guides/listeners.md
@@ -0,0 +1,69 @@
+---
+id: listeners
+title: Side effects for event triggers
+---
+
+For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you would use the listener API.
+
+Imagine the following user flow:
+
+- User selects a country from a drop-down.
+- User then selects a province from another drop-down.
+- User changes the selected country to a different one.
+
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the onChange event and dispatch a reset to the field "province" when the listener is fired.
+
+Events that can be "listened" to are:
+
+- onChange
+- onBlur
+- onMount
+- onSubmit
+
+```tsx
+function App() {
+ const form = useForm({
+ defaultValues: {
+ country: '',
+ province: '',
+ },
+ // ...
+ })
+
+ return (
+
+ )
+}
+```
diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md
index 76a54cadb..f584a792c 100644
--- a/docs/framework/react/guides/ssr.md
+++ b/docs/framework/react/guides/ssr.md
@@ -9,8 +9,8 @@ Today we support the following meta-frameworks:
- [TanStack Start](https://tanstack.com/start/)
- [Next.js](https://nextjs.org/)
+- [Remix](https://remix.run)
-_We need help adding Remix support! [Come help us research and implement it here.](https://github.com/TanStack/form/issues/759)_
## Using TanStack Form in TanStack Start
@@ -20,7 +20,7 @@ This section focuses on integrating TanStack Form with TanStack Start.
- Start a new `TanStack Start` project, following the steps in the [TanStack Start Quickstart Guide](https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start)
- Install `@tanstack/react-form`
-- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional]
+- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]
### Start integration
@@ -114,7 +114,7 @@ function Home() {
transform: useTransform((baseForm) => mergeForm(baseForm, state), [state]),
})
- const formErrors = form.useStore((formState) => formState.errors)
+ const formErrors = useStore(form.store, (formState) => formState.errors)
return (
+ )
+}
+```
+
+Here, we're using [Remix's `useActionData` hook](https://remix.run/docs/en/main/hooks/use-action-data) and TanStack Form's `useTransform` hook to merge state returned from the server action with the form state.
diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md
index 21a6d4424..e8a9ff26f 100644
--- a/docs/framework/react/guides/validation.md
+++ b/docs/framework/react/guides/validation.md
@@ -178,7 +178,7 @@ export default function App() {
// Subscribe to the form's error map so that updates to it will render
// alternately, you can use `form.Subscribe`
- const formErrorMap = form.useStore((state) => state.errorMap)
+ const formErrorMap = useStore(form.store, (state) => state.errorMap)
return (
@@ -413,47 +413,49 @@ This will debounce every async call with a 500ms delay. You can even override th
> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
-## Adapter-Based Validation (Zod, Yup, Valibot)
+## Validation through Schema Libraries
-While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
-Luckily, we support all of these libraries through official adapters:
+### Standard Schema Libraries
-```bash
-$ npm install @tanstack/zod-form-adapter zod
-# or
-$ npm install @tanstack/yup-form-adapter yup
-# or
-$ npm install @tanstack/valibot-form-adapter valibot
-```
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
-Once done, we can add the adapter to the `validator` property on the form or field:
+*Note:* make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
-```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
-import { z } from 'zod'
-
-// ...
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
-const form = useForm({
- // Either add the validator here or on `Field`
- validatorAdapter: zodValidator(),
- // ...
+```tsx
+const userSchema = z.object({
+ age: z.number().gte(13, 'You must be 13 to make an account'),
})
- {
- return <>{/* ... */}>
- }}
-/>
+function App() {
+ const form = useForm({
+ defaultValues: {
+ age: 0,
+ },
+ validators: {
+ onChange: userSchema,
+ },
+ })
+ return (
+
+ {
+ return <>{/* ... */}>
+ }}
+ />
+
+ )
+}
```
-These adapters also support async operations using the proper property names:
+Async validations on form and field level are supported as well:
```tsx
```
-### Form Level Adapter Validation
+### Other Schema Libraries
+
+We also support [Yup](https://github.com/jquense/yup) through an official adapter:
-You can also use the adapter at the form level:
+```bash
+$ npm install @tanstack/yup-form-adapter yup
+```
+
+Once done, we can add the adapter to the `validator` property on the form or field:
```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
-import { z } from 'zod'
+import { yupValidator } from '@tanstack/yup-form-adapter'
+import * as yup from 'yup'
// ...
-const formSchema = z.object({
- age: z.number().gte(13, 'You must be 13 to make an account'),
-})
-
const form = useForm({
- validatorAdapter: zodValidator(),
- validators: {
- onChange: formSchema
- },
+ // Either add the validator here or on `Field`
+ validatorAdapter: yupValidator(),
+ // ...
})
-```
-
-If you use the adapter at the form level, it will pass the validation to the fields of the same name.
-
-This means that:
-
-```tsx
{
return <>{/* ... */}>
}}
/>
```
-Will still display the error message from the form-level validation.
-
## Preventing invalid forms from being submitted
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
diff --git a/docs/framework/react/reference/functions/field.md b/docs/framework/react/reference/functions/field.md
index fddb0a969..c1ac1504d 100644
--- a/docs/framework/react/reference/functions/field.md
+++ b/docs/framework/react/reference/functions/field.md
@@ -27,7 +27,9 @@ The `Field` component uses the `useField` hook internally to manage the field in
## Parameters
-• **\_\_namedParameters**: `FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+### \_\_namedParameters
+
+`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
## Returns
@@ -35,4 +37,4 @@ The `Field` component uses the `useField` hook internally to manage the field in
## Defined in
-[useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164)
+[packages/react-form/src/useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164)
diff --git a/docs/framework/react/reference/functions/usefield.md b/docs/framework/react/reference/functions/usefield.md
index 0d341f855..779a1954e 100644
--- a/docs/framework/react/reference/functions/usefield.md
+++ b/docs/framework/react/reference/functions/usefield.md
@@ -25,7 +25,9 @@ A hook for managing a field in a form.
## Parameters
-• **opts**: `UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+### opts
+
+`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
An object with field options.
@@ -37,4 +39,4 @@ The `FieldApi` instance for the specified field.
## Defined in
-[useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50)
+[packages/react-form/src/useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50)
diff --git a/docs/framework/react/reference/functions/useform.md b/docs/framework/react/reference/functions/useform.md
index f0a52bf6e..6f877b2e9 100644
--- a/docs/framework/react/reference/functions/useform.md
+++ b/docs/framework/react/reference/functions/useform.md
@@ -6,7 +6,7 @@ title: useForm
# Function: useForm()
```ts
-function useForm(opts?): FormApi & ReactFormApi
+function useForm(opts?): ReactFormExtendedApi
```
A custom React Hook that returns an extended instance of the `FormApi` class.
@@ -21,12 +21,14 @@ This API encapsulates all the necessary functionalities related to the form. It
## Parameters
-• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\>
+### opts?
+
+`FormOptions`\<`TFormData`, `TFormValidator`\>
## Returns
-`FormApi`\<`TFormData`, `TFormValidator`\> & [`ReactFormApi`](../interfaces/reactformapi.md)\<`TFormData`, `TFormValidator`\>
+[`ReactFormExtendedApi`](../type-aliases/reactformextendedapi.md)\<`TFormData`, `TFormValidator`\>
## Defined in
-[useForm.tsx:57](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L57)
+[packages/react-form/src/useForm.tsx:57](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L57)
diff --git a/docs/framework/react/reference/functions/usestore.md b/docs/framework/react/reference/functions/usestore.md
new file mode 100644
index 000000000..45ed3f214
--- /dev/null
+++ b/docs/framework/react/reference/functions/usestore.md
@@ -0,0 +1,66 @@
+---
+id: useStore
+title: useStore
+---
+
+# Function: useStore()
+
+## Call Signature
+
+```ts
+function useStore(store, selector?): TSelected
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Store`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`TSelected`
+
+### Defined in
+
+node\_modules/.pnpm/@tanstack+react-store@0.7.0\_react-dom@18.3.1\_react@18.3.1\_\_react@18.3.1/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:7
+
+## Call Signature
+
+```ts
+function useStore(store, selector?): TSelected
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Derived`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`TSelected`
+
+### Defined in
+
+node\_modules/.pnpm/@tanstack+react-store@0.7.0\_react-dom@18.3.1\_react@18.3.1\_\_react@18.3.1/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:8
diff --git a/docs/framework/react/reference/functions/usetransform.md b/docs/framework/react/reference/functions/usetransform.md
index 647b76fac..bc4ffb2cb 100644
--- a/docs/framework/react/reference/functions/usetransform.md
+++ b/docs/framework/react/reference/functions/usetransform.md
@@ -17,9 +17,13 @@ function useTransform(fn, deps): FormTransform `FormApi`\<`TFormData`, `TFormValidator`\>
+
+### deps
+
+`unknown`[]
## Returns
@@ -27,4 +31,4 @@ function useTransform(fn, deps): FormTransform `ReactNode`
+###### children
-• **props.selector?**
+`ReactNode` \| (`state`) => `ReactNode`
-TypeScript versions <=5.0.4 have a bug that prevents
-the type of the `TSelected` generic from being inferred
-from the return type of this method.
+###### selector
-In these versions, `TSelected` will fall back to the default
-type (or `unknown` if that's not defined).
-
-**See**
-
- - [This discussion on GitHub for the details](https://github.com/TanStack/form/pull/606/files#r1506715714)
- - [The bug report in `microsoft/TypeScript`](https://github.com/microsoft/TypeScript/issues/52786)
+(`state`) => `TSelected`
#### Returns
@@ -67,44 +59,4 @@ type (or `unknown` if that's not defined).
#### Defined in
-[useForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L35)
-
-***
-
-### useField
-
-```ts
-useField: UseField;
-```
-
-A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-
-#### Defined in
-
-[useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25)
-
-***
-
-### useStore()
-
-```ts
-useStore: (selector?) => TSelected;
-```
-
-A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-
-#### Type Parameters
-
-• **TSelected** = `FormState`\<`TFormData`\>
-
-#### Parameters
-
-• **selector?**
-
-#### Returns
-
-`TSelected`
-
-#### Defined in
-
-[useForm.tsx:29](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L29)
+[packages/react-form/src/useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25)
diff --git a/docs/framework/react/reference/type-aliases/fieldcomponent.md b/docs/framework/react/reference/type-aliases/fieldcomponent.md
index 079e22883..7e72e1ea8 100644
--- a/docs/framework/react/reference/type-aliases/fieldcomponent.md
+++ b/docs/framework/react/reference/type-aliases/fieldcomponent.md
@@ -9,7 +9,7 @@ title: FieldComponent
type FieldComponent: ({
children,
...fieldOptions
-}) => NodeType;
+}) => ReactNode;
```
A type alias representing a field component for a specific form data type.
@@ -30,15 +30,17 @@ A type alias representing a field component for a specific form data type.
## Parameters
-• **\{
+### \{
children,
...fieldOptions
-\}**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+\}
+
+`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
## Returns
-`NodeType`
+`ReactNode`
## Defined in
-[useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134)
+[packages/react-form/src/useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134)
diff --git a/docs/framework/react/reference/type-aliases/reactformextendedapi.md b/docs/framework/react/reference/type-aliases/reactformextendedapi.md
new file mode 100644
index 000000000..15527cba0
--- /dev/null
+++ b/docs/framework/react/reference/type-aliases/reactformextendedapi.md
@@ -0,0 +1,22 @@
+---
+id: ReactFormExtendedApi
+title: ReactFormExtendedApi
+---
+
+# Type Alias: ReactFormExtendedApi\
+
+```ts
+type ReactFormExtendedApi: FormApi & ReactFormApi;
+```
+
+An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
+
+## Type Parameters
+
+• **TFormData**
+
+• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
+
+## Defined in
+
+[packages/react-form/src/useForm.tsx:34](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L34)
diff --git a/docs/framework/react/reference/type-aliases/usefield.md b/docs/framework/react/reference/type-aliases/usefield.md
index 831214e47..27f17d13f 100644
--- a/docs/framework/react/reference/type-aliases/usefield.md
+++ b/docs/framework/react/reference/type-aliases/usefield.md
@@ -29,7 +29,9 @@ A function that takes an optional object with a `name` property and field option
## Parameters
-• **opts**: `Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+### opts
+
+`Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
## Returns
@@ -37,4 +39,4 @@ A function that takes an optional object with a `name` property and field option
## Defined in
-[useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26)
+[packages/react-form/src/useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26)
diff --git a/docs/framework/solid/guides/basic-concepts.md b/docs/framework/solid/guides/basic-concepts.md
index eb3cf2a13..ff9cbce5a 100644
--- a/docs/framework/solid/guides/basic-concepts.md
+++ b/docs/framework/solid/guides/basic-concepts.md
@@ -139,20 +139,24 @@ Example:
/>
```
-## Validation Adapters
+## Validation with Standard Schema Libraries
-In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
-Example:
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
// ...
This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
-## Adapter-Based Validation (Zod, Yup, Valibot)
+## Validation through Schema Libraries
-While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. You can also define a single schema for your entire form and pass it to the form level, errors will be automatically propagated to the fields.
-Luckily, we support all of these libraries through official adapters:
+### Standard Schema Libraries
-```bash
-$ npm install @tanstack/zod-form-adapter zod
-# or
-$ npm install @tanstack/yup-form-adapter yup
-# or
-$ npm install @tanstack/valibot-form-adapter valibot
-```
+TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
-Once done, we can add the adapter to the `validator` property on the form or field:
+*Note:* make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
+
+To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
// ...
const form = createForm(() => ({
- // Either add the validator here or on `Field`
- validatorAdapter: zodValidator(),
// ...
}));
({
/>
```
-These adapters also support async operations using the proper property names:
+Async validations on form and field level are supported as well:
```tsx
```
-### Form Level Adapter Validation
+### Other Schema Libraries
+We also support [Yup](https://github.com/jquense/yup) through an official adapter:
+
+```bash
+$ npm install @tanstack/yup-form-adapter yup
+```
+
+Once done, we can add the adapter to the `validator` property on the form or field:
-You can also use the adapter at the form level:
```tsx
-import { zodValidator } from '@tanstack/zod-form-adapter'
-import { z } from 'zod'
+import { yupValidator } from '@tanstack/yup-form-adapter'
+import * as yup from 'yup'
// ...
const form = createForm(() => ({
- validatorAdapter: zodValidator(),
- validators: {
- onChange: z.object({
- age: z.number().gte(13, 'You must be 13 to make an account'),
- }),
- },
-}))
-```
-
-If you use the adapter at the form level, it will pass the validation to the fields of the same name.
-
-This means that:
-
-```tsx
+ // Either add the validator here or on `Field`
+ validatorAdapter: yupValidator(),
+ // ...
+}));
{
return <>{/* ... */}>
}}
/>
```
-Will still display the error message from the form-level validation.
-
-
## Preventing invalid forms from being submitted
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
diff --git a/docs/framework/solid/reference/functions/createfield.md b/docs/framework/solid/reference/functions/createfield.md
index d4cbbcf3b..b03c59dc1 100644
--- a/docs/framework/solid/reference/functions/createfield.md
+++ b/docs/framework/solid/reference/functions/createfield.md
@@ -23,7 +23,9 @@ function createField
## Parameters
-• **opts**
+### opts
+
+() => `CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
## Returns
@@ -35,4 +37,4 @@ function createField
## Defined in
-[createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87)
+[packages/solid-form/src/createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87)
diff --git a/docs/framework/solid/reference/functions/createform.md b/docs/framework/solid/reference/functions/createform.md
index ee2fd0d57..1de39fc10 100644
--- a/docs/framework/solid/reference/functions/createform.md
+++ b/docs/framework/solid/reference/functions/createform.md
@@ -17,7 +17,9 @@ function createForm(opts?): FormApi `FormOptions`\<`TParentData`, `TFormValidator`\>
## Returns
@@ -25,4 +27,4 @@ function createForm(opts?): FormApi(props
## Parameters
-• **props**: `object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object`
+### props
+
+`object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object`
## Returns
@@ -31,4 +33,4 @@ function Field(props
## Defined in
-[createField.tsx:185](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L185)
+[packages/solid-form/src/createField.tsx:196](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L196)
diff --git a/docs/framework/solid/reference/functions/usestore.md b/docs/framework/solid/reference/functions/usestore.md
new file mode 100644
index 000000000..69e1e4e37
--- /dev/null
+++ b/docs/framework/solid/reference/functions/usestore.md
@@ -0,0 +1,66 @@
+---
+id: useStore
+title: useStore
+---
+
+# Function: useStore()
+
+## Call Signature
+
+```ts
+function useStore(store, selector?): Accessor
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Store`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`Accessor`\<`TSelected`\>
+
+### Defined in
+
+node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8
+
+## Call Signature
+
+```ts
+function useStore(store, selector?): Accessor
+```
+
+### Type Parameters
+
+• **TState**
+
+• **TSelected** = `NoInfer`\<`TState`\>
+
+### Parameters
+
+#### store
+
+`Derived`\<`TState`, `any`\>
+
+#### selector?
+
+(`state`) => `TSelected`
+
+### Returns
+
+`Accessor`\<`TSelected`\>
+
+### Defined in
+
+node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9
diff --git a/docs/framework/solid/reference/index.md b/docs/framework/solid/reference/index.md
index eafeb8042..704a66cb7 100644
--- a/docs/framework/solid/reference/index.md
+++ b/docs/framework/solid/reference/index.md
@@ -19,3 +19,4 @@ title: "@tanstack/solid-form"
- [createField](functions/createfield.md)
- [createForm](functions/createform.md)
- [Field](functions/field.md)
+- [useStore](functions/usestore.md)
diff --git a/docs/framework/solid/reference/interfaces/solidformapi.md b/docs/framework/solid/reference/interfaces/solidformapi.md
index ab0a76bdd..048fa225a 100644
--- a/docs/framework/solid/reference/interfaces/solidformapi.md
+++ b/docs/framework/solid/reference/interfaces/solidformapi.md
@@ -21,7 +21,7 @@ createField: CreateField;
#### Defined in
-[createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16)
+[packages/solid-form/src/createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16)
***
@@ -33,7 +33,7 @@ Field: FieldComponent;
#### Defined in
-[createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15)
+[packages/solid-form/src/createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15)
***
@@ -49,11 +49,15 @@ Subscribe: (props) => Element;
#### Parameters
-• **props**
+##### props
-• **props.children**: `Element` \| (`state`) => `Element`
+###### children
-• **props.selector?**
+`Element` \| (`state`) => `Element`
+
+###### selector
+
+(`state`) => `TSelected`
#### Returns
@@ -61,7 +65,7 @@ Subscribe: (props) => Element;
#### Defined in
-[createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20)
+[packages/solid-form/src/createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20)
***
@@ -77,7 +81,9 @@ useStore: (selector?) => () => TSelected;
#### Parameters
-• **selector?**
+##### selector?
+
+(`state`) => `TSelected`
#### Returns
@@ -89,4 +95,4 @@ useStore: (selector?) => () => TSelected;
#### Defined in
-[createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17)
+[packages/solid-form/src/createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17)
diff --git a/docs/framework/solid/reference/type-aliases/createfield.md b/docs/framework/solid/reference/type-aliases/createfield.md
index 321be9093..6c74e7fb9 100644
--- a/docs/framework/solid/reference/type-aliases/createfield.md
+++ b/docs/framework/solid/reference/type-aliases/createfield.md
@@ -25,7 +25,9 @@ type CreateField: (o
## Parameters
-• **opts**
+### opts
+
+() => `object` & `Omit`\<`CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
## Returns
@@ -37,4 +39,4 @@ type CreateField: (o
## Defined in
-[createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29)
+[packages/solid-form/src/createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29)
diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md
index bfa206357..d953d3f8e 100644
--- a/docs/framework/solid/reference/type-aliases/fieldcomponent.md
+++ b/docs/framework/solid/reference/type-aliases/fieldcomponent.md
@@ -28,10 +28,12 @@ type FieldComponent: , `"form"`\>
+\}
+
+`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
## Returns
@@ -39,4 +41,4 @@ type FieldComponent: data.value?.firstName || '')
+const lastName = computed(() => data.value?.lastName || '')
-watchEffect(() => {
- if (data.value) {
- defaultValues.firstName = data.value.firstName;
- defaultValues.lastName = data.value.lastName;
- }
+const defaultValues = reactive({
+ firstName,
+ lastName
});
const form = useForm({
diff --git a/docs/framework/vue/guides/basic-concepts.md b/docs/framework/vue/guides/basic-concepts.md
index 79e07f06b..86a8a90f9 100644
--- a/docs/framework/vue/guides/basic-concepts.md
+++ b/docs/framework/vue/guides/basic-concepts.md
@@ -146,22 +146,25 @@ Example:
```
-## Validation Adapters
+## Validation with Standard Schema Libraries
-In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
+In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.
-Example:
+You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.
+
+Supported libraries include:
+
+- [Zod](https://zod.dev/)
+- [Valibot](https://valibot.dev/)
+- [ArkType](https://arktype.io/)
```vue
+
+
+