Signup Form
User registration form with validation
SaaSAuth
Overview
SignupForm provides a complete user registration experience. It includes fields for name, email, password with confirmation, plan selection via radio buttons, terms of service acceptance, optional SSO provider buttons, loading states, and server error display.
Usage
import { SignupForm } from "@leanicon/web-builder-library/saas";
const plans = [
{ id: "free", name: "Free", price: "$0/mo", features: ["5 projects"] },
{ id: "pro", name: "Pro", price: "$29/mo", features: ["Unlimited projects"], recommended: true },
];
<SignupForm
plans={plans}
tosUrl="/terms"
privacyUrl="/privacy"
onSubmit={(data) => handleSignup(data)}
isLoading={isSubmitting}
error={signupError}
/>;Variants
Default
With SSO
With Error
Loading State
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
onSubmit | (data: SignupFormData) => void | — | Yes | |
plans | SignupPlan[] | — | No | |
ssoProviders | SsoProvider[] | — | No | |
onSsoLogin | ((provider: SsoProvider) => void) | — | No | |
ssoLoadingProvider | enum | — | No | |
tosUrl | string | — | No | |
privacyUrl | string | — | No | |
labels | SignupFormLabels | — | No | |
className | string | — | No | |
isLoading | boolean | false | No | |
error | string | — | No |