Fix shadcn/ui Select Not Working in React Hook Form | Full Controller Guide with TypeScript Setup

In this video, we solve one of the most common problems developers face: shadcn/ui Select not working with React Hook Form (RHF). If your Select component is not capturing form values, or it’s breaking your validation, this tutorial explains why it happens and how to fix it using the RHF Controller component.

You’ll learn how the Controller, control, and render props work internally, how to connect shadcn/ui Select properly, and how to handle Enum types with TypeScript. We also build a real-world Employee Settings Form from our Brazil Job Portal application, including multiple Select fields like team size.

This is a must-watch for anyone using shadcn/ui with RHF in React + TypeScript.
----------------------------------------------------------------------------------
📂 Source Code
👉 GitHub Repo: https://github.com/thapatechnical/job...

------------------------------------------------------------------------------------
🔗 Useful Playlists

📘 Next.js Full Stack Playlist:
   • Next.JS Full Course Tutorial in Hindi  

⚛️ React.js Playlist:
   • React.js v19 Tutorials in Hindi - 2025  

💻 TypeScript Playlist:
   • Typescript Tutorial for Beginners in Hindi  
------------------------------------------------------------------------------------
💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code

📺 Watch the complete Node.JS Playlist here :   • Node JS Tutorial for Beginners in Hindi - ...  

🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/1...
------------------------------------------------------------------------

🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course -    • HTML Complete Tutorial for Beginners in Hi...  
🔗 Best CSS Course -    • Complete CSS Tutorial for Beginners in Hin...  
🔗 JavaScript Basics Course Part 1 -    • JavaScript Full Course Tutorial for Beginn...  
🔗 JavaScript Advanced Course Part 2 -    • JavaScript Advanced full Course Tutorial🔥1...  

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/0...

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now :    / @thapatechnical  
📷 Connect on Instagram:   / thapatechnical  
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link:   / discord  

------------------------------------------------------------------------

⌛TIMELINE⏳
0:00 — Intro to React Hook Form Controller
0:35 — How a normal HTML select works
0:50 — Inspecting shadcn/ui Select behavior
1:30 — What’s wrong with shadcn Select + RHF
3:30 — Why we must use Controller with shadcn
4:15 — Using Controller the correct way
5:05 — What the control prop actually does
6:20 — Understanding render props in Controller
6:40 — Adding Icons + shadcn Select component
7:00 — Enum type explanation for employee role
12:00 — Deep dive: render props with RHF Controller
14:30 — Adding a new Select field (Team Size)
16:00 — Pause & Try Yourself — Practice Task
17:00 — Completing the Team Size Select field
17:40 — Checking if form Select values are captured
19:20 — Next video updates & what's coming