Sign up form

• Page: https://ui.xzero.co.uk/components/blocks/signup-form

Variant: Sign up

An account creation flow with field validation, password strength, and a clear completion state.

• Access: Free, open source
• Registry id: signup-form
• Source file: registry/blocks/signup-form/signup-form.tsx
• Built from: Input, Password field, Checkbox, Button
• Keywords: react signup form, sign up page, registration form, create account form, password strength form, email password signup

Use this as the client side of an account flow. Supply an onSubmit handler that creates the account and handles server errors.

When to use

• The client side of an email and password sign-up.
• Sign-up pages that should show password strength and a product updates opt-in.
• Flows that want an in-place success panel after the account is created.

When not to use

• Use sign-in or login-split for returning users.
• Use password-field alone when the form is already built.
• Use otp-input for passwordless or code-based sign-up.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/signup-form

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { SignupForm, type SignupDetails } from "@/components/xzero/blocks/signup-form/signup-form";

export function SignUpPage() {
  const [error, setError] = useState<string | null>(null);
  async function create(details: SignupDetails) {
    const res = await fetch("/api/sign-up", { method: "POST", body: JSON.stringify(details) });
    if (!res.ok) setError("That email is already registered.");
  }
  return <SignupForm onSubmit={create} serverError={error} onProvider={provider => signIn(provider.toLowerCase())} />;
}

API reference

SignupForm

An account creation card: Google, Apple, and GitHub buttons, then name, email, password with strength, a product updates opt-in, and a completion state whose check draws itself in.

Prop	Type	Default	Description
onSubmit	(details: SignupDetails) => void | Promise<void>	–	Called with valid details. Awaited; a thrown error shows a submit error.
serverError	string | null	–	External error message shown under the form, for example from your auth API.
onProvider	(provider: "Google" | "Apple" | "GitHub") => void	–	Called when a provider button is pressed. Start your OAuth redirect here. Without a redirect, the block simulates the provider and shows the completion state after 900ms.

SignupDetails

Type passed to onSubmit.

Prop	Type	Default	Description
name (required)	string	–	Full name, at least 2 characters.
email (required)	string	–	Email that passed a basic format check.
password (required)	string	–	Password of 8 or more characters.
productUpdates (required)	boolean	–	Opt-in checkbox state.

Accessibility

• Invalid fields set aria-invalid and point aria-describedby at their message.
• Field and submit errors use role="alert"; the success panel uses role="status".
• Provider buttons have labels like "Sign up with Google"; while one is busy the others are aria-disabled.
• Password strength is shown as text, not only color.

Motion

• The card height springs between the form and the completion panel, which slides in while the form exits.
• The completion ring and check draw themselves in with pathLength.
• Reduced motion drops the offsets and blur and uses zero durations.

Responsive behavior

• Container query: below 380px of card width the padding, heading, and provider button text shrink so fields keep their width.
• Below 480px viewport width the card uses the smaller panel radius.

Performance

• Validation is local and synchronous; the card height is a motion value measured with a layout effect, so swapping steps does not reflow the page.
• Strength bars animate with CSS transitions, turned off under reduced motion.

Notes for AI

• Use as the client side of an email and password sign-up with optional social providers.
• Wire onProvider to your auth library's OAuth sign-in; the built-in provider flow is a simulation.
• Validation is local; keep server checks in onSubmit and pass their message through serverError.
• Composes Xzero Button, Checkbox, Input, and PasswordField.

Related

• Login and sign up: Email code: A sign in card that morphs from email to a six digit code to your account.
• Login and sign up: Split: A full screen split login: an email-first form that morphs into a password step beside a photo.
• Password field: Capture sensitive text with a visible reveal control.
• Password strength: Show how strong a new password is while it is typed.
• OTP input: A six digit verification flow with paste support and keyboard navigation.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt