Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Layouts

Horizontal Layout Form for React

A form with each label beside its input in a four-column grid, for username and email.

Framework
UI library

Labels beside their inputs save vertical space in settings panels and dense screens. Each Field here is a grid grid-cols-4 items-center gap-4: the FieldLabel takes the first column, aligned to the end, and a FieldContent spanning the other three holds the Input and its FieldError. A Controller wires each input into React Hook Form, a Zod schema checks username and email on submit, and Save sits at the end of the row.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the labels sit beside the inputs?

Each Field gets className="grid grid-cols-4 items-center gap-4". The FieldLabel is justify-end, so its text lines up against the input. FieldContent has col-span-3 and holds the input with its FieldError under it.

What validation do username and email use?

username is z.string().min(2) and email is z.email(), with no custom messages, so FieldError shows Zod's defaults, such as Invalid email address.

How is the email input different?

It sets type="email" and the placeholder john@example.com. Username uses the placeholder johndoe and stays a text input.

Where does Save sit?

Save is a type="submit" button in a horizontal Field with justify-end, so it lines up with the end of the max-w-2xl form. The rows stack in a FieldGroup with gap-4.

What are the default values?

defaultValues sets email and username to empty strings, so an empty submit fails both checks.

When does the row show an error?

mode is unset, so the messages appear on submit, under each input in its FieldContent. The label stays centered on the row.

All 42 form examples