React Two Field Form

A React form with two fields for name and email using React Hook Form and Zod validation for simple contact forms built with shadcn/ui

Looking to implement shadcn/ui patterns?

Join our Discord community for help from other developers.

Contact forms need just enough fields to reach users without overwhelming them. This React form combines name and email validation using React Hook Form with Zod—minimum 2 characters for names, proper email format checking. Built with shadcn/ui Form components with space-y-4 vertical spacing and inline errors, it's perfect for newsletter signups, contact requests, or waitlist forms where you need basic contact info.

Pattern created by @haydenbleasel

React Two Field Form

Installation

Simple Text Input Form

Three Field Form

Email Input Form

Mixed Input Types Form

Dialog Form

Form with Optional Fields

Questions you might have

React Two Field Form

Installation

Related patterns you will also like

Simple Text Input Form

Three Field Form

Email Input Form

Mixed Input Types Form

Dialog Form

Form with Optional Fields

Questions you might have

How does space-y-4 spacing work for multiple form fields?

In what order do multiple fields validate?

How do users tab through multiple form fields?

Should I show all field errors at once or one at a time?

Should I disable the submit button until all fields are valid?

When should I add FormDescription to fields in multi-field forms?