Launch sale — 60% off Pro
Contact
AIBackgroundBlocksButtonsChartsComponentsHooksMCPPatternsPromptsShadcn UIShadersTextTheme
FormMulti Field

Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.

Previous: React Mixed Input Types FormNext: React Form with Field Groups

React 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

Looking to implement shadcn/ui patterns?

Join our Discord community for help from other developers.


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.

Where do you work?

Your personal or company website.

Pattern created by @haydenbleasel

Installation

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

Questions you might have

React 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

React 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