Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Form - Conditional Validation
A React form with conditional validation using Zod refine and form watch showing and validating company fields only when checkbox is checked built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not all forms need the same fields for everyone. This React form uses shadcn/ui Checkbox with form.watch to show company fields only when users check I have a company—then Zod .refine validates those fields as required. Built with React Hook Form and conditional rendering with checkbox state, it's perfect for optional sections, progressive disclosure, or any form where field requirements depend on user choices.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Form with Optional Fields
Optional validation without conditional display
Required Field Validation
Basic required field validation patterns
Custom Validation Messages
Friendly custom error messages
Checkbox Toggle
Checkbox component for binary choices
Form with Field Groups
Grouped form fields with sections
Real-time Validation
Live validation with onChange mode
Questions you might have
React Form - Password Strength Validation
A React form with comprehensive password strength validation using multiple Zod regex rules for uppercase lowercase number and special character built with shadcn/ui
React Form - Custom Validation Messages
A React form with friendly custom validation messages using Zod message option and emojis for conversational user-friendly error feedback built with shadcn/ui