Topics

Explore frontend patterns

JavaScript & TypeScript

State Management

Forms & Validation

Basic Form Multi-step Wizard Dynamic Arrays

Built by Tommy Nguyen with Next.js, shadcn/ui, Motion, and modern web technologies.

Connect with me

Topics

Explore frontend patterns

JavaScript & TypeScript

State Management

Forms & Validation

Basic Form Multi-step Wizard Dynamic Arrays

Forms & Validation

Learn React Hook Form with Zod validation. These patterns cover common form scenarios from basic to advanced.

Basic Form with Validation

A simple contact form demonstrating React Hook Form with Zod validation. Shows error handling, loading states, and form reset.

React Hook FormZodValidation

Name

Message

Multi-Step Form Wizard

A wizard-style form with step validation, progress indicator, and smooth transitions between steps. Each step validates independently.

Multi-stepWizardAnimatePresence

Personal

Contact

Work

First Name

Last Name

Dynamic Field Arrays

Using useFieldArray to handle dynamic form fields. Add or remove team members with validation for each entry.

useFieldArrayDynamic FieldsArray Validation

Team Name

Team Members

Member 1

Forms & Validation

Learn React Hook Form with Zod validation. These patterns cover common form scenarios from basic to advanced.

Basic Form with Validation

A simple contact form demonstrating React Hook Form with Zod validation. Shows error handling, loading states, and form reset.

React Hook FormZodValidation

Name

Message

Multi-Step Form Wizard

A wizard-style form with step validation, progress indicator, and smooth transitions between steps. Each step validates independently.

Multi-stepWizardAnimatePresence

Personal

Contact

Work

First Name

Last Name

Dynamic Field Arrays

Using useFieldArray to handle dynamic form fields. Add or remove team members with validation for each entry.

useFieldArrayDynamic FieldsArray Validation

Team Name

Team Members

Member 1