docs(www): add note on file input with react hook form

[zeekrey]

Hey there! 👋🏻

Thank you so much for creating this amazing content! 😍 This is my first PR in this repository, so please let me know if anything is missing or can be improved.

Intention While all the components worked perfectly, I encountered some difficulties when using the <Input /> component with type="file" and react hook forms. In my search for a solution, I came across these helpful discussions:

• Issue 443
• Issue 884
• Issue 1085
• React Hook Form Discussion
• Stack Overflow Question

It seems that I'm not the first one to have these questions.

Solution I made a small addition to the <Input /> file example and included a tiny code snippet. I didn't include zod, as it was straightforward to use z.instanceof(File).

I hope this is valuable. Please let me know if there's anything else I can do to make changes.

[vercel[bot]]

@zeekrey is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[edeuxk]

Hello there !

You might change name="pricture" to name="picture"

And thank you very much for your PR, it saved me so much time.

[zeekrey]

Hello there !

You might change name="pricture" to name="picture"

And thank you very much for your PR, it saved me so much time.

That's fantastic that it helped! 🥳 I've corrected the typo. Thank you for the helpful hint.

[6abotage]

This information is still missing in the docs

[6abotage]

And after I checked now I think the reason your example works is because you're stopping the value from getting spread onto the Input, it therefore becomming uncontrolled. This feels like a work-around.

react-hook-form allows the mixed usage of controlled and uncontrolled components https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents