Create type-safe form inputs in a comprehensive video tutorial that guides through building custom inputs with shadcn/ui and react-hook-form in a Next.js Full Stack project. Master form component development including text inputs, textareas, select menus, and checkboxes while implementing immediate user feedback and type safety features. Progress through practical examples starting with basic component anatomy, then build a complete customer form and ticket form implementation. Learn essential form development concepts including dependency installation, state management, and component integration across a 75-minute hands-on coding session that serves as the sixth installment in an ongoing Next.js Full Stack project series.
Type Safe Form Inputs with React-Hook-Form and ShadCN/UI in Next.js
Overview
Syllabus
Intro
Tech Stack
User Stories Checklist
Installing Dependencies
Anatomy of the Form Components
Text Input component
Customer Form
Textarea component
States Array constant
Select component
Ticket Form
Checkbox component
Taught by
Dave Gray
Related Courses
-
Next.js Form Development with React-Hook-Form, Drizzle-Zod, and ShadCN/UI
-
Next.js Modal Form with React-Hook-Form, ShadCN/UI Dialog, and Server Actions - Tutorial
-
Building React Tables with Next.js, ShadCN, and TanStack Table
-
Next.js Server Actions with Next-Safe-Action and Sentry - Type-Safe Error Handling Tutorial
-
Next.js SQL Data Queries with Drizzle ORM - Building a Full Stack Project
-
Building Search Forms with Next.js and Drizzle ORM - Full Stack Implementation
