Next JS forms with Shadcn UI (the EASY way) 

I was sick when recording this so do me a favour and give the video a thumbs up 👍😂

When you set the account-type to 'company' and fill in the company name field, and then change the account-type to 'personal', and then submit the form, the company-name will still be logged in the console, even though the account-type is already changed to 'personal' and the company-name field is no longer exist. This is probably not a problem on most use-case, but I think this is worth noting.

hey man i just went back after realized I haven't thank you about how straight forward this was! Thank you.

I am really thankful for your consideration and hope that in near future you will bring the full stack course in next js sometime like ecommerce or expenses tracker or something like LinkedIn or anything you like where more and more concepts of front end and backend are covered.

Brilliant tutorial, explained really well - thanks a lot! Hands down the top guide for shadcn and forms out there!

Thank you very much, I finally managed to understand how to use these tools :)

Amazing it's exactly what I was looking for ❤

Thank you so much for sharing mate! I hope you get well very soon 🙌🙌

Thank you so much for suc a clear explanation!

What a great explanation! Subscribed!

Amazing video! Thank you so much 🙏🏼

Thank you very much for your effort to make a good explanation of the great content, It made I've more understanding in the Next JS form., finally subscribed and planned to get your course of NextJS on Udemy as well.

Thanks a lot i am in the process of making my first react project and i looked everywhere for some good docs that explain how to make a custom validation and i couldn't find any, but you are not only showing us how, you are also explaining it step by step which is great for people like me who's first language isn't English, thanks a ton, also just a request can you show us how to upload more than one image file with typescript too? Thanks

Hi! Thank you so much for the tutorial, it's been very helpful for me as I'm currently building my first project using shadcn :) Will you also make a tutorial on using something like nodemailer to build on top of this example, so the contact form can be sent to an external email address?

Fantastic video, appreciate that you drop the code too. I think if you now went ahead and you did a part 2 implementing this with next-safe-actions and server validation you'd have a very robust modern implementation. It's how I implemented it and there's 0 content available for the full example.

it was really very helpfull man

Helpful! Thank you!

Great video! Thank you a lot

Love it straight to point but i make a vidoe with phn field with all the country code and validation

Hey great video! I was wondering how did you know where to "insert" the FormControl component in between the Select component anatomy? I've been working on the Combobox component and trying to make it work in a form. I've done a first version of it but yours with the Select seems cleaner.

Great Explanation!! Sir please can you post a full stack video with an extensive use of shadcn and shadcn form and use the PostgreSQL as a backend with prisma.

it's so clear and useful. thank you

Great video !

Appreciate it Sir Thanks

Thanks man! ♥

Very helpfull!

There are quite a few videos on shadcn on RU-vid but none of them go deep and show how some of the complex shadcn components are to be used, like Form for example. I hope you also do a video on the DatePicker shadcn component as well. It seems to have a problem regarding manually typing dates. For example if you want to select your birth date, then you'll have to click a lot of times to get to your birth year.

Thank you very much

Thank You😊

Thnx for the lesson. Do you know how to make shadcn select to get focused on error? It happens correctly for input. But doesn't happen as expected in select and radio group.

Good job 👏

Hi Tom Philips I tested this form, it is rendering multiple times unnecessarily including “render” prop method and also entire component(page.tsx). When we use “react-hook-form” it manages form state internally, but here re-renders happening on every keystroke. Could please help me how to avoid unnecessary re-renders?

hey how would you do the same for files im trying to do it but facing some difficulties itll be helpful if could give a sample. Thank you

How do you validate data again in server function?

Can you do same without ShadeCDN. this is so cool

how to show #contact section of a long page, after submitting form using server actions with js disabled. #contact section is at last of the page.

You're the best

Does anyone know why I get a hydration error whenever I use more than a single FormField within the form?

Hi and thx How to reset the form after submission ?

HelloHi, what would be your approach if you wanted the text field to be filled from a variable instead of typing it manually, I made some attempts and it shows it correctly in the front end ( value={var} ), but when I submit the form it tells me that it is empty.

That was great! but how can I do a server action?

Triggering Select Button hides the Scrollbar. How to avoid this behaviour ?

What about with inputs other than string? numbers, dates, bigint? I'm a little confused what the best way to handle this is in the Shadcn ui, zod, react-hook-form space is...

Huh so I am still pretty new to web development and I realized that I don't really have much experience building forms. But this form management with ShadCN looks unnecessarily complicated - is it even more complicated if you decide not to use ShadCN and would build it with just React?

What about file input or rich text editor 🤔 How ?

8:49 intellisense is not working, Any solution?

Great video just want to ask when the user takes the steps: 1. He clicks on the company 2. Fills in the input 3. Switches back to personal 4. Sends So accoutType - personal is set, but companyName is also set... It also sends comapanyName... Is there any way to prevent this? I don't think this should be happening

Is it possible to use shadcn for file input?

Just add a input type date, and everything breaks 😅

why is a simple form so complex 😢😢

Build form is never easy, I think. This is just a simple form.