Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Four Field Profile Form
A React form with four profile fields for username email bio and website using React Hook Form with mixed validation types built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Profile forms collect identity and contact info in one place. This React form validates username length, email format, bio content, and URL structure using Zod with different validation rules per field. Built with shadcn/ui Form components and React Hook Form with vertical stacking and selective FormDescription placement, it's perfect for user profiles, author bios, or account settings where multiple data types need collection and validation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Two Field Form
Simple two-field contact form
Three Field Form
Name fields with grid layout
Mixed Input Types Form
Different input types together
URL Input Form
URL validation alone
Form with Optional Fields
Required and optional mixed
Long Form with Many Fields
Comprehensive registration form
Questions you might have
React Three Field Form
A React form with three fields using grid layout for firstName and lastName side-by-side with email below built with shadcn/ui and React Hook Form
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