"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { PasswordStrength } from "@/components/ui/password-strength";

type FieldState = "default" | "error" | "success";

type StatusTone = "default" | "error" | "success";

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;
  showPasswordStrength?: boolean;
  nameState?: FieldState;
  emailState?: FieldState;
  confirmPasswordState?: FieldState;
  nameMessage?: string;
  emailMessage?: string;
  confirmPasswordMessage?: string;
  statusTone?: StatusTone;
  statusMessage?: string;
}

const getFieldStyles = (state: FieldState) => {
  if (state === "error") {
    return "border-destructive text-foreground focus-visible:border-destructive focus-visible:ring-2 focus-visible:ring-destructive";
  }
  if (state === "success") {
    return "border-primary text-foreground focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring";
  }
  return "border-border text-foreground focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring";
};

const getMessageTone = (tone: StatusTone | FieldState) => {
  if (tone === "error") return "text-destructive";
  if (tone === "success") return "text-primary";
  return "text-muted-foreground";
};

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 = "#",
      showPasswordStrength = true,
      nameState = "default",
      emailState = "default",
      confirmPasswordState = "default",
      nameMessage,
      emailMessage,
      confirmPasswordMessage,
      statusTone = "default",
      statusMessage,
      ...props
    },
    ref
  ) => {
    const [password, setPassword] = React.useState("");
    const nameMessageId = React.useId();
    const emailMessageId = React.useId();
    const confirmMessageId = React.useId();

    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>

        {statusMessage ? (
          <div
            role="alert"
            className={cn("rounded-lg border border-border bg-muted px-3 py-2 text-sm", getMessageTone(statusTone))}
          >
            {statusMessage}
          </div>
        ) : null}

        <div className="space-y-4">
          <div className="flex flex-col gap-2">
            <label htmlFor="signup-name" className="text-sm font-medium text-foreground">
              {nameLabel}
            </label>
            <input
              id="signup-name"
              type="text"
              name="name"
              autoComplete="name"
              required
              placeholder="Jane Doe"
              aria-describedby={nameMessage ? nameMessageId : undefined}
              aria-invalid={nameState === "error" ? true : undefined}
              className={cn(
                "w-full rounded-lg border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none",
                getFieldStyles(nameState)
              )}
            />
            {nameMessage ? (
              <p id={nameMessageId} className={cn("text-xs", getMessageTone(nameState))}>
                {nameMessage}
              </p>
            ) : null}
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="signup-email" className="text-sm font-medium text-foreground">
              {emailLabel}
            </label>
            <input
              id="signup-email"
              type="email"
              name="email"
              autoComplete="email"
              required
              placeholder="you@example.com"
              aria-describedby={emailMessage ? emailMessageId : undefined}
              aria-invalid={emailState === "error" ? true : undefined}
              className={cn(
                "w-full rounded-lg border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none",
                getFieldStyles(emailState)
              )}
            />
            {emailMessage ? (
              <p id={emailMessageId} className={cn("text-xs", getMessageTone(emailState))}>
                {emailMessage}
              </p>
            ) : null}
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="signup-password" className="text-sm font-medium text-foreground">
              {passwordLabel}
            </label>
            {showPasswordStrength ? (
              <PasswordStrength
                id="signup-password"
                name="password"
                autoComplete="new-password"
                required
                placeholder="Create a password"
                value={password}
                onChange={setPassword}
              />
            ) : (
              <input
                id="signup-password"
                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:ring-2 focus-visible:ring-ring"
              />
            )}
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="signup-confirm-password" className="text-sm font-medium text-foreground">
              {confirmPasswordLabel}
            </label>
            <input
              id="signup-confirm-password"
              type="password"
              name="confirmPassword"
              autoComplete="new-password"
              required
              placeholder="Confirm your password"
              aria-describedby={confirmPasswordMessage ? confirmMessageId : undefined}
              aria-invalid={confirmPasswordState === "error" ? true : undefined}
              className={cn(
                "w-full rounded-lg border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none",
                getFieldStyles(confirmPasswordState)
              )}
            />
            {confirmPasswordMessage ? (
              <p id={confirmMessageId} className={cn("text-xs", getMessageTone(confirmPasswordState))}>
                {confirmPasswordMessage}
              </p>
            ) : null}
          </div>
        </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:ring-2 focus-visible:ring-ring"
          />
          <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-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          {submitLabel}
        </button>
      </form>
    );
  }
);

SignupForm.displayName = "SignupForm";
Signup Form

Create your account

Dependencies

Files

Installation
