Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Layouts

Responsive Layout Form for React

A form that stacks name, email, company and website in one column on small screens and shows two columns from the md breakpoint up.

Framework
UI library

Vertical on phones for clarity, two columns on wider screens to save height. The four Fields sit in a grid grid-cols-1 gap-4 md:grid-cols-2 inside the FieldGroup: below md they stack, from md up name sits beside email and company beside website. Each Field has its FieldLabel, Input, an optional FieldDescription and its FieldError, wired to React Hook Form with a Controller and checked by one Zod schema.

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 does the grid change width?

One div with grid grid-cols-1 gap-4 md:grid-cols-2 holds the four fields. Below the md breakpoint they stack. From md up they fill two rows of two. The form is max-w-2xl.

What does the schema require?

name and company are z.string().min(2), email is z.email() and website is z.url(). None passes a custom message, so FieldError shows Zod's defaults, such as Invalid URL.

Which fields have a description?

Name has the FieldDescription Your full name. and email has Your work email. Company and website have a label, an input and a FieldError only.

What input types are used?

Email is type="email". Website is type="url" with the placeholder https://example.com. Name and company are text inputs.

What website value passes?

z.url() needs a scheme: https://example.com passes and example.com fails.

When do the four checks run?

defaultValues starts every field as an empty string and mode is unset, so submit runs the resolver, then onSubmit logs the values.

All 42 form examples