Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Multi Field

Three Field Form for React

A three-field form with first and last name side by side above an email field with helper text.

Framework
UI library

Forms feel longer when every field spans the full width. This one puts first and last name side by side in a two-column grid and the email below them, which matches how people think about names and saves a row. Each input is a Field with its FieldLabel and FieldError, wired to React Hook Form by a Controller and checked by one Zod schema. Use it for account creation, short profiles or registration steps.

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 first and last name sit on one row?

The two name fields are in a div with grid grid-cols-2 gap-4 inside the FieldGroup. The email field and the submit button follow at full width.

What does each name and the email check?

firstName and lastName are z.string().min(2, …) with "First name must be at least 2 characters." and "Last name must be at least 2 characters." email is z.email(…) with "Please enter a valid email address."

Which field has helper text?

Only email, whose FieldDescription says "We'll use this to contact you." The names have a label, the input and a FieldError.

What types and placeholders are set?

Email is type="email" with john@example.com. The names are text inputs with John and Doe. Each label's htmlFor matches its input's id, such as three-field-form-first-name.

What does the form start with?

defaultValues sets all three fields to empty strings, so the first submit shows all three errors.

When do the three messages appear?

mode is unset, so the schema runs when you press Create Account. Each failing Field gets invalid and shows its own FieldError; after that, a field revalidates as you type.

All 42 form examples