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

rare-sapphire

3/24/2025

Can I add more on an validator onChange besides zod validator?

Currently the docs show this: ```ts validators: { // DEMO: You can switch between schemas seamlessly onChange: ZodSchema,...

adverse-sapphire

3/24/2025

React hook to extract errors?

I got the following hook, I'm not sure how to properly take the message for StandardSchema errors, any insight would be great! We basically always use either string OR zod for validators. ```ts const useFormatErrors = (errors: unknown[]): string[] => { return errors.map((error) => {...

stormy-gold

3/23/2025

mode="array" with appField in dynamic array

Hey, I have a bit of a complicated usecase I think. I have a dynamic form in which a user can add different segments to it (these segments or subforms can vary based on what the user selects). I build an AppField component for this segment and added it to my createFormHook under the fieldComponents (Let's call it ExamSegmentField). In my main form I now want to show all the segments the user has added like so:...

correct-apricot

3/21/2025

form.Field ts error

Hi! Im currently facing an issue, i found a hacky workaround but i wonder why Ts yells like this when using form.Field as a component Ive attached the ts error and my useForm invocation....

correct-apricot

3/20/2025

eslint no-unused-var triggers on AppField rendering (vite/react/js)

Any idea why would pnpm create vite my-react-app --template react with tanstack form mark this field as unused var? Ofc it goes away if I destruct const { Component } = field;, but I prefer to keep this inlined. ```jsx <form.AppField name="{name}">...

correct-apricot

3/20/2025

Suggested way of handling multiple checkboxes with indeterminate state on group headers

Hi there. I am looking through docs and trying to find the best/easiest approach for checkbox grid, where each "header" toggles entire group, and each item in group can set "header" checkbox to indeterminate state. I was looking through api, specifically useStore, Subscribe, transform, listeners, Linked fields etc and I am not sure which approach would render the easiest solution with Tanstack Forms philosophy. I'm trying to avoid splitting the code too much as so far I only got mess of passthrough checked/indeterminate states. I have:...

conscious-sapphire

3/20/2025

array with form composition

How can I use https://tanstack.com/form/latest/docs/framework/react/guides/arrays arrays with form composition. There are no examples of it and I cant type the useFormContext hook to make it work

quickest-silver

3/20/2025

Form data after validation

Hi, in the validators, the formdata gets decoded and validated but the decoded formdata is not returned when validation is succesfull. I was wondering what the reasoning behind that was?

equal-jade

3/19/2025

canSubmit true on mount

Hey everyone! I’m using TanStack Form v1 with Valibot for validation in a sign-in form. I ran into canSubmit is true on mount: My "Sign In" button uses form.Subscribe with state.canSubmit, but it’s enabled on mount even though the form is invalid (empty fields). I want it disabled until all fields pass validation.

conscious-sapphire

3/19/2025

Zod Types not inferring

Hey! Love this library I just encountered a strange error and I am unsure if its a Tanstack error, Zod or zod-drizzle error. I just wanted to mention this in case other run in to the same bug....

rising-crimson

3/19/2025

formOpts.onSubmit example

Does anyone have an example of how to move their onSubmit() to the formOpts? I would need to pass quite a bit of state and I can't figure it out. It would be really nice if I could set new state for tanstack store for postError to use in the onSubmit as well so I could then use it in A form component without passing it as props.

flat-fuchsia

3/18/2025

Tanstack Form + Start with isSubmitting handling?

I'm trying to use Tanstack Form + Start together. I can get it mostly working. But, I never see isSubmitting as true, so the UI doesn't show the pending state. The example at https://github.com/TanStack/form/tree/main/examples/react/tanstack-start has this problem, as does the integration guide for Start + Form at https://tanstack.com/form/latest/docs/framework/react/guides/ssr I think it's because they both use

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

, instead of handling submit themselves. ...

conscious-sapphire

3/18/2025

How do I use a form with React Query for debounced search/filter?

I just tried using TanStack React Form, and I want to use it with React Query for a searching feature. But how can I get a debounced value that I can pass to React Query to reduce requests on change? Should I use a custom hook, or does TanStack Form have that feature?...

rising-crimson

3/17/2025

Forms with a CMS

All the examples show building forms with static name fields to maintain strict typing. With a CMS like Payload I do not know the names ahead of time. The issue I have is I need to create wrappers around a withForm() component so I can pass the function that generates the def ault fields. This works fine besides having to pass the form as a prop typed as any. Has anyone figured out a clean way of creating reusable components and fields this way? Another wall was useFormContext() returns a form w...

conscious-sapphire

3/17/2025

canSubmit behavior is described inaccurately in documentation

In the documentation, the canSubmit property of the form state object is described as a "flag that is false when any field is invalid and the form has been touched". This doesn't accurately describe it's true behavior. I've got a Next.js project where I'm using client and server validation in the same form. The following happens: 1. I fill out the form properly and canSubmit becomes true...

conscious-sapphire

3/17/2025

[TypeScript] Passing field.state.meta.errors to child component

Trying to figure out what the type is for field.state.meta.errors to properly type a child component. It appears to be StandardSchemaV1Issue[] when you inspect the individual objects but when passing it to the child, I get a TypeScript error like this: ``` Type 'UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<{ email: string; password: string; }, "email", FieldValidateOrFn<{ email: string; password: string; }, "email", string> | undefined, ZodObject<{ email: ZodString; password: ZodString; }, "strip", ZodTypeAny, { ...; }, { ...; }>>>[]' is not assignable to type 'StandardSchemaV1Issue[]'. Type 'UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<{ email: string; password: string; }, "email", FieldValidateOrFn<{ email: string; password: string; }, "email", string> | undefined, ZodObject<{ email: ZodString; password: ZodString; }, "strip", ZodTypeAny, { ...; }, { ...; }>>>' is not assignable to type 'StandardSchemaV1Issue'. Type 'undefined' is not assignable to type 'StandardSchemaV1Issue'....

foreign-sapphire

3/17/2025

Custom ConditionalField

I am trying to simplify the way i handle conditional fields. For example i have a role field which can be set to either "User" | "Admin".
If "Admin" is set a new required field reason should appear. I have seen approaches where users add an onChange listener to the field role and it works fine. However this is a simple usecase. My actual use case is a big multi step form where the field might be rendered somewhere completely different. I generally don't like separating logic (In this case the listener) and rendering (of the field in some other subform later). ...

optimistic-gold

3/17/2025

server validation error not appear in field.meta.errors

Hi, may I know how I can retrieve the field's errors when using server-side validation, seems the errors from server validation do not exist in field.state.meta.errors but only in form.state.errors

rival-black

3/16/2025

Input masks

👋 Is there a recommended way to do input masks using Form? In particular, I'd like to have a date field in the dd.MM.yyyy format that auto adds the dots or jumps over them if they're input manually. We've all seen that kind of input. I've checked Maskito but it doesn't play nicely with controlled inputs - it will parse on every input and replace the value, meaning there's no way to edit an existing value in the field (deleted chars get autofilled with 0). Cheers...

genetic-orange

3/15/2025

use external values for form state values

I have a form; values in inputs can be specified by the user manually, but I would like to have as well an ability to pass value from, for example, Zustand. Is that possible? Thank you for any help.

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