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