Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Patterns

Signup Form for React

A sign-up form with full name, email, a password that needs mixed case and a number, and a required terms checkbox.

Framework
UI library

Registration needs a few fields done right. This sign-up form asks for a full name, an email and a password that must be 8 characters with an uppercase letter, a lowercase letter and a number, then a terms checkbox that must be checked. Each field is a Field with its FieldLabel and FieldError, wired to React Hook Form by a Controller, and a sign in link sits under the full-width button. Use it for account creation and onboarding.

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

What does the password schema require?

.min(8) with "Password must be at least 8 characters.", then three .regex checks at module scope: an uppercase letter, a lowercase letter and a number, each with its own message. The FieldError shows the first that fails.

Where are those rules written before an error?

In the password's FieldDescription, set to text-xs: "Must contain uppercase, lowercase, and number". It shows before any submit.

How is the terms box required?

terms is z.boolean().refine((value) => value, …) with "You must accept the terms and conditions.", and it starts false. The Checkbox takes checked and onCheckedChange={field.onChange}.

What is inside the terms label?

The FieldLabel reads I agree to the terms and conditions, with terms and conditions as an a to href="#". It sits in a FieldContent beside the checkbox, with the FieldError under it.

What do full name and email check?

fullName is .min(2) with "Name must be at least 2 characters." email is z.email("Please enter a valid email address."). Their placeholders are John Doe and you@example.com.

What does Create Account log?

Create Account is a full-width type="submit" button. form.handleSubmit(onSubmit) logs { email, fullName, password, terms } to the console once all four pass. Under it, Already have an account? links Sign in to href="#".

All 42 form examples