Make useForm compatible with shadcn Form component out of the box

[RiadhKHEDHIRI]

shadcn/ui is the most popular UI components collection for React. Its counterpart for Vue and Svelte are:

• shadcn-vue
• shadcn-svelte

They all have the Form component to build well-designed HTML forms. Typically, they are wrappers around these libraries to provide composable components for building forms with validation using libraries such Zod:

• React: https://react-hook-form.com/
• Vue: https://vee-validate.logaretm.com/v4/
• Svelte: https://formsnap.dev/ and https://superforms.rocks/

They expect useForm to return some controls and attributes.

For more details, here are the direct links to the documentation:

• https://ui.shadcn.com/docs/components/form
• https://www.shadcn-vue.com/docs/components/form.html
• https://www.shadcn-svelte.com/docs/components/form

It would be nice to enhance useForm to use shadcn forms out of the box. Thank you 🙏

[mits87]

Would be fantastic, currently I'm struggling with the same

[Sahrija]

Use router.post("/endpoint", zodValues) from @inertiajs/react on your onSubmit function, works well for me

import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/Components/ui/form';
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"
import { z } from "zod"

import { router } from '@inertiajs/react'

const formSchema = z.object({
  title: z.string().min(5).max(50),
  description: z.string().min(5).max(500),
})

export function YourForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      description: "",
    },
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    router.post('/posts', values);
  }
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} >
        // your shadcn FormFields
      </form>
    </Form>
  );
}

you can also pass the options, router.post("/url", values, options).

edit: add formater typescript to the block code, mb

[ramonmalcolm10]

The level of work it’s going to take along with the increase in complexity can’t be justified saving a server round trip plus in my experience it normally takes less than 100ms unless you have a really slow application. Just use HTML validation and Precognition if using a multi step form or need to check if a value already exists real time. For the most part you don’t need Precognition either.

[Sahrija]

It's already a package? I think I should fully read the documentation of the framework I'm using rather than make things complicated. Thanks for the solution.

[dioScar90]

Don’t think you need to use the Shadcn form and I would definitely advise against using Zod. Way easier to just extract the Shadcn form design components and let Laravel and Inertia handle the validation

Zod seems very useful for me (and a not so large dependency). Why don't you like it?

[ramonmalcolm10]

Don’t think you need to use the Shadcn form and I would definitely advise against using Zod. Way easier to just extract the Shadcn form design components and let Laravel and Inertia handle the validation

Zod seems very useful for me (and a not so large dependency). Why don't you like it?

I don’t have any issues with Zod—I use it when working with Next.js—but I don’t see the need for it with Inertia, since Inertia forms already integrate seamlessly. With Zod, you’d have to maintain validation on both the client and server. Simple HTML form validation should suffice, while the backend handles advanced validation, and it all just works out of the box.

[ramonmalcolm10]

No need to use the Shadcn form