stormy-gold

Typesafety in FormAPI and FieldAPI for Shadcn Form Components

Hi @crutchcorn Just following up from our convo — I’m the one working on the TanStack Forms + shadcn/ui integration. I’m mainly stuck with getting things fully type-safe, especially around FormAPI and FieldAPI. example code:

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

Github URL: https://github.com/kulterryan/shadcn-tanstack-form/blob/main/src/components/ui/tanstack-form.tsx

GitHub

shadcn-tanstack-form/src/components/ui/tanstack-form.tsx at main ·...

Contribute to kulterryan/shadcn-tanstack-form development by creating an account on GitHub.

8 Replies

cloudy-cyan•4mo ago

it's generally discouraged to manually create the formApi parameters. There's helper functions such as withForm in Form Composition, but that depends on what exactly you're trying to achieve. If it's a form component, then a form context is the recommended way (also in the link)

stormy-goldOP•4mo ago

Ok let me check that. I tried, but not able to understand the docs properly.

cloudy-cyan•4mo ago

I'm not a maintainer, but I can help out if you have questions about form composition. So it depends on how the implementation is supposed to be done (following general guidelines for everyone vs. custom implementation)

stormy-goldOP•4mo ago

I'm trying to make the whole forms component composable like shadcn has done with react hook forms, I'm almost there but not able to figure out the type safety for making all the fields composable.

cloudy-cyan•4mo ago

you're likely used to a system like image 1. Summarized, Tanstack Form works with the system in the second image. If you want it to be as composable as possible, you'd provide the user with the field and form components. They may then decide which ones to pass onto createFormHook() and which ones to discard. You will also want to generate a fieldContext and formContext for them to use in the hook, as you'll use the respective useFieldContext()| useFormContext() hooks in your shadcn components

cloudy-cyan•4mo ago

so the usage would look less like:

<TextInput field={field}/>
<Feedback field={field}/>

<TextInput field={field}/>
<Feedback field={field}/>

And more like

<form.AppField name="path.to.field">
  {field => <>
    <field.TextInput/>
    <field.Feedback/>
  </>}
</form.AppField>

<form.AppField name="path.to.field">
  {field => <>
    <field.TextInput/>
    <field.Feedback/>
  </>}
</form.AppField>

That‘s still assuming you‘re planning to follow these general guidelines. It‘s possible to create a structure like the former code snippet, with some more effort.

ratty-blush•4mo ago

Adding onto this. Looks like a few others have done something like this. Here is an example one (Not saying it is perfect but a starting point): https://github.com/FatahChan/shadcn-tanstack-form/blob/main/src/registry/new-york/tanstack-form/tanstack-form.tsx

GitHub

shadcn-tanstack-form/src/registry/new-york/tanstack-form/tanstack-f...

Contribute to FatahChan/shadcn-tanstack-form development by creating an account on GitHub.

stormy-goldOP•4mo ago

More likely yes, I'm trying it like the first image only, I'll study more about createFormHook() and try to implement with the context. This explainer looks quite good to me. Let me give it a shot. Thanks 🙌

Gaming

Programming

Typesafety in FormAPI and FieldAPI for Shadcn Form Components

Did you find this page helpful?