# Register Form

> Registration form inside a modal dialog with password strength indicator.

A shadcn/ui block from the [@buzzform](https://form.buildnbuzz.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/buzzform/register-form).

- Page, with a live preview: https://shadcn.exchange/r/buzzform/register-form
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/buzzform/register-form-light-c6228c4fb44c2084.png
- Registry item: https://form.buildnbuzz.com/r/register-form.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://form.buildnbuzz.com/r/register-form.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@buzzform/text`, `@buzzform/email`, `@buzzform/password`, `@buzzform/checkbox`, `dialog`, `button`, `sonner`

## Files

### `registry/shadcn/examples/register-form.tsx`

```tsx
"use client";

import { useState } from "react";
import { toast } from "sonner";
import { defineSchema, type InferType } from "@buildnbuzz/form-react";
import {
  Form,
  FormContent,
  FormFields,
  FormSubmit,
  FormActions,
} from "@/registry/shadcn/form";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Link from "next/link";

// Registration form with password strength
const registerSchema = defineSchema({
  fields: [
    {
      type: "text",
      name: "name",
      label: "Full Name",
      placeholder: "John Doe",
      required: true,
    },
    {
      type: "email",
      name: "email",
      label: "Email",
      placeholder: "you@example.com",
      required: true,
    },
    {
      type: "password",
      name: "password",
      label: "Password",
      placeholder: "Create a strong password",
      required: true,
      minLength: 8,
      criteria: {
        requireUppercase: true,
        requireLowercase: true,
        requireNumber: true,
        requireSpecial: true,
      },
      ui: {
        strengthIndicator: true,
        showRequirements: true,
        allowGenerate: true,
        copyable: true,
      },
      autoComplete: "new-password",
    },
    {
      type: "checkbox",
      name: "terms",
      label: (
        <span className="text-xs">
          I agree to the <Link href="/terms">Terms of Service</Link> and{" "}
          <Link href="/privacy">Privacy Policy</Link>
        </span>
      ),
      required: true,
    },
  ],
});

type RegisterSchema = InferType<typeof registerSchema.fields>;

export default function RegisterFormDialog() {
  const [open, setOpen] = useState(false);

  const handleSubmit = async ({ value }: { value: unknown }) => {
    const data = value as RegisterSchema;
    await new Promise((resolve) => setTimeout(resolve, 1500));
    toast("Account created!", {
      description: (
        <pre className="mt-2 max-h-48 overflow-auto rounded-md bg-muted text-muted-foreground p-3 text-xs">
          <code>{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    });
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button />}>Create Account</DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Create Account</DialogTitle>
          <DialogDescription>
            Password strength indicator with real-time requirements
          </DialogDescription>
        </DialogHeader>
        <Form schema={registerSchema} onSubmit={handleSubmit}>
          <FormContent>
            <FormFields />
            <FormActions>
              <FormSubmit className="w-full">Create Account</FormSubmit>
            </FormActions>
          </FormContent>
        </Form>
      </DialogContent>
    </Dialog>
  );
}
```