Form Layouts 3 - Grid layout (2 columns)

Pro

Two-column grid of form fields with react-hook-form Controllers.

Shadcn Form Layouts 3 component

Component Data

  • ID:form/form-layouts-3
  • Access:pro
  • Created:Oct 5, 2025
  • Type:example

Form Layouts 3 component design & features

This example places Field Controllers in a two-column grid so paired inputs share a row on wide screens. Each cell keeps Field, FieldLabel, Input, and FieldError wiring from react-hook-form.

Two-column forms accelerate address entry, name fields, and filter dialogs on desktop. Fields should collapse to one column on narrow viewports for touch targets.