Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Form with Checkbox
A React form with multiple Checkbox controls validated using React Hook Form and Zod requiring terms acceptance with optional preferences
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Checkbox validation enforces required agreements—terms must be accepted before submission. This React form uses React Hook Form with Zod schema validation for Checkbox fields featuring required terms checkbox using z.boolean refine ensuring true value while marketing and security are optional. Built with FormField horizontal layout and FormMessage inline error display, checkbox validation enforces agreements—perfect for terms acceptance, newsletter preferences, notification settings, or anywhere checkbox consent needs validation preventing submission without required acknowledgment.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Form with Switch
Toggle-based preference form
Mixed Controls
Form combining multiple control types
Checkbox
Unvalidated checkbox control
Switch Toggle
Binary toggle control
Dialog Form
Modal form with checkboxes
Error Alert
Validation error display
Questions you might have
React Form with Textarea
A React form with Textarea validated using React Hook Form and Zod enforcing 10-500 character bio with live character count
React Form with Radio Buttons
A React form with RadioGroup validated using React Hook Form and Zod requiring plan selection from Free, Pro, Enterprise options