Shadcn.io is not affiliated with official shadcn/ui
Form with Optional Fields
A React form mixing required and optional fields using Zod optional validation with Optional suffix labels built with shadcn/ui and React Hook Form
Not every form field deserves to be required. This React form uses Zod .optional() and .or with z.literal for company and website fields while requiring firstName, lastName, and email. Built with shadcn/ui Form components with React Hook Form and Optional label suffixes for clarity and grid layout for names, it's perfect for flexible registration, profile updates, or contact forms where some information is nice-to-have not mandatory.
Form with Optional Fields preview
Installation
Related Components
Two Field Form
All required fields
Three Field Form
Required fields with grid
Four Field Profile Form
Profile fields without optionals
URL Input Form
URL validation
Form with Field Groups
Sectioned form layout
Long Form with Many Fields
Complex registration form
FAQ
Was this page helpful?
Sign in to leave feedback.
Mixed Input Types Form
A React form combining text number email and phone input types with appropriate validation using React Hook Form and Zod coerce built with shadcn/ui
Form with Field Groups
A React form with field groups using h3 headings and sections for Personal Information and Address with space-y-6 separation built with shadcn/ui