TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

unwilling-turquoise

9/19/2025

TypeScript: pass result of useForm as component props

Hi, I am trying to pass my form created by useForm via props to a child component but I am not sure how to properly type it in the TypeScript. Here is an example:...

exotic-emerald

9/18/2025

How to do sub field validation?

``` const form = useZeroAppForm({ defaultValues: { create_user: createUserDefaultValues, create_vendor: createVendorDefaultValues,...

vicious-gold

9/17/2025

serverValidation with zod

Hello! I’m exploring the server-validation feature in TanStack Form and saw issue #1704 (“Zod errors from server action aren’t propagated to field error”). Is using a Zod schema in createServerValidate({ onServerValidate }) an intended/supported path for server validation (alongside the Standard Schema adapter)?...

rare-sapphire

9/16/2025

React 17 type issue

When I try to use tanstack form in a existing project that uses the latest versions of react 17 and it's types, I'm getting back:

``
form.AppField cannot be used as a JSX component.
Its return type

ReactNode

 is not a valid JSX element.
Type

undefined is not assignable to type Element | null`...

other-emerald

9/14/2025

Reusable array component

Hi, I am trying to create reusable array component but it feels like i am doing something wrong. What is idiomatic way to do it? I am at this so far: ```jsx...

continuing-cyan

9/12/2025

Proposal: Server Error Mapping & Success Flow Utilities (as an optional package)

Hi everyone 👋 We often see questions about how to inject server-side validation errors into TanStack Form, and how to handle success flows (reset, flash messages, redirects, etc.) consistently. Right now it’s possible, but every team ends up writing their own boilerplate. I’d like to explore creating a small optional package (e.g. @tanstack/form-server) that would provide simple utilities...

xenial-black

9/11/2025

Form does not use initial values from async query result

Hey there 👋 Would someone mind having a look? 🙂 https://stackoverflow.com/questions/79761818/tanstack-form-does-not-use-initial-values-from-async-tanstack-query-result...

fascinating-indigo

9/9/2025

How to use TanStack Start's `createServerFn`, validation library, & Form

I have a form that submits data to the server via TSS's createServerFn function: ``` const fooSchema = v.object({...

ratty-blush

9/9/2025

Get Field Group Errors That Were Set on Individual Fields

I have a withFieldGroup component that has 2 fields in it. I've used the validators prop on <group.Field> to set up validation for each field. I'd like to combine the errors for both fields into one, which means I need to access the errors for both fields outside of each field's respective <group.Field>. I've tried a few ways to do this:...

other-emerald

9/9/2025

Passing prop to withFieldGroup.

Is there way to pass dynamic props to withFieldGroup, not static ones from props key but to the component itself. Something like: <MyFieldGroup isDisabled={...} />...

complex-teal

9/9/2025

reset after form success

using nextjs server actions and tanstack form, how can i reset the form if the request succeeds ?

manual-pink

9/8/2025

Accessing form API outside of the form component

I'm struggling to understand how to access formApi outside of the component where I've created the form. Is there some context provider or something to be able to use the form? What I'm trying to do is reset the form (form.reset()) outside of the form itself. So basically, I have made a simple draft system with zustand persistent store. I have a component which uses the store, and there is a clearDraft function, which is triggered by a button. I want it to also reset the form since clearing the draft from the store does not re-render/reset the form....

deep-jade

9/4/2025

Conditional disable submit button

Hey everyone! 👋 I'm having an issue with TanStack Form and button state management. Everything works as expected except for one scenario: Expected behavior:...

optimistic-gold

9/3/2025

Losing all types when consuming form hook from component library

Hello there ! We've tried to implement pre-bound components in our component library as follows `const { useAppForm, withForm, withFieldGroup } = createFormHook({...

useful-bronze

8/30/2025

linked fields, source field validation uses stale linked values

i have this linked field logic, and for some reason i can't figure out how to get the validation trigger to use the newly set values. i'm able to get around this by, instead of using linked fields, in the source field i just manually set the values there. everything works great then, but it's a bit unergonomic because this is an array field, so i have to manually iterate over each array entry and setFieldValue ```tsx...

ratty-blush

8/29/2025

Nesting Field Array in Child Component

Hi folks! I'm trying to create an array field with the ability to to add items to the array. There is an example of how to do this in the docs (https://tanstack.com/form/latest/docs/framework/react/guides/arrays#full-example) but the docs always seem to assume that I'm rendering all my fields in the root form component where the useForm hook is called. ```ts...

conscious-sapphire

8/29/2025

How do I redirect a user after successfully submitting a form?

I'm currently using the set up exactly as outlined in the Next.js integration docs, and using redirect from next/navigation inside the Server Action. However, when submitting, I see some odd behavior where the validations run once more after my server action, and then I see some errors briefly on the form before it finally redirects. Is there a canonical way to redirect? (I searched the docs and the Discord for "redirect" and found nothing)...

rare-sapphire

8/28/2025

Unnecessary rerendering of fields caused by validation libs

I noticed some unexpected rerendering and wanted to know if this is the intended behavior. In the Form Composition example, when you continuously type into any field, it only ever rerenders that field. Even when others fields are still invalid. https://tanstack.com/form/latest/docs/framework/react/examples/large-form However, this is not the case for the Standard Schema example. When you continuously type into field1, field2 will also rerender while it is invalid. If you make field2 valid and go back to typing in field1, then field2 no longer rerenders. This behavior is the same no matter which validation lib you switch between. https://tanstack.com/form/latest/docs/framework/react/examples/standard-schema...

passive-yellow

8/28/2025

Reactive form.Subscribe to multiple form values

Hi, I have a nested form with fields like this: translations.<"draft" | "published">.<"en" | "ja">.title And I want to be able to switch between the translations' draft/published and locales with switches, so I did this: ```tsx // ... ...

metropolitan-bronze

8/26/2025

Programmatically clear errors on specific (array) fields

Hello again! I'm running into a very specific problem on my TSF app. I created a simplified version of it on StackBlitz so it illustrates my problem a little better: https://stackblitz.com/edit/reset-tsf-errors?file=src%2Findex.tsx I have an array of fields and we can't have duplicate values in there. Whenever we try submitting the form and this rule is not fulfilled, we should highlight which fields are dupes. For example:...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs