Is Form compatitble with react-hook-form, yup, zod, etc.? Or is that redundant?

[ianpaschal]

After somewhat crudely attempting to wire together a react-hook-form form (using Zod) for validation this weekend, I was frustrated that there doesn't seem to be much guidance on how to use the Radix Form with RHF.

And then it hit me... it's not supposed to be, right? I have to admit I've never looked into the Constraint validation functionality of HTML5, relying for years on Formik and yup and more recently reach-hook-form and zod. But it seems that the everything that such libraries were used for is covered by the combination of the Form component and some custom validation functions.

I guess my question is: Am I right in assuming that trying to use RHF and Form is actually a bit of an anti-pattern? It suddenly hit me that I was essentially using two form management solutions at once and (expectably) struggling to get them to play nice.

The follow up would be: If this is indeed correct, maybe it's nice to add something to the documentation that it's intended to be a replacement. And if I'm not, what is the usecase for using both validation methods on top of each other? Any chance someone smarter than me has a working example showing the benefits of using them in conjunction?

Thanks!

[permalik]

@ianpaschal
Shadcn's Form uses RHF, Zod, and RadixUI.
I think you can simply use the Shadcn Form.
Otherwise, you can probably build it from scratch without worry -- I assume Shadcn has the implementation's source hosted in their repo if you wanted to take a peek.

[ianpaschal]

I'm afraid I'm very against using Shadcn. And while it does RHF and Zod, I don't think it uses RadixUI's Form component, does it?

But I've implemented my own Form component to tie into RHF's form context.

As far as I can tell, RadixUI's Form component should not be used with RHF or you've got two competing validation methods.

[jagretz]

Not that you want to use Shadcn or that it is directly built with radix-ui, but in case any one else is interested, Shadcn does list radix-ui as feature compatible:

Built to work with all Radix UI components.