How to use with shadcn ui?

[otatar]

Any ideas how to integrate with shadcn ui? There is a Form component, but it is tightly coupled with react-hook-form...

[otatar]

Well, since remix-hook-from is wrapper around react-hook-form, form related components from shadcn-ui (FormField, FormItem, etc...) as in the docs. You just need to wrap everything with :

export default function TestForm() {
const form = useRemixForm({
    mode: "onSubmit",
    resolver,
})

return (
 <RemixFormProvider {...form}>
        <Form onSubmit={form.handleSubmit} className="space-y-8">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="shadcn" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
)

And in the action function:

export const action = async ({ request }: DataFunctionArgs) => {
  const {
    errors,
    data,
    receivedValues: defaultValues,
  } = await getValidatedFormData<z.infer<typeof formSchema>>(request, resolver);

[ThatGuySam]

This was super helpful. I hadn't anything about the RemixFormProvider anywhere else yet.