Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Form - Horizontal Layout
A React form with horizontal layout placing labels beside inputs using CSS Grid with text-right labels for Username and Email
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Compact forms need horizontal layouts—labels beside inputs save vertical space for settings panels and dense UIs. This React form uses React Hook Form with Zod validation featuring grid-cols-4 layout with text-right FormLabel (1 column) and col-span-3 input area (3 columns) with items-center alignment. Built with max-w-2xl container and grid-based FormItem structure, labels and inputs align horizontally—perfect for settings pages, admin panels, preferences, filters, or anywhere vertical space is precious and users benefit from seeing more fields simultaneously without scrolling.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Layout
Standard vertical stacking layout
Responsive Layout
Horizontal on desktop, vertical on mobile
Horizontal Fields
Unvalidated horizontal field layout
Compact Form
Space-efficient login form
Settings Dropdown
Compact settings UI
Dialog Form
Modal form layout
Questions you might have
React Form - Vertical Layout (Default)
A React form with vertical layout stacking labels above inputs for Name, Email, Phone validated with React Hook Form and Zod
React Form - Grid Layout (2 Columns)
A React form with two-column grid layout for paired fields like First/Last Name, Email/Phone, City/ZIP validated with React Hook Form and Zod