Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Signup Form for React

Sign-up with full name, email, a password that needs mixed case and a number, and a required terms box.

Create an account asks for a full name, an email, and a password of 8 characters with uppercase, lowercase, and a number. The terms box must be checked. A sign-in link sits under Create Account.

Use it for registration. People who already have an account only need the login fields, not this terms Checkbox. In React, Base UI does not require the terms box.

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

Usage

<form className="w-full max-w-sm" onSubmit={form.handleSubmit(onSubmit)}>
  <FieldGroup>
    <div className="flex flex-col gap-2 text-center">
      <h1 className="font-bold text-2xl">Create an account</h1>
      <p className="text-muted-foreground text-sm">
        Sign up to get started with our platform
      </p>
    </div>
    <Controller
      control={form.control}
      name="fullName"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel htmlFor="signup-form-fullName">Full Name</FieldLabel>
          <Input
            {...field}
            id="signup-form-fullName"
            placeholder="John Doe"
          />

          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
    <Controller
      control={form.control}
      name="email"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel htmlFor="signup-form-email">Email</FieldLabel>
          <Input
{/* The rest of the file is under Installation. */}

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="#".

API Reference

Field

Sets invalid={fieldState.invalid}, htmlFor="signup-form-fullName", htmlFor="signup-form-email", htmlFor="signup-form-password", orientation="horizontal" and htmlFor={"signup-form-terms"}. The rest is on the Field page.

Input

Sets field, id="signup-form-fullName", placeholder="John Doe", id="signup-form-email", placeholder="you@example.com" and type="email". The rest is on the Input page.

Checkbox

Sets checked={field.value}, id={"signup-form-terms"}, name={field.name} and onCheckedChange={field.onChange}. The rest is on the Checkbox page.

Button

Sets type="submit". The rest is on the Button page.

All 42 form examples