Skip to content
Web Dev Simplified
×1.4YouTube long-form

I Will Never Use Shadcn Form Components Again

WDWeb Dev Simplified@WebDevSimplified · 1.8M subscribers
Views
68.8K
68,843
Outlier
×1.4
Median 47.5K
Length
1:11:28
Published
Oct 21, 2025
Tuesday
Comments
112
1.6K likes

Script

No transcript

Scout reads the transcripts of each creator's 12 latest long-form videos. This one isn't among them yet.

Description

Shadcn’s new Field component replaces the old Form component, but it is quite a bit different. In this video I will show you how all the new Field components work and more importantly I will show you how to create a clean reusable set of form components using React Hook Form and TanStack Form.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/s...

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com

My Courses: https://courses.webdevsimplified.com

Patreon:   / webdevsimplified

Twitter:   / devsimplified

Discord:   / discord

GitHub: https://github.com/WebDevSimplified

CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 - Introduction

00:50 - Starting Code

01:30 - Basic React hook form implementation

11:30 - Adding descriptions to form fields

13:51 - Select form fields

17:30 - Advanced field components and checkboxes

22:51 - Handling field arrays

30:23 - Advanced React hook form implementation

48:17 - Basic Tanstack form implementation

54:15 - Advanced Tanstack form impementation

#Shadcn #WDS #ShadcnField

More from Web Dev Simplified

Search Scout

Search creators, videos and pages, then press Enter to open one.