Shadcn Tanstack Forms Masterclass

Tanstack + Zod + Shadcn UI

A comprehensive guide to building production-ready forms with validation

Validation Modes Demo

TanStack Form lets you control when validation happens. Try typing in each field to see the difference between modes.

onChange Mode

Validates on every keystroke

Error appears instantly as you type

onBlur Mode

Validates when you leave the field

Error appears after you leave the field

onSubmit Mode

Validates only when you click submit

Error appears only after clicking submit

onChangeAsync Mode

Debounced validation with async checks

Waits 500ms after you stop typing, then checks availability

When Validation Occurs

ModeWhen Validation OccursBest For
onChangeEvery keystrokeReal-time feedback (e.g., password strength)
onBlurWhen you leave the fieldLess intrusive validation (recommended)
onSubmitWhen form is submittedSimple forms, minimal interruption
onChangeAsyncDebounced async checksAvailability checks, server-side validation

💡Pro Tip

The onBlur mode is recommended for most forms as it provides a good balance between user experience and validation feedback. Use onChange for fields that benefit from immediate feedback, like password strength indicators.

Comprehensive Registration Form

Personal Information

Please provide your basic information

Your full name as it appears on official documents

We'll never share your email with anyone else

Must be at least 8 characters with uppercase, lowercase, and numbers

Profile Details

Tell us more about yourself

Your date of birth is used to calculate your age

You must be at least 18 years old to register

Your country of residence

Choose your preferred communication language

Brief description about yourself (0/500 characters)

Preferences

Customize your experience

Newsletter Topics

Choose up to 3 topics you want updates about

Account Type

Choose the plan that best fits your needs

Communication Settings

Manage your notification preferences

Receive notifications about your account activity

Receive emails about new products and features

Add an extra layer of security to your account

Built with Next.js 16, TanStack Form, Zod, and Shadcn UI