"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface SignupFormProps
  extends React.FormHTMLAttributes<HTMLFormElement> {
  title?: string;
  subtitle?: string;
  nameLabel?: string;
  emailLabel?: string;
  passwordLabel?: string;
  confirmPasswordLabel?: string;
  submitLabel?: string;
  termsLabel?: string;
  termsLinkLabel?: string;
  termsHref?: string;
}

export const SignupForm = React.forwardRef<HTMLFormElement, SignupFormProps>(
  (
    {
      className,
      title = "Create your account",
      subtitle = "Join the platform in a few quick steps.",
      nameLabel = "Full name",
      emailLabel = "Email address",
      passwordLabel = "Password",
      confirmPasswordLabel = "Confirm password",
      submitLabel = "Create account",
      termsLabel = "I agree to the",
      termsLinkLabel = "Terms and Privacy Policy",
      termsHref = "#",
      ...props
    },
    ref
  ) => {
    return (
      <form
        ref={ref}
        className={cn(
          "w-full max-w-md space-y-6 rounded-2xl border border-border bg-card p-6 text-foreground",
          className
        )}
        {...props}
      >
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-foreground">{title}</h2>
          {subtitle ? (
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>

        <div className="space-y-4">
          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{nameLabel}</span>
            <input
              type="text"
              name="name"
              autoComplete="name"
              required
              placeholder="Jane Doe"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{emailLabel}</span>
            <input
              type="email"
              name="email"
              autoComplete="email"
              required
              placeholder="you@example.com"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{passwordLabel}</span>
            <input
              type="password"
              name="password"
              autoComplete="new-password"
              required
              placeholder="Create a password"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{confirmPasswordLabel}</span>
            <input
              type="password"
              name="confirmPassword"
              autoComplete="new-password"
              required
              placeholder="Confirm your password"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>
        </div>

        <label className="flex items-start gap-2 text-sm text-muted-foreground">
          <input
            type="checkbox"
            name="terms"
            required
            className="mt-0.5 h-4 w-4 rounded border border-border bg-background text-foreground focus-visible:outline-none focus-visible:border-border"
          />
          <span className="text-foreground">
            {termsLabel}{" "}
            <a href={termsHref} className="text-primary hover:underline">
              {termsLinkLabel}
            </a>
          </span>
        </label>

        <button
          type="submit"
          className="w-full rounded-lg border border-border bg-muted px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-card focus-visible:outline-none focus-visible:border-border"
        >
          {submitLabel}
        </button>
      </form>
    );
  }
);

SignupForm.displayName = "SignupForm";
Signup Form

Create your account

Dependencies

Files

Installation
